简介

gulpwebpack都是前端著名的构建工具,通过一定的配置,几乎能实现一模一样的功能,但是gulp在使用上与webpack不同的点是,gulp要实现什么功能是以写脚本的方式自定义,而webpack以配置文件的方式,个人觉得通过gulp提供的方式自定义工作流更容易实现,也更透明,自己写插件也能方便的理清楚插件什么时候被调用,需要接收和输出什么东西。所以即使你会了webpack,学习gulp也是非常有必要的。

demo

安装

npm i -g gulp-cli
npm i -D gulp

编写gulpfile.jsgulp默认执行gulpfile.js文件

var gulp = require('gulp');

gulp.task('default', function (cb) {
  console.log('task default')

  cb()
})

gulp.src

读取需要处理的文件,以便进行后续的处理。 第一个参数:匹配模式字符串或字符串数组。了解 Globs 第二个参数:可选,通过glob-stream所传递给node-glob的参数。 返回:Vinyl filesstream。通过pipe(..)将文件流向后续插件传输。

gulp.dest

通过pipe(..)输入文件流,将文件写入硬盘,并输出所有数据,能继续向下游pipe,所以文件流可以继续被处理并被写入到其他地方。如果写入文件夹不存在,就会创建它。 第一个参数:文件被写入的路径 第二个参数:option.mode 默认0777 八进制权限字符串,定义输出目录中创建的目录的权限; option.cwd 输出目录的 cwd 参数,只在所给的输出目录是相对路径时候有效。

gulp.src('src/*.js') // 读取src文件夹下的所有.jpg文件
  .pipe(imagemin()) // 将所有文件用imagemin处理
  .pipe(gulp.dest('dist')) // 将处理到这一步的文件写入dist文件夹
  .pipe(minify()) // 将文件流用minify处理
  .pipe(gulp.dest('code')) // 将处理后的文件写入code文件夹

gulp.task

定义一个任务 第一个参数:任务的名字,如果你定义的任务需要在命令行中启动,那就不要使用空格。 第二个参数:Array,当前任务依赖的任务列表,依赖任务在当前任务运行之前完成。(gulp4已经去除) 第三个参数:fn,函数中定义任务需要执行的一些操作。

第三个参数fn可以接受一个参数,该参数接收一个callback,在函数中调用callback可以标识该任务是否执行完成。 返回一个stream或者promise,也有类似的作用。 gulp中实现任务依赖(任务并行或串行)的方法

gulp.task('one', function (cb) {
  setTimeout(() => {
    console.log(1)
    cb()
  }, 1000)
})

gulp.task('two', function (cb) {
  console.log(2)
  cb()
})

// 老版本序列化任务的方式
gulp.task('default', ['one'], function(cb){
  console.log('over')
  cb()
})

// gulp4实现串行任务的方式
gulp.task('default', gulp.series('one', 'two', function(cb){
  console.log('over')
  cb()
}))
// gulp4实现并行任务的方式
gulp.task('default', gulp.parallel('one', 'two', function(cb){
  console.log('over')
  cb()
}))

gulp.watch

监控文件的变化,执行相应的任务 第一个参数:要监视的glob(也可以理解成文件或文件夹)。 第二个参数:options 第三个参数:要执行的具体任务内容

gulp.watch('img', gulp.series('string'))

编写插件

从gulp的用时方法不难看出,gulp插件接收stream,处理后返回stream,但是在插件中可能使用到其他工具,其中处理文件的数据类型可能是Buffer,所以我们经常在写插件时用到throungh,他是一个可以Bufferstream相互装换的工具,下面是一个压缩图片的插件例子。 images库是一个能处理图片的nodejs库,但是他的提供的api处理单张图片,将他封装成gulp插件,将他赋予批量处理图片的能力,并且能和其他处理工具一起使用,方便的实现一个工作流,比如将一个文件夹中的图片压缩后,在将其打包成一个压缩包。

var through = require('through2'); // Buffer和stream装换库
const images = require('images'); // 图片处理库

// 插件级别的函数(处理文件
function gulpImages(options) {
  const {
    size
  } = options

  var stream = through.obj(function(file, enc, cb) {
    if (file.isBuffer()) {

      file.contents = images(file.contents)
        .size(size)
        .encode('png')
    }

    // 确保文件进入下一个 gulp 插件
    this.push(file);

    // 告诉 stream 引擎,我们已经处理完了这个文件
    cb();
  });

  // 返回文件 stream
  return stream;
};

// 导出插件主函数
module.exports = gulpImages;

作者简介:叶茂,芦苇科技web前端开发工程师,代表作品:口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 一起并肩作战: yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多