Gulp 入门

时间：2022-01-04 09:03:28

1. 安装 Node 环境

参考 http://www.cnblogs.com/zichi/p/4627728.html，注意一起安装 npm 工具，并把路径保存到环境变量中（安装过程中会有提醒）

安装完后，用如下命令测试：

node -v
npm -v

2. 全局安装 gulp

npm install gulp -g

这里有个误区，全局安装某个包，并不是说在任意文件中都能将它 require 进来而不报错，而是将其集成到了命令行中，我们能在命令行中使用 gulp taskname 这样的命令。再举个栗子，全局安装了 vue-cli（npm install vue-cli -g），我们便可以在命令行中用 vue init webpack demo 这样的命令生成脚手架了。

安装完后可以用 gulp -v 命令查看版本号。

3. package.json

项目的根目录需要一个 package.json 文件，当然没有这个文件也是 ok 的，不过我们需要用 Node 安装 gulp 插件，最好还是有个 package.json 文件。

在命令行中敲如下命令便可生成 package.json 文件：

npm init

4. 局部安装 gulp

全局安装完 gulp，还需要局部安装一次，因为接下去的 gulpfile.js 文件需要引入这个包，使用它自身的 task 等命令以及调用 gulp 插件。

npm install gulp --save-dev

--save 会将配置保存到 package.json 文件中，而 -dev 会将配置保存到 devDependencies 项中，如果没有加 -dev 则默认保存到 dependencies 一项中。对于 devDependencies 和 dependencies，我的理解是 devDependencies 是开发过程中的依赖，gulp 这样的打包工具，很显然只是存在于开发过程中，而 dependencies 是上线后依然需要的依赖。比如对于一个 vue 项目，babel 插件是开发过程中的依赖，是 devDependencies ，而 axios 则是 dependencies，最后会被打包到线上。

安装完后可以用 gulp -v 命令查看版本号。

5. gulpfile.js

最后，在根目录创建 gulpfile.js 文件，然后敲入如下内容：

var gulp = require('gulp');
gulp.task('default', function() {
  // 任务放在这
  console.log('Hello world!');
});

命令行 cd 到项目根目录，然后输入 gulp，便可以在控制台看到输出。如果 task 名称是 default，则输入 gulp 和 gulp default 等效，如果是其他的名字，需要用 gulp taskname 。

6. API 参考

以下内容参考 Gulp：任务自动管理工具

src()

gulp 模块的 src 方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转换成数据流。参数的写法一般有以下几种形式。

  • js/app.js：指定确切的文件名。
  • js/*.js：某个目录所有后缀名为 js 的文件。
  • js/**/*.js：某个目录及其所有子目录中的所有后缀名为 js 的文件。
  • !js/app.js：除了 js/app.js 以外的所有文件。
  • *.+(scss|sass)：+ 号后面会跟着圆括号，里面的元素用 | 分割，匹配多个选项。这里将匹配 scss 和 sass 文件。

src 方法的参数还可以是一个数组，用来指定多个成员。

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

（2017.1.5 补充）这里需要注意的是，gulp.src 前不要忘记加上 return。

加不加 return 似乎都能完成 task，比如下面这段编译 sass 的代码：

// sass -> css
gulp.task('css', function() {  // 任务名
  gulp.src('a.scss')  // 目标 sass 文件
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(debug({title: '开始编译'}))
    .pipe(sass())  // sass -> css
    .pipe(gulp.dest(''))  // 目标目录
    .pipe(browserSync.stream());  // broswer reload
});

我们在命令行运行 gulp css，sass 编译成功，但是我们看命令行的输出：

[15:00:36] Starting 'css'...
[15:00:36] Finished 'css' after 20 ms
[15:00:36] 开始编译 a.scss
[15:00:36] 开始编译 1 item

是不是感觉不大对？按道理来说编译完了 sass 后，这个叫 css 的 task 才算 finished 吧？

我们试着加上 return：

// sass -> css
gulp.task('css', function() {  // 任务名
  return gulp.src('a.scss')  // 目标 sass 文件
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(debug({title: '开始编译'}))
    .pipe(sass())  // sass -> css
    .pipe(gulp.dest(''))  // 目标目录
    .pipe(browserSync.stream());  // broswer reload
});

这个时候命令行的编译输出符合我们预期了：

[15:04:28] Starting 'css'...
[15:04:28] 开始编译 a.scss
[15:04:28] 开始编译 1 item
[15:04:28] Finished 'css' after 54 ms

原来，不加 return 的话，task 和里面的 gulp 流是异步执行的，所以就会出现先 finished 再编译的情况。

那么不加 return 会有什么后果呢？比如 taskA 依赖 taskB 和 taskC

gulp.task('taskA', ['taskB', 'taskC'], function() {
  // ...
})

很显然，我们希望 taskB 和 taskC 两个任务完成后再去处理 taskA，如果 taskB 和 taskC 没有加 return，那么它 finished 的时候其实并不是任务真正完成的时候，这个时候去处理 taskA 可能会出现一些错误。

dest()

dest 方法将管道的输出写入文件，同时将这些输出继续输出，所以可以依次调用多次 dest 方法，将输出写入多个目录。如果有目录不存在，将会被新建。

dest 方法还可以接受第二个参数，表示配置对象。

let gulp = require('gulp');
let sass = require('gulp-sass');
let minify = require('gulp-minify-css');
let notify = require('gulp-notify');

// 编译Sass
gulp.task('sass', function() {  // 任务名
  gulp.src('src/sass/a.scss')  // 目标 sass 文件
    .pipe(sass({ style: 'compressed' }))  // sass -> css
    .pipe(minify())
    .pipe(notify({message: '压缩完了'}))
    .pipe(gulp.dest('sass', {
      cwd: 'dist',  // 实际目录 dist/sass/
      mode: '0644'
    }));  // 目标目录
});

配置对象有两个字段。cwd 字段指定写入路径的基准目录，默认是当前目录；mode 字段指定写入文件的权限，默认是 0777。

task()

task 方法用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数（其实最多可以有三个参数，第二个参数可选，为指定依赖，可以看下面的例子）。

gulp.task('greet', function () {
   console.log('Hello world!');
});

task 方法还可以指定按顺序运行的一组任务。

gulp.task('build', ['css', 'js', 'imgs']);

上面代码先指定 build 任务，它由 css、js、imgs 三个任务所组成，task 方法会并发执行这三个任务。注意，由于每个任务都是异步调用，所以没有办法保证 js 任务的开始运行的时间，正是 css 任务运行结束。

如果希望各个任务严格按次序运行，可以把前一个任务写成后一个任务的依赖模块。

gulp.task('css', ['greet'], function () {
   // Deal with CSS here
});

上面代码表明，css 任务依赖 greet 任务，所以 css 一定会在 greet 运行完成后再运行。

如果一个任务的名字为 default，就表明它是 “默认任务”，在命令行直接输入 gulp 命令，就会运行该任务。

gulp.task('default', function () {
  // Your default task
});

// 或者

gulp.task('default', ['styles', 'jshint', 'watch']);

执行的时候，直接使用 gulp，就会运行 styles、jshint、watch 三个任务。

watch()

watch 方法用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

上面代码指定，一旦 templates 目录中的模板文件发生变化，就运行 build 任务。

watch 方法也可以用回调函数，代替指定的任务。

gulp.watch('templates/*.tmpl.html', function (event) {
   console.log('Event type: ' + event.type);
   console.log('Event path: ' + event.path);
});

相关文章