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-handbookstream-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
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
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插件开发指导
评论