原文:http://ju.outofmemory.cn/entry/103253
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)能够通过一系列的小函数来传递数据,这些函数会对数据进行修改,然后把修改后的数据传递给下一个函数。
看一个简单例子:
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, 可以按照管道模式给其它插件处理。
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定义任务。
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()
调用, 递归的建立模块依赖图。
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代码中错误和潜在问题的工具。
用法:
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插件。
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是压缩图片的工具。
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语法:
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。
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 是一个自动化测试辅助工具,可以帮你在网页文件变更时自动载入新的网页。
用法:
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文件。
用法:
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块如下定义:
... HTML Markup, list of script / link tags.
如
rel="stylesheet"href="http://colobu.com/2014/11/17/gulp-plugins-introduction/css/clear.css"/>rel="stylesheet"href="http://colobu.com/2014/11/17/gulp-plugins-introduction/css/main.css"/>
gulp-usemin用法如下:
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。
用法:
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就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。
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。
My index
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。
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中的文件。
var gulp =require('gulp');var jscs =require('gulp-jscs');var gulpFilter =require('gulp-filter');
gulp.task('default',function(){// create filter instance inside task functionvar 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
只允许改变的文件通过管道。
var gulp =require('gulp');var changed =require('gulp-changed');var ngmin =require('gulp-ngmin');// just as an examplevar 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安装。
var gulp =require('gulp');var bower =require('gulp-bower');
gulp.task('bower',function(){return bower().pipe(gulp.dest('lib/'))});
gulp-if
有条件的执行任务
gulp-replace
字符串替换插件。
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包, 如果它们的配置文件存在的话。
var install =require("gulp-install");
gulp.src(__dirname +'/templates/**').pipe(gulp.dest('./')).pipe(install());
gulp-rename
改变管道中的文件名。
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功能。
var gulp =require('gulp');var clean =require('gulp-clean');
gulp.task('clean',function(){return gulp.src('build',{read:false}).pipe(clean());});
gulp-concat
连接合并文件。
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
安全的声明命名空间,设置属性。
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/'));});
更多的文章
- gulp-cheatsheet
- 9个优秀的gulp插件
- gulp插件开发指导
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的插件功能类似。
发表评论
发表评论