一、什么是gulp
gulp.js是一种基于流的，代码优于配置的新一代构建工具。
gulp 和grunt类似。但相比于Grunt的频繁的IO操作，Gulp的流操作，能更快地完成构建。
Gulp本身虽然不能完成很多任务，但它 有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。例如，有些插件可以用来执行JSHint、编译CoffeeScript，执行Mocha测试，甚至更新版本号。
二、安装gulp
首先，需要在全局安装Gulp包：
npm install -g gulp
然后，在项目里面安装Gulp：
npm install --save-dev gulp
三、使用gulp
Gulp的任务都是以插件的形式存在，所以首先安装插件，这里用jshint为例：
npm install gulp-jshint --save-dev
安装之后需要在文件夹下建立一个名为“gulpfile.js”的文件，文件内书写程序：
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var paths = {
scripts: 'js/**/*.js',
};
gulp.task('lint', function() {
return gulp.src(paths.scripts)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
运行：$ gulp lint
四、常用插件
上面演示了jshint插件的使用，其他gulp的插件的使用与之类似。
常用的gulp插件还有：
"gulp-angular-filesort"
"gulp-angular-templatecache"
"gulp-babel"
"gulp-cached"
"gulp-compass"
"gulp-concat"
"gulp-consolidate"
"gulp-csso"
"gulp-eslint“
"gulp-expect-file"
"gulp-filename-sort"
"gulp-filter"
"gulp-flatten"
"gulp-if"
"gulp-imagemin"
"gulp-inject"
"gulp-less"
"gulp-livereload"
"gulp-load-plugins"
"gulp-markdown"
"gulp-minify-html"
"gulp-ng-annotate"
"gulp-nodemon"
"gulp-order"
"gulp-rename"
"gulp-replace"
"gulp-rev"
"gulp-rev-replace"
"gulp-size"
"gulp-sourcemaps"
"gulp-task-listing"
"gulp-uglify"
"gulp-useref"
"gulp-util"
"gulp-wait"
每个插件的功能自行百度啦......
五、gulp插件组合使用
var gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins'),
plugins = gulpLoadPlugins();
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('default'))
.pipe(plugins.uglify())
.pipe(plugins.concat('app.js'))
.pipe(gulp.dest('build'));
});
比grunt的使用简便好多吧!
六、gulp优点
使用方便
通过代码优于配置的策略，Gulp可以让简单的任务简单，复杂的任务更可管理。
构建快速
通过流式操作，减少频繁的 IO 操作，更快地构建项目。
插件高质
Gulp 有严格的插件指导策略，确保插件能简单高质的工作。
易于学习
少量的API，掌握Gulp可以毫不费力。构建就像流管道一样，轻松加愉快。
网友评论