目录 [−]


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


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



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/'));


});


更多的文章

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