##gulp > http://www.gulpjs.com/ > http://www.gulpjs.com.cn/ > http://www.gulpjs.com.cn/docs/api/ > [前端构建之gulp与常用插件](http://www.mamicode.com/info-detail-517085.html) 自动化构建工具 ##安装 ``` $ npm install gulp -g ``` 项目目录再次安装 ``` $ npm install gulp ``` ##Gulp的作用   ##优势 - 入手快，几句代码即可使用 - 不会频繁操作IO，执行速度快 - 插件职责单一，代码质量高 - 仅有5个api ##Gulp与Grunt   ##Gulp插件 - 文件合并 gulp-concat - 文本替换 gulp-replace - JS压缩 gulp-uglify - CSS压缩 gulp-cssmin - 等等 ##实例 方括号中的为依赖，会先执行依赖的任务。 ``` var gulp = require('gulp'); gulp.task('default', ['copy', 'watch'], function(){ console.log('default'); }); gulp.task('copy', function(){ gulp.src('./index.html') .pipe(gulp.dest('./dist/')); }); gulp.task('watch', function(){ gulp.watch('./index.html', ['copy']); }); ``` 顺序: 1.copy task 2.watch task 3.default 然后进入监听状态，循环 1和2 启动 ``` //默认回去找default task gulp gulp copy gulp watch ``` ##API - .task 定义任务api - .src 将文件转换成流 - .dest 将流转换成文件输出 - .watch监控文件变换，则执行XXX