gulp使用总结（终极版）

gulp是一个自动化工具，帮助开发过程中自动执行构建。

gulp使用基础知识点，共四个：基于流实现

gulp.src(globs[, options])  读取

gulp.dest(path[, options])  写入

gulp.task(name[, deps], fn) 创建任务

gulp.watch(glob [, opts, cb])

从gulp3到gulp4：参考：https://segmentfault.com/a/1190000017571288?utm_source=tag-newest

gulp.series 用于串行（顺序）执行
gulp.parallel 用于并行执行

gulp.task('default',
  gulp.series('clean', gulp.parallel('scripts', 'styles'),
  function() {...}));

gulp在使用过程中相关的模块：

node-glob

npm i glob

var glob = require("glob")
// options is optional
glob("**/*.js", options, function (er, files) {
  // files is an array of filenames.
  // If the `nonull` option is set, and nothing
  // was found, then files is ["**/*.js"]
  // er is an error object or null.
})

vinyl 美: ['vaɪn(ə)l] 

Vinyl是一个描述文件的非常简单的元数据对象。 当您想到一个文件时，会想到两个属性：路径和内容。 这些是Vinyl对象的主要属性。 文件不一定代表计算机文件系统上的某些内容。 您有S3，FTP，Dropbox，Box，CloudThingly.io和其他服务上的文件。 Vinyl可用于描述来自所有这些来源的文件

vinyl-fs

gulp-rename 改变gulp.dest()输出的文件名称

gulp-load-plugins这个插件会自动帮你加载package.json文件里的gulp插件

• 编译Sass： gulp-sass

gulp.task('default',function(){//js文件合并
   gulp.src('app/sass/!*.sass').pipe($.sass()).pipe(gulp.dest('dist/css'));
})

• 编译less： gulp-less

gulp.task('default',function(){//js文件合并
   gulp.src('app/less/!*.less').pipe($.less()).pipe(gulp.dest('dist/css'));
})

• 合并文件： gulp-concat

gulp.task('default',function(){
    gulp.src('app/!*.js').pipe($.concat('all.js')).pipe(gulp.dest('dist'));
})

• 压缩js文件： gulp-uglify

gulp.task('default',function(){
   gulp.src(['app/js/*.js']).pipe($.uglify()).pipe(gulp.dest('dist/js'))录下
})

• 重命名js文件： gulp-rename

gulp.task('default',function(){
   gulp.src(['app/js/*.js']).pipe($.rename('app.min.js')).pipe(gulp.dest('dist/js'))
})

• 优化图像大小： gulp-imagemin

gulp.task('default',function(){
   gulp.src('app/images/*.{jpg,png,JPG,PNG}').pipe($.imagemin()).pipe(gulp.dest('dist/images'))
})

• 压缩css文件： gulp-minify-css

gulp.task('default',function(){
   gulp.src'app/css/*.css').pipe($.minifyCss()).pipe(gulp.dest('dist/css'))
})

• 创建本地服务器： gulp-connect

gulp.task('server',function(){
    $.connect.server({
        root:'dist',//服务器的根目录
        port:8080, //服务器的地址，没有此配置项默认也是 8080
        livereload:true//启用实时刷新的功能
    });
});

• 实时预览： gulp-connect

gulp.task('copy-html',function(){
    gulp.src('app/index.html')//指定源文件
        .pipe(gulp.dest('dist'))//拷贝到dist目录
        .pipe($.connect.reload());//通知浏览器重启
});

代码检查 jshint

gulp.task('jsLint', function () {
    gulp.src('app/!*.js')
        .pipe(jshint()) //进行代码检查
        .pipe(jshint.reporter()); // 输出检查结果
});

run-sequence 按指定的顺序运行gulp任务序列

gaze fs watch封装模块

实例1：

说明：gulp.task中的回调函数的三种情况

第一：在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。

gulp.task('one',function(cb){ //cb为任务函数提供的回调，用来通知任务已经完成
  //one是一个异步执行的任务
  setTimeout(function(){
    console.log('one is done');
    cb();  //执行回调，表示这个异步任务已经完成，只是起一个通知的作用，并不是指向task two 的 fun
  },5000);
});

//这时two任务会在one任务中的异步操作完成后再执行
gulp.task('two',['one'],function(){
  console.log('two is done');
});
//one is done
//two is done

第二：定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。

gulp.task('one',function(cb){
  var stream = gulp.src('client/**/*.js')
      .pipe(dosomething()) //dosomething()中有某些异步操作
      .pipe(gulp.dest('build'));
    return stream;
});

gulp.task('two',['one'],function(){
  console.log('two is done');
});

第三：返回一个promise对象，例如

var Q = require('q'); //一个著名的异步处理的库 https://github.com/kriskowal/q
gulp.task('one',function(cb){
  var deferred = Q.defer();
  // 做一些异步操作
  setTimeout(function() {
     deferred.resolve();
  }, 5000);
  return deferred.promise;
});

gulp.task('two',['one'],function(){
  console.log('two is done');
});

实例2：

参考：https://www.gulpjs.com.cn/docs/api/

https://blog.csdn.net/hsl0530hsl/article/details/78366377