在Gulp中，使用的是Nodejs中的 stream (流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。
1、安装gulp 1.1 完成后运行全局gulp安装 npm install -g gulp
1.2 切换到项目中，进行局部安装一次，并运行 npm install gulp，如果想在安装时把gulp写进项目的package.json文件的依赖中，需要提前在项目里新建一个package.json文件(文件名称必须叫package.json和gulpfile.js，请叫我严肃脸)。 然后运行命令时，加上--sav-dev 就可以了 npm install --save-dev gulp
1.2.1 在项目中，gulp构建后自动添加版本号
但是由于公司发布系统限制，如果用右面方法实现，每次更新都会积压过多过期无用的文件，我们预期效果是:左边的文件格式，添加版本号；
- 分别安装gulp-rev、gulp-rev-collerctor
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
- 打开
node_modules\gulp-rev\index.js
第144行
manifest[originalFile] = revisionedFile;
manifest[originalFile] = originalFile + '?v=' + file.revHash;
- 打开
node_modules\rev-path\index.js
10行
return filename + '-' + hash + ext;
return filename + ext;
- 打开
node_modules\gulp-rev-collector\index.js
31行
if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
1.3 关于gulp安装与环境变量配置,及安装不成功的原因
运行N遍都提示“ 'gulp'不是内部或者外部命令，也不是可运行的程序或批处理文件 ”
node与npm都安装正确，但gulp -v时确一直提示不是内部名外部命令....
最后查了N次发现是系统变量配置错误。 首先检查npm prefix npm config get prefix 这个应该是系统变量中的path的配置；
D:\softwares\Node\node_global; 这个地址是要添加到系统变量中的。如下
高级系统设置
选中path配置，双击或点击编辑
在路径中添加node的根目录与刚才prefix的路径； 记得每个路径结束位置加上分号，再接下条链接 D:\softwares\Node\;D:\softwares\Node\node_global; NODE_PATH
2、gulp使用方法 2.1 新建gulpfile.js(必须使用这个名字) 在项目中再创建一个gulpfile.js文件，里边可以定义一些方法。
假设gulpfile.js文件中有个default的任务，接下来运行：gulp+task名称 gulp default
会输出default的内容。 并以Finished结束
3、gulp常用插件 3.1 接下来安装及在gulpfile.js文件中配置一些常用的插件 插件的安装方式： npm install --global xxx 全局安装 npm install xxx --save-dev 本地安装 优缺点如下：
| 安装方式 | 缺点 | 优点 |
| --global | 安装会造成很多冗余插件，浪费空间； | 只需要安装一次 |
| --save-dev | 每个项目都需要重新安装 | 减少空间， 直接写入package.json |
因为在使用 --global 参数的时候 --save 或 --save-dev参数是无效的。 这样就带来一个问题。此时 package.json 中的 dependencies, devDependencies 将无法享受到npm自动更新带来的便利，不使用dependencies, devDependencies 字段对我们的项目管理来说是不可接受的。 项目中调取的插件是从package.json中查看的，如果没有--save-dev，则不会在package.json中依赖注入dependencies。
http://www.cnblogs.com/2050/p/4198792.html 这篇文章插件写的挺详细的。 自动加载插件 npm install --save-dev gulp-load-plugins 重命名 npm install --save-dev gulp-rename var rename = require("gulp-rename"); // rename via string gulp.src("src/hello.txt") .pipe(rename("main/goodbye.md")) .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md js文件压缩 npm install --save-dev gulp-jsmin var jsmin = require('gulp-jsmin'); var rename = require('gulp-rename'); gulp.task('default', function () { gulp.src('src*.js') .pipe(jsmin()) .pipe(rename({suffix : '.min'})) .pipe(gulp.dest('dist')); }); npm install --save-dev gulp-uglify npm install --save-dev pump var gulp = require('gulp'); var uglify = require('gulp-uglify'); var pump = require('pump'); gulp.task('compress', function (cb) { pump([ gulp.src('lib*.css') .pipe(cssmin()) .pipe(rename({suffix : '.min'})) .pipe(gulp.dest('dist')); }); html文件压缩 npm install --save-dev gulp-html-minify npm i gulp-htmlmin --save-dev npm install gulp-processhtml --save-dev var htmlminify = require("gulp-html-minify"); gulp.task('build-html' , function(){ return gulp.src("./html-init*.html") .pipe(htmlminify()) .pipe(gulp.dest("./html")) }); js代码检查 npm install --save-dev gulp-jshint npm install --save-dev jshint-stylish var jshint = require('gulp-jshint'); gulp.task('lint', function() { return gulp.src('js*.css') //此时base的值为app/src,也就是说它的base路径为app/src//设该模式匹配到了文件 app/src/css/normal.css.pipe(gulp.dest('dist')) //用dist替换掉base路径，最终得到 dist/css/normal.css gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script//假设匹配到的文件为script/lib/jquery.js.pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js 4.3 gulp.task(); 是用来定义任务的 gulp.task(name[, deps], fn)； deps是当前定义的任务需要依赖的其他任务，为一个数组。 当定义一个简单的任务时，需要传入任务名字和执行函数两个属性； gulp.task('default',function(){ console.log("hi~"); }); 也可以指定一个任务build执行css,js,imgs这三个任务，可以指定数组来完成。 gulp.task('build', ['css', 'js', 'imgs']); 这些任务不是按顺序执行的，可以将函数和数组结合起来指定依赖关系. ex:定义一个css任务，在执行前检查greet任务是否已经执行完毕。 gulp.task('css', ['greet'],function(){ ...... }); 此时，当执行css任务时，gulp会先执行greet任务，然后在它结束后再调用定义的css函数。 也可以定义在gulp开始运行的时候默认执行的任务 gulp.task('default',function(){ ...... }); gulp.task('one',function(){ //one是一个异步执行的任务 setTimeout(function(){ console.log('one is done') },5000);});//two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行gulp.task('two',['one'],function(){ console.log('two is done');}); 4.4 gulp.watch(); gulp.watch(glob[, opts], tasks) 用来监视文件的变化，当文件发生变化后，利用它来执行相应的任务。
延伸： 基于node的扩展 在sublime中安装SublimeLinter进行js & css代码校验 一、安装SublimeLinter： 1、按下 Ctrl+Shift+p 进入 命令模式（Command Palette）
2、输入pci
3、输入SublimeLinter，进行安装。
4、安装完成以后，出现如下界面：
二、安装SublimeLinter-jshint 1、按下 Ctrl+Shift+p 进入 命令模式（Command Palette）
2、输入pci
3、输入SublimeLinter-jshint，进行安装。
4、出现如下结果，则说明安装完成，输入 jshint -v可查看安装的jshint版本。
5、现在使用 Sublime Text 编辑 JavaScript 文件，就会有语法检查了！在行号的左侧会有黄色/红色的小圆点提示语法错误，将光标定位到错误的代码里，底部的状态栏会显示错误原因。
三、关于CSS代码检查： csslint的安装方法与jshint一致，只需要在sublime text 3的package control中再安装SublimeLinter-csslint，然后在命令行中以下代码安装csslint即可。
| 1 | npm install -g csslint |
输入 csslint --version可查看安装的csslint版本。 现在使用 Sublime 编辑CSS、JS文件都有自动拼写检查了。