gulp是基于nodejs的项目自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。
- 文件配置化的项目管理
- 丰富的功能插件
- API简单易于学习，快速构建
安装地址： https://nodejs.org/en/
检测是否安装成功,打开cmd命令提示符窗口
$node -v
能够正常返回版本号则安装成功
npm的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已
$ npm install gulp -g
该模块包将默认被安装在%userprofile%\AppData\Roaming\npm 下，并且自动加到系统PATH下，这样cmd命令将能直接调用到gulp命令。
全局安装成功之后，我们还需要本地安装gulp作为项目依赖模块使用。这里首先创建一个简单的测试项目gulpStydy。
$npm init
$ npm install gulp --save-dev成功之后该模块包将在当前目录下被安装，并且作为项目的依赖模块使用。同时，项目更目录中将自动生成一个package.json文件，这个文件将记录该项目的重要信息，尤其是项目的依赖模块
在项目根目录下创建一个名为 gulpfile.js 的文件：
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
$ gulp
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。 想要单独执行特定的任务（task），请输入 gulp 。
gulp的API非常简单：http://www.gulpjs.com.cn/docs/api/
实际上，完整的构建一个项目依靠的往往不是gulp本身，而是依靠全球范围内的gulp插件开发者上传的众多优秀模块，而gulp更像一个平台。想了解最新的gulp可以参照：http://gulpjs.com/plugins/
这里，将为大家介绍一些常见的插件极其使用方法：
简单安装一个插件，比如：
$ npm install gulp-uglify --save-dev
这里推荐将--save-dev加上，它将自动将依赖添加到项目的package.json文件中。
你也可以一次性安装多个插件，比如
$ npm install gulp-uglify gulp-minify-css gulp-imagemin --save-dev
安装完插件之后，就可以在配置文件中使用插件，比如使用js压缩插件：
//js压缩
gulp.task('jsmin', function() {
return gulp.src('js/*.js')
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
});
一个压缩任务就已经写完了，这样，所有js目录下的js文件都将被压缩，最后我们可以直接通过命令去执行它
$gulp jsmin
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');//html压缩
var autoprefixer = require('gulp-autoprefixer');//css后缀
var minifycss = require('gulp-minify-css');//css压缩
var uglify = require('gulp-uglify');//js压缩
var concat = require('gulp-concat');//文件合并
var watch = require('gulp-watch');//文件修改监听
var swig = require('gulp-swig');//模板引擎
gulp.task('default', function() {
gulp.run('watch','swig','concat');
});
gulp.task('build', function() {
gulp.run('htmlmin','cssmin','jsmin');
});
//html压缩
gulp.task('htmlmin', function() {
gulp.src('app/index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('output/'));
gulp.src('app/views/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('output/views/'))
});
//swig
gulp.task('swig', function() {
gulp.src('app/page/*.html')
.pipe(swig({defaults: { cache: false }})) //注意这里如果不加cache false,watch将失效
.pipe(gulp.dest('app/views'));
});
//css压缩
gulp.task('cssmin', function() {
gulp.src('app/css/*.css')
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'],//主流浏览器的最新两个版本
cascade: false, //是否美化属性值 默认：true
remove:true //是否去掉不必要的前缀 默认：true
}))
.pipe(minifycss())
.pipe(gulp.dest('output/css/'))
});
//js压缩
gulp.task('jsmin', function() {
gulp.src('app/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('output/js/'))
});
//文件合并
gulp.task('concat', function() {
gulp.src(['app/js/a.js','app/js/b.js'])
.pipe(concat({ path: 'all.js', stat: { mode: 0666 }}))
.pipe(gulp.dest('app/js/'));
});
//watch
gulp.task('watch',function(){
gulp.watch('app/page/*.html',['swig']);
gulp.watch('app/js/*.js',['concat']);
});