前端开发
by smallnest

gulp plugins 插件介绍

目录 [−]

  1. gulp API
    1. gulp.src(globs[, options])
    2. gulp.dest(path[, options])
    3. gulp.task(name[, deps], fn)
    4. gulp.watch(glob [, opts], tasks), gulp.watch(glob [, opts, cb])
  2. Recipes
  3. gulp-browserify
  4. gulp-jshint
  5. gulp-jslint
  6. imagemin
  7. glup-sass
  8. browser-sync
  9. gulp-handlebars
  10. gulp-usemin
  11. gulp-uglify
  12. gulp-sourcemaps
  13. 其它一些关注度高的gulp插件
    1. gulp-inject
    2. gulp-header
    3. gulp-filter
    4. gulp-changed
    5. gulp-bower
    6. gulp-if
    7. gulp-replace
    8. gulp-shell
    9. gulp-exec
    10. gulp-install
    11. gulp-rename
    12. gulp-ignore
    13. gulp-util
    14. gulp-clean
    15. gulp-concat
    16. gulp-wrap
    17. gulp-declare
  14. 更多的文章

Gulp是一个构建工具， 功能类似grunt, 以及Java生态圈的ant, maven， gradle等。 其它的javascript生态圈的构建工具可以参考: List of JavaScript Build Tools
它采用了一种流式处理的方式， 编写起来简单直观。 相对于其它javascript构建工具， 母亲啊它的star数是仅次于grunt，流行度还是比较高的。
通过"代码优于配置" (code over configuration), 通过javascript编写构建任务， 充分利用javascript生态圈的组件， 可以实现简单灵活的任务管理。 通过node stream的方式，直接在内存中管道式处理流，不必缓存到硬盘上， 节省构建时间。

Gulp介绍请参考我转载的另一篇文章： Building With Gulp
另外有一篇很好的入门文章： Getting started with gulp, 繁体版, 简体中文硬翻版

从我的实践上来看， gulp要比grunt更好的管理构建过程。 编写简单，条理清晰，功能强大，学习无曲线。

Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript（或者CoffeeScript）里。 Gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin或者gulpfriendly就能看到。例如，有些插件可以用来执行JSHint、编译CoffeeScript，执行Mocha测试，甚至更新版本号。现在有大约980个左右的插件可以使用。你可以到http://gulpjs.com/plugins/或者http://npmsearch.com/?q=keywords:gulpplugin查找所需的软件。
面对如此众多的插件， 想要全部了解并灵活运用它们几乎是不可能的事情。 实际开发中多参考别的项目的实现， 根据自己的需求寻找合适的插件， 总结并开发自己的插件， 逐步积累对gulp的认识。

本文列出常用的几个插件， 并在将来的开发中更新此文作为记录文档。 多个插件和grunt的插件功能类似。

首先介绍以下gulp本身的API， 相当的简洁，只有几个函数。

gulp API

流(Stream)能够通过一系列的小函数来传递数据，这些函数会对数据进行修改，然后把修改后的数据传递给下一个函数。
看一个简单例子：

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
   uglify = require('gulp-uglify');

gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});

gulp.src()函数用字符串匹配一个文件或者文件的编号（被称为“glob”）,然后创建一个对象流来代表这些文件，接着传递给uglify()函数，它接受文件对象之后返回有新压缩源文件的文件对象，最后那些输出的文件被输入gulp.dest()函数，并保存下来。

想了解更多的关于node stream方面的知识，可以访问stream-handbook。 stream-handbook中文翻译

gulp.src(globs[, options])

根据globs提供的文件列表， 得到一个Vinyl文件的stream, 可以按照管道模式给其它插件处理。

1
2
3
4
gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/minified_templates'));

gulp.dest(path[, options])

将管道中的数据写入到文件夹。

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

使用orchestrator定义任务。

1
2
3
gulp.task('somename', function() {
  // Do stuff
});

deps 是任务数组，在执行本任务时数组中的任务要执行并完成。

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

监控文件。当监控的文件有所改变时执行特定的任务。

Recipes

下面的文章总结的几个常见问题的解决方案，非常有参考价值。
https://github.com/gulpjs/gulp/tree/master/docs/recipes#recipes

gulp-browserify

browserify可以为浏览器编译node风格的遵循commonjs的模块。 它搜索文件中的require()调用， 递归的建立模块依赖图。

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp = require('gulp');
var browserify = require('gulp-browserify');

// Basic usage
gulp.task('scripts', function() {
    // Single entry point to browserify
    gulp.src('src/js/app.js')
        .pipe(browserify({
          insertGlobals : true,
          debug : !gulp.env.production
        }))
        .pipe(gulp.dest('./build/js'))
});

gulp-jshint

gulp的jshint插件。
jshint是一个侦测javascript代码中错误和潜在问题的工具。

用法:

1
2
3
4
5
6
7
8
var jshint = require('gulp-jshint');
var gulp   = require('gulp');

gulp.task('lint', function() {
  return gulp.src('./lib/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('YOUR_REPORTER_HERE'));
});

gulp-jslint

jslint是一个javascript代码质量检测工具。
gulp-jslint是它的gulp插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var gulp = require('gulp');
var jslint = require('gulp-jslint');

// build the main source into the min file
gulp.task('default', function () {
    return gulp.src(['source.js'])

        // pass your directives
        // as an object
        .pipe(jslint({
            // these directives can
            // be found in the official
            // JSLint documentation.
            node: true,
            evil: true,
            nomen: true,

            // you can also set global
            // declarations for all source
            // files like so:
            global: [],
            predef: [],
            // both ways will achieve the
            // same result; predef will be
            // given priority because it is
            // promoted by JSLint

            // pass in your prefered
            // reporter like so:
            reporter: 'default',
            // ^ there's no need to tell gulp-jslint
            // to use the default reporter. If there is
            // no reporter specified, gulp-jslint will use
            // its own.

            // specify whether or not
            // to show 'PASS' messages
            // for built-in reporter
            errorsOnly: false
        }))

        // error handling:
        // to handle on error, simply
        // bind yourself to the error event
        // of the stream, and use the only
        // argument as the error object
        // (error instanceof Error)
        .on('error', function (error) {
            console.error(String(error));
        });
});

imagemin

imagemin是压缩图片的工具。

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist'));
});

glup-sass

sass是编写css的一套语法。 使用它的预处理器可以将sass语法的css处理成css格式。
glup-sass语法：

1
2
3
4
5
6
7
8
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp-ruby-sass是另外一款sass的gulp插件， 比glup-sass慢，但是更稳定，功能更多。 它使用compass预处理sass文件，所以你需要安装ruby和compass。

1
2
3
4
5
6
7
8
9
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

gulp.task('default', function () {
    return gulp.src('src/scss/app.scss')
        .pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
        .on('error', function (err) { console.log(err.message); })
        .pipe(gulp.dest('dist/css'));
});

browser-sync

BrowserSync 是一个自动化测试辅助工具，可以帮你在网页文件变更时自动载入新的网页。
用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var gulp        = require('gulp');
var browserSync = require('browser-sync');

// Static server
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

// or...

gulp.task('browser-sync', function() {
    browserSync({
        proxy: "yourlocal.dev"
    });
});

还可以使用proxy-middleware作为http proxy,转发特定的请求。

gulp-handlebars

handlebars是一个模版引擎库， ember.js用它作为前端的模版引擎。
gulp-handlebars编译handlebars文件。

用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var handlebars = require('gulp-handlebars');
var wrap = require('gulp-wrap');
var declare = require('gulp-declare');
var concat = require('gulp-concat');

gulp.task('templates', function(){
  gulp.src('source/templates/*.hbs')
    .pipe(handlebars())
    .pipe(wrap('Handlebars.template(<%= contents %>)'))
    .pipe(declare({
      namespace: 'MyApp.templates',
      noRedeclare: true, // Avoid duplicate declarations
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('build/js/'));
});

gulp-usemin

用来将HTML 文件中（或者templates/views）中没有优化的script 和stylesheets 替换为优化过的版本。
usemin 暴露两个内置的任务，分别为：

  • useminPrepare 为将指定文件中的 usemin block 转换为单独的一行（优化版本）准备配置。这通过为每个优化步骤生成名为 generated 的子任务来完成。
  • usemin 使用优化版本替换 usemin 块，如果在磁盘上可以找到 revisioned 版本，则替换为 revisioned 版本。

usemin块如下定义：

1
2
3
<!-- build:<pipelineId>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- build:css style.css -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->

<!-- build:js js/lib.js -->
<script src="../lib/angular-min.js"></script>
<script src="../lib/angular-animate-min.js"></script>
<!-- endbuild -->

<!-- build:js1 js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->

<!-- build:remove -->
<script src="js/localhostDependencies.js"></script>
<!-- endbuild -->

gulp-usemin用法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var usemin = require('gulp-usemin');
var uglify = require('gulp-uglify');
var minifyHtml = require('gulp-minify-html');
var minifyCss = require('gulp-minify-css');
var rev = require('gulp-rev');

gulp.task('usemin', function() {
  gulp.src('./*.html')
    .pipe(usemin({
      css: [minifyCss(), 'concat'],
      html: [minifyHtml({empty: true})],
      js: [uglify(), rev()]
    }))
    .pipe(gulp.dest('build/'));
});

gulp-uglify

uglify是一款javascript代码优化工具，可以解析，压缩和美化javascript。
用法：

1
2
3
4
5
6
7
var uglify = require('gulp-uglify');

gulp.task('compress', function() {
  gulp.src('lib/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
});

gulp-sourcemaps

在现代javascript开发中， JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。
常见的转换情况：

  • 压缩，减小体积。
  • 多个文件合并，减少HTTP请求数。
  • 其他语言编译成JavaScript。最常见的例子就是CoffeeScript。
    这三种情况，都使得实际运行的代码不同于开发代码，除错（debug）变得困难重重。
    Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp = require('gulp');
var plugin1 = require('gulp-plugin1');
var plugin2 = require('gulp-plugin2');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(plugin1())
      .pipe(plugin2())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

其它一些关注度高的gulp插件

gulp-inject

可以注入css,javascript和web组件，不需手工更新ndex.html。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>

  <!-- inject:js -->
  <!-- endinject -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
var gulp = require('gulp');
var inject = require("gulp-inject");

gulp.task('index', function () {
  var target = gulp.src('./src/index.html');
  // It's not necessary to read the files (will speed up things), we're only after their paths:
  var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});

  return target.pipe(inject(sources))
    .pipe(gulp.dest('./src'));
});

gulp-header

为管道中的文件增加header。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var header = require('gulp-header');

gulp.src('./foo/*.js')
  .pipe(header('Hello'))
  .pipe(gulp.dest('./dist/')

gulp.src('./foo/*.js')
  .pipe(header('Hello <%= name %>\n', { name : 'World'} ))
  .pipe(gulp.dest('./dist/')

gulp.src('./foo/*.js')
  .pipe(header('Hello ${name}\n', { name : 'World'} ))
  .pipe(gulp.dest('./dist/')


//


var pkg = require('./package.json');
var banner = ['/**',
  ' * <%= pkg.name %> - <%= pkg.description %>',
  ' * @version v<%= pkg.version %>',
  ' * @link <%= pkg.homepage %>',
  ' * @license <%= pkg.license %>',
  ' */',
  ''].join('\n');

gulp.src('./foo/*.js')
  .pipe(header(banner, { pkg : pkg } ))
  .pipe(gulp.dest('./dist/')

相应的还有一个gulp-footer插件。

gulp-filter

筛选vinyl stream中的文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gulp = require('gulp');
var jscs = require('gulp-jscs');
var gulpFilter = require('gulp-filter');

gulp.task('default', function () {
    // create filter instance inside task function
    var filter = gulpFilter(['*', '!src/vendor']);

    return gulp.src('src/*.js')
        // filter a subset of the files
        .pipe(filter)
        // run them through a plugin
        .pipe(jscs())
        // bring back the previously filtered out files (optional)
        .pipe(filter.restore())
        .pipe(gulp.dest('dist'));
});

gulp-changed

只允许改变的文件通过管道。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var gulp = require('gulp');
var changed = require('gulp-changed');
var ngmin = require('gulp-ngmin'); // just as an example

var SRC = 'src/*.js';
var DEST = 'dist';

gulp.task('default', function () {
    return gulp.src(SRC)
        .pipe(changed(DEST))
        // ngmin will only get the files that
        // changed since the last time it was run
        .pipe(ngmin())
        .pipe(gulp.dest(DEST));
});

gulp-bower

执行bower安装。

1
2
3
4
5
6
7
var gulp = require('gulp');
var bower = require('gulp-bower');

gulp.task('bower', function() {
  return bower()
    .pipe(gulp.dest('lib/'))
});

gulp-if

有条件的执行任务

gulp-replace

字符串替换插件。

1
2
3
4
5
6
7
var replace = require('gulp-replace');

gulp.task('templates', function(){
  gulp.src(['file.txt'])
    .pipe(replace(/foo(.{3})/g, '$1foo'))
    .pipe(gulp.dest('build/file.txt'));
});

gulp-shell

可以执行shell命令

gulp-exec

exec插件

gulp-install

安装npm和bower包， 如果它们的配置文件存在的话。

1
2
3
4
5
var install = require("gulp-install");

gulp.src(__dirname + '/templates/**')
  .pipe(gulp.dest('./'))
  .pipe(install());

gulp-rename

改变管道中的文件名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var rename = require("gulp-rename");

// rename via string
gulp.src("./src/main/text/hello.txt")
    .pipe(rename("main/text/ciao/goodbye.md"))
    .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md

// rename via function
gulp.src("./src/**/hello.txt")
    .pipe(rename(function (path) {
        path.dirname += "/ciao";
        path.basename += "-goodbye";
        path.extname = ".md"
    }))
    .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md

// rename via hash
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
    .pipe(rename({
        dirname: "main/text/ciao",
        basename: "aloha",
        prefix: "bonjour-",
        suffix: "-hola",
        extname: ".md"
    }))
    .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md

gulp-ignore

忽略管道中的部分文件。

gulp-util

提供一些辅助方法。

gulp-clean

提供clean功能。

1
2
3
4
5
6
7
var gulp = require('gulp');  
var clean = require('gulp-clean');

gulp.task('clean', function () {  
  return gulp.src('build', {read: false})
    .pipe(clean());
});

gulp-concat

连接合并文件。

1
2
3
4
5
6
7
var concat = require('gulp-concat');

gulp.task('scripts', function() {
  gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'))
});

gulp-wrap

将一个lodash模版包装成流内容。

gulp-declare

安全的声明命名空间，设置属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
var declare = require('gulp-declare');
var concat = require('gulp-concat');

gulp.task('models', function() {
  // Define each model as a property of a namespace according to its filename
  gulp.src(['client/models/*.js'])
    .pipe(declare({
      namespace: 'MyApp.models',
      noRedeclare: true // Avoid duplicate declarations
    }))
    .pipe(concat('models.js')) // Combine into a single file
    .pipe(gulp.dest('build/js/'));
});

更多的文章

  1. gulp-cheatsheet
  2. 9个优秀的gulp插件
  3. gulp插件开发指导