学习使用Gulp任务构件管理工具

Posted on   |   In   |     |  

Gulp是一个类似于Grunt的任务构件管理工具, 它于Grunt的不同在于它借鉴了Unix的pipe思想, 所以它不会生成一堆临时文件, 并且比Grunt更少的Api, 意味着学习它会更快一些。

一、安装Gulp

使用Gulp需要全局安装, 然后在进行save-dev进行本地安装。

1
2
3
npm install -g gulp

npm install --save-dev gulp

二、Gulp的插件

为什么要在最开始就介绍Gulp的插件呢？因为我们使用Gulp无非就是做资源文件(css, javascript, images)的合并、压缩, 这些都少不了Gulp plugins, 并且你看到这些插件, 就知道Gulp的作用与强大.

根据上面我们的操作资源文件需求, 所以下面的插件是我们需要的(当然是可选的).

1. gulp plugins for css

  • gulp-minify-css: 使用 clean-css 压缩 css 文件

2. gulp plugins for scripts

  • gulp-jshint: 代码错误和潜在问题检查
  • gulp-jslint: 代码质量检测工具
  • gulp-uglify: 使用 UglifyJS 压缩文件

3. gulp plugins for compress

  • gulp-concat: 合并文件
  • gulp-imagemin: 可以压缩 PNG, JPEG, GIF 与 SVG 格式的图片
  • gulp-minify-html: 使用 minimize 压缩 html 文件
  • gulp-inject: 可以注入css,javascript和web组件，不需手工更新ndex.html
  • gulp-load-plugins: 自动加载package.json文件中所有的gulp模块.
  • gulp-rename: 重命名
  • gulp-clean: 清空文件夹

如何安装这些插件呢？

1
npm install <PLUGIN_NAME> --save-dev

当然Gulp拥有大量的插件, 上面只是列出了最常用的几款, 利用它们可以快速、高效的完成构件任务, 如果想查看更多的插件列表, 可以访问下面的链接：

更多gulp插件: http://gulpjs.com/plugins/

三、编写 Gulpfile.js

Gulpfile.js 就是 Gulp 的配置文件, 你需要在项目根目录手动创建它.

下面是一个最简单的 Gulp 配置文件, 里面描述了如何进行 语法检查、压缩代码、合并然后写入文件, 当然前提是你需要安装 jshint/uplify/concat 这几个插件.

1
2
3
4
5
6
7
8
9
10
11
12
var gulp = require('gulp');
var jshint = require('gulp-jshint'); // 语法检查
var uglify = require('gulp-uglify'); // 压缩
var concat = require('gulp-concat'); // 合并

gulp.task('minify', function() {
    gulp.src('www/static/js/*.js')
        .pipe(jshint())              // 进行语法检查
        .pipe(uglify())              // 进行压缩
        .pipe(concat('app.js'))      // 合并为 app.js
        .pipe(gulp.dest('www/dist/build'))  // 将结果写入到文件 www/dist/build 目录下
});

上面的配置里面涉及到几个关键方法:

  • require('') 这一步就不需要过多说明, 就是引入相关的模块与插件.
  • gulp.task 使用 task 方法创建了一个名为 minify 的任务,
  • gulp.src 来源文件, 压缩www/static/js/目录下的所有js文件
  • pipe 将上一步的输出转为当前的输入，进行链式处理, 其实最开有说明是引入了 Unix 管道.

最后你可以使用 gulp minify 执行这个任务。

四、常用 Api

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

创建一个任务

参数释义:

name: 任务的名称
deps: 参数, 可以是数组, [‘css’, ‘js’, ‘images’], 注意它们是并发执行
fn: 回调函数

1
2
3
gulp.task('hello', function() {
  console.log("word!");
});

如果任务名称为 default, 那么直接使用 gulp 命令就会执行 default 这个默认的任务. 否则就需要使用 gulp taskname 执行。

4.2 gulp.src(globs[, options])

处理的文件的路径

参数释义:

globs: 文件的路径, 可以为数组

1
2
3
gulp.src('src/*.js')    匹配src目录下的所有js文件
gulp.src('src/**/*.js') 匹配src目录及其子目录下的所有js文件
gulp.src('!src/js/app.js') 不匹配此文件

4.3 gulp.dest(path[, options])

写入文件

参数释义:

path: 文件路径, 如果不存在则自动创建, 权限默认为 0777

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

监视文件，并且可以在文件发生改动时候做一些事情

参数释义:

glob: 检测的文件
opts: 执行的任务, 可以为数组
cb: 回调

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

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

event.path: 触发了该事件的文件的路径。