gulp使用笔记

Posted 2020-06-23 清姿

gulp简介

gulp 是基于 Nodejs 的自动任务运行器，能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上， gulp 借鉴了Unix操作系统的管道（pipe）思想，就是前一级的输出，直接变成后一级的输入，使其在操作上非常简单.

安装

gulp是基于node的自动任务运行器，所以需要事先安装好node.

1.全局安装gulp：

$ npm install --global gulp

2.需要在项目的根目录下创建一个配置文件gulpfile.js:

var gulp = require(‘gulp‘);

gulp.task(‘default‘, function() {
  // 默认的任务代码
});

3.运行gulp:

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

需要单独执行特定的任务（task），需要输入 gulp <task> <othertask>。

API

gulp在git上介绍了四个API： task 、 dest 、 src 、 watch ，除此之外，gulp还提供了一个 run 方法。

1.gulp.src(globs[, options])

src() 方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件。

参数：

globs： 需要处理的源文件匹配符路径

options： 有3个属性buffer、read、base

globs 的文件匹配说明：

“src/a.js”：指定具体文件；

“*”：匹配所有文件 例：src/*.js(包含src下的所有js文件)；

“**”：匹配0个或多个子文件夹 例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；

“{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

“!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；

options.buffer ： 类型： Boolean 默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；

options.read ： 类型： Boolean 默认：true 设置false，将不执行读取文件操作，返回null；

options.base ： 类型： String ，会加在glob之前

 想像一下在一个路径为 client/js/somedir 的目录中，有一个文件叫 somefile.js ：

gulp.src(‘client/js/**/*.js‘) // 匹配 ‘client/js/somedir/somefile.js‘ 
  .pipe(minify())
  .pipe(gulp.dest(‘build‘));  // 写入 ‘build/somedir/somefile.js‘

gulp.src(‘client/js/**/*.js‘, { base: ‘client‘ })
  .pipe(minify())
  .pipe(gulp.dest(‘build‘));  // 写入 ‘build/js/somedir/somefile.js‘并且将 `base` 解析为 `client/js/`

2.gulp.dest(path[, options])

dest()方法是指定处理完后文件输出的路径

path:指定文件输出路径，或者定义函数返回文件输出路径也可

options:有两个属性，cwd和mode

options.cwd:类型： String 默认值： process.cwd().输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。

optoins.mode:类型： String 默认值： 0777.八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

gulpfile.js像这样：

var gulp = require(‘gulp‘);
gulp.task(‘testtask‘, function() {
    gulp.src(‘./js/test.js‘)
    .pipe(gulp.dest(‘./build‘));
});

利用 gulp.dest(‘./build‘) 将新建的test.js文件移动到了build目录，对比前后两次的 ls -al 命令， dest() 会自动创建目录。

3.gulp.task(name[, deps], fn)

这个方法用来创建一个gulp任务。

参数说明：

name:任务名称，如果需要在命令行中运行某些任务，那么，请不要在名字中使用空格。

deps:类型： Array.一个包含任务列表的数组，这些任务会在当前任务运行之前完成。

gulp.task(‘mytask‘, [‘array‘, ‘of‘, ‘task‘, ‘names‘], function() {
  // 做一些事
});

注意： 任务是否在这些前置依赖的任务完成之前运行了？请一定要确保所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

fn:该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

如果fn可以接收callback,或者返回一个promise或stream，任务可以异步执行：

接收callback:

// 在 shell 中执行一个命令
var exec = require(‘child_process‘).exec;
gulp.task(‘jekyll‘, function(cb) {
  // 编译 Jekyll
  exec(‘jekyll build‘, function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});

返回stream:

gulp.task(‘somename‘, function() {
  var stream = gulp.src(‘client/**/*.js‘)
    .pipe(minify())
    .pipe(gulp.dest(‘build‘));
  return stream;
});

返回promise:

var Q = require(‘q‘);

gulp.task(‘somename‘, function() {
  var deferred = Q.defer();

  // 执行异步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

用于监听文件变化，文件一修改就会执行指定的任务.

参数说明：

glob:类型： String or Array,一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

opts:Object,传给gaze的参数。

tasks:类型： Array,需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字.

cb:类型： Function,每次变动需要执行的 callback。

var watcher = gulp.watch(‘js/**/*.js‘, [‘uglify‘,‘reload‘]);
watcher.on(‘change‘, function(event) {
  console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);
});

或

gulp.watch(‘js/**/*.js‘, function(event) {
  console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);
});

callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：

event.type:类型： String,发生的变动的类型：added, changed 或者 deleted。

event.path:类型： String,触发了该事件的文件的路径。

gulp插件

gulp 插件很多， 这里 可以查看完整的列表。