gulp入门

在Javascript的开发过程当中，常常会遇到一些重复性的任务，好比合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。一般，咱们须要使用不一样的工具，来完成不一样的任务，既重复劳动又很是耗时。grunt，gulp都是为了解决这个问题而发明的工具，能够帮助咱们自动管理和运行各类任务，不少人认为，在操做上，它要比Grunt简单。

安装

gulp须要全局安装，而后再在项目的开发目录中安装为本地模块。先进入项目目录，运行下面的命令。

npm install -g gulp

npm install --save-dev gulp复制代码

gulpfile.js

项目根目录下建立一个名为 gulpfile.js 的文件，此文件为gulp的配置文件：

var gulp = require('gulp');

gulp.task('mini', function() {
  // 将你的默认的任务代码放在这
});复制代码

而后使用下面命令便可：

$ gulp mini复制代码

若是任务名为默认的default，则直接使用gulp命令便可。

思想

gulp.task('js', function () {
  return gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(uglify())
    .pipe(concat('app.js'))
    .pipe(gulp.dest('build'));
});复制代码

gulp是基于管道的思想，因此能够看出，gulp首先经过src读取文件产生数据流，而后通过一系列pipe操做，最后经过dest方法将数据流写入文件build.js中。

API

src

用于产生数据流，参数为符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。

glob模式是匹配路径与文件的模式，相似正则表达式。下面为部分语法：

• *
  匹配该路径段中 0 个或多个任意字符，

• ?
  匹配该路径段中 1 个任意字符，

• [...]
  匹配该路径段中在指定范围内字符，

• !(pattern|pattern|pattern)
  匹配除所给出的模型之外的状况，

• ?(pattern|pattern|pattern)
  匹配所给出的模型中的 0 个或任意 1 个，

• +(pattern|pattern|pattern)
  匹配所给出的模型中的 1 个或者多个，

• *(pattern|pattern|pattern)
  匹配所给出的模型中的 0 个或多个或任意个的组合.

• @(pattern|pat*|pat?erN)
  匹配所给出的模型中的任意 1 个，

• **
  与 * 同样能够匹配任何内容，但 **不只匹配路径中的某一段,并且能够匹配 a/b/c 这样带有 / 的内容，因此，它还能够匹配子文件夹下的文件.

更加详细的，能够见glob-primer

dest

将管道的输出写入文件，并且这些输出还能够继续输出，因此能够屡次调用dest方法，将输出写入到多个目录。目录不存在，也会被新建。

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));复制代码

还能够接受对象做为第二个参数，其中对象有两个字段，cwd表示写入路径的基准目录，默认是当前目录，mode表示权限，默认为0777（这里是与linux文件权限相关，不懂能够见这个）

task

用于定义具体任务，它的第一个参数是任务名，第二个参数是任务函数。

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

gulp.task('build', ['greet']);复制代码

这时，build会在后面任务完成以后开始。

watch

watch方法用于指定须要监视符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。一旦这些文件发生变更，就运行指定任务。

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

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

经常使用插件

• gulp-load-plugins：自动加载 package.json 中的 gulp 插件，避免一个个require插件
• gulp-rename： 重命名
• gulp-uglify：文件压缩
• gulp-concat：文件合并
• gulp-less：编译 less
• gulp-sass：编译 sass
• gulp-clean-css：压缩 CSS 文件
• gulp-htmlmin：压缩 HTML 文件
• gulp-babel: 使用 babel 编译 JS 文件
• gulp-jshint：jshint 检查
• gulp-imagemin：压缩jpg、png、gif等图片
• gulp-livereload：当代码变化时，它能够帮咱们自动刷新页面，除在模块中须要安装外，还须要在浏览器中安装。

更多插件，能够去官网搜索

参考资料

gulp官方文档
gulp中文文档
阮老师关于gulp讲解
gulp 基础与原理

---

欢迎订阅掘金专栏和知乎专栏