Gulp 사용 빠른 메모리

이 글에서는 gulp의 사용법과 gulp의 사용법을 빨리 외울 수 있는 방법에 대해 설명합니다. gulp의 사용법을 잘 모르는 분들을 위해 이 글을 함께 살펴보세요!

작성 단계:
1. 설치 방법
2. 사용 방법

1. 설치 방법
우선, 컴퓨터에 nodejs를 설치해야 합니다. gulp를 실행해야 합니다. nodejs 환경을 기반으로 합니다.
설치가 완료된 후 직접 npm install gulp -g(이 코드가 이해가 안되면 바이두에 문의해주세요.) 설치가 완료된 후 cmd 창에서 gulp 함수를 직접 호출할 수 있습니다.
2. 사용방법
꿀꺽의 역할은 무엇인가요?
css 폴더, js 폴더, 이미지 폴더 및 html 파일이 포함된 app이라는 프로젝트를 빌드합니다. 일반적으로 폴더에 있는 파일에는 공백과 설명이 포함됩니다. 이러한 파일은 전송하기에 상대적으로 크기가 크고 전송 효율성이 낮습니다. 따라서 이러한 파일을 압축하려면 gulp를 사용합니다.
꿀꺽꿀꺽은 어떻게 사용하나요?
1. 프로젝트 디렉터리에 직접 gulpfile.js 파일을 생성한 후 cmd 창에서 해당 명령을 실행하여 gulpfile.js를 실행합니다.
예를 들어 js 파일을 컴파일하려고 합니다. 앱 파일 구조는 다음과 같습니다.

다음으로 gulpfile 파일 작성을 시작합니다.

var gulp = require('gulp');//引入gulp模块
var uglify = require('gulp-uglify');
//引入gulp-uglify模块，用来压缩js文件。如果要压缩css文件就要引入gulp-minify-css模块。这些模块都要通过npm包管理器来安装。安装之后app文件中会自动出现一个叫node_modules的文件夹。如果你在全局安装了gulp，这里建议你进入到该项目文件夹再安装一次，避免后面gulp更新之后影响文件运行。

//执行压缩任务。创建一个名为script的任务(随意取名)，在cmd中输入gulp script会执行该任务，即运行后面的function功能
gulp.task('script',function(){
    gulp.src('js/*.js')//获取文件地址
         .pipe(uglify())//执行编压缩功能。如果是压缩css则把来自于gulp-uglify的uglify()方法转换成gulp- minify-css模块中的minifyCSS功能。
         .pipe(gulp.dest('dist/js'));//输出文件位置，在dist文件夹下的js文件夹内。如果项目中不存在dist的文件，会自动创建。
})

//编译完成，如果我们修改原js文件，要使压缩文件也自动改变怎么办。这个时候我们就要对原js文件进行监听，如果发现有改动则重新编译。代码如下：
//执行监听任务
gulp.task('auto',function(){// 创建一个监听任务。
    //监听文件修改，当文件被修改则执行script人物
    gulp.watch('js/*.js',['script']);//第一个参数表示监听的文件，第一个参数表示重新执行script人物。
})
//所有的任务要在cmd中输入gulp+任务名后才能执行。这样不太方便，可不可以在定义任务，它的作用就是执行执行之后可以执行所有的人物。
//有，如下：
//gulp.task('default')定义默认任务
//在命令行使用gulp启动script任务和auto人物
gulp.task('default',['script','auto']);
//这样我们直接在cmd中输入gulp就会执行script和auto这两个任务。

다음 gulp 기능을 요약합니다.

• gulp.task( '작업 이름', 함수(){}) 작업 정의

• gulp.src()//현재 파일 주소 찾기

• gulp.desk()//출력 파일

• gulp.pipe ()//이해 가능 파이프라인의 경우 실행 대기열에 작업을 추가합니다.

3. 다른 파일을 압축하거나 컴파일합니다(js와 비교만 하세요).
1. CSS 파일 컴파일
블록 이름: gulp-minify-css
파일 압축 기능: minifyCSS

2 , 이미지 압축
블록 이름: gulp-imagemin
파일 압축 기능: imagemin({progressive})

3. less 컴파일
블록 이름: gulp-less
컴파일 방법: less();

four , gulp를 사용하여 프로젝트

1. cmd에 종속 패키지 정보가 포함된 package.json구성 파일을 만듭니다.
해당 모듈을 설치하면 package.json에 모듈 이름이 추가됩니다.
2. 디렉토리 구조
디자인하기 파일을 두 가지 범주로 나눕니다. dist/ 디렉터리는 압축된 코드이고 src/ 디렉터리는 소스 코드 파일입니다.

gulp 출력에 시간과 색상을 부여하는 방법 gulp-util은 동일한 효과를 가지지만 색상 효과가 더 풍부합니다.
모듈 gulp-util

var  gutil = require('gulp-util');
gulp.task('default',function(){
    gutil.log('message')
    gutil.log(gutil.colors.red('error'))
    gutil.log(gutil.colors.green('message')+'some')
})

소개 여기서는 cmd 창에서 gulp 작업을 수행하기 위해서는 프로젝트 폴더, 즉 node_modules 폴더가 위치한 인터페이스에 gulp 작업이 들어가야 한다는 점을 강조한다.
4.js 파일 구성 방법
위 작성 방법에는 js 파일 하나를 수정하면 모든 js 파일이 다시 컴파일됩니다.
수정된 파일만 컴파일하고 싶다면 어떻게 해야 하나요?
gulp-watch-path를 사용하세요

//引入模块:var watchPath = require('gulp-watch-path');//设置一个监听js文件的人物watchjsgulp.task('watchjs',function(){
     gulp.watch('src/js/**/*.js',function(event){
     var paths = watchPath('event','src/','dist/')//监听所有的js文件，有一个文件发生改变，则返回一个对象，该对象包含被修改js文件的相关属性。
         /*
           paths对象的结构如下:{srcPath:'src/js/log.js',
           distPath:'dist/js/log.js',
           distDir:'dist/js/',
           srcFilename:'log.js',
           distFilename:'log.js'}
         */ 
      gulp.src(paths.srcPath)
          .pipe( uglify())
          .pipe(gulp.dest(paths.distDir))


})


})

소스 코드를 편집할 때 형식 오류가 발생하면 이 오류를 어떻게 출력하나요? stream-combiner2를 사용하면

var handleError = function (err) {
var colors = gutil.colors;
console.log('\n')
gutil.log(colors.red('Error!'))
gutil.log('fileName: ' + colors.red(err.fileName))
gutil.log('lineNumber: ' + colors.red(err.lineNumber))
gutil.log('message: ' + err.message)
gutil.log('plugin: ' + colors.yellow(err.plugin))
}
var combiner = require('stream-combiner2')
gulp.task('watchjs', function () {
gulp.watch('src/js/**/*.js', function (event) {
var paths = watchPath(event, 'src/', 'dist/')

var combined = combiner.obj([
gulp.src(paths.srcPath),
uglify(),
gulp.dest(paths.distDir)
])
combined.on('error', handleError)
})
})

압축된 코드에 줄 바꿈과 공백 문자가 없어 오류가 발생합니다. 매우 빠르게 발생 디버깅이 어렵습니다. 다행스럽게도 소스맵을 사용하여 디버깅을 도울 수 있습니다

var sourcemaps = require('gulp-sourcemaps')
// ...
var combined = combiner.obj([
gulp.src(paths.srcPath),
sourcemaps.init(),
uglify(),
sourcemaps.write('./'),
gulp.dest(paths.distDir)
])
// ...

이때 해당 .map 파일도 dist/js/에 생성되므로 Chrome 콘솔을 사용하여 코드를 디버깅할 수 있습니다.

gulp-autoprefixer – CSS 파일을 구문 분석하고 CSS 규칙에 브라우저 접두사를 추가합니다. 이러한 접두어는 컴파일 중에 추가됩니다

gulp.task('watchcss', function () {
gulp.watch('src/css/**/*.css', function (event) {
var paths = watchPath(event, 'src/', 'dist/')//用于检测被修改的文件，返回一个对像，该对象包含一些关于被修改文件的属性。
gulp.src(paths.srcPath)//获取文件地址
.pipe(sourcemaps.init())//初始化对象，便于后面生成该文件的.map文件
.pipe(autoprefixer({
browsers: 'last 2 versions'
}))//添加前缀
.pipe(minifycss())//执行压缩功能
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.distDir))//输出文件
})
})

관련 권장 사항:

gulp를 시작하기 위해 알아야 할 사항

위 내용은 Gulp 사용 빠른 메모리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!