gulp基本使用

gulp 是后起自秀，它在Grunt 之后出现，优与Grunt 。最主要的是其配置更加简洁更易于上手，它是基于Node.js 开发的构建工具。
（先介绍一下，Grunt这个工具使用插件机制和Gruntfile.js 来实现多任务的配置、组合和运行 ） 详细的自己去查一查。

gulp 也是通过插件机制来完成第三方工具适配的。通过一个名为gulpfile.js 的文件来完成任务的配置。它的创新之处在于是通过数据流（Stream）的概念来简化多个任务之间的配置和输出。（百度的fis3 也是基于流的）。
想在命令行工具上使用就要install gulp-cli 如下：

npm install -g gulp-cli

引用官方的四点：

• 全局安装 gulp

 npm install --global gulp

• 作为项目的开发依赖（devDependencies）安装

npm install --save-dev gulp

• 在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp');gulp.task('default', function() {  // 将你的默认的任务代码放在这});

• 运行 gulp

gulp

就是这么简单，其实gulp按功能需求去写配置文件和找插件的过程。
npm上所有的gulp插件

写配置文件，我们就得查官方的API文档。

下面列举几个demo 来更形象的说明一下：

1. 给css 加 自动添加私有前缀

去插件库找这个功能的插件，从名字auto-prefixer 就可以感觉出来，就是这个插件。

npm install --save-dev gulp-autoprefixer

通过npm 来搜索

打开这个查看，查看描述，描述如下:

按这个描述来写gulpfile.js 的配置内容（可以参照API文档，不用刻意记）：

var gulp = require('gulp');var autoprefixer = require('gulp-autoprefixer');gulp.task('default',function(){   gulp.src('./***.css')       .pipe(autoprefixer({          browers:['last 2 versions'],          cascade:false       }))       .pipe(gulp.dest('./dist'));});

在cmd 输入 gulp 就可以看到在多了dist 目录和编译出来的文件。

比较编译前的**.css 和编译后的 css 你会发现-webkit-的前缀已经帮我们加上了。

2.多个任务的情况（比如我既要代码验证，还有代码压缩）

首先的安装依赖

npm install --save-dev gulp-jshint gulp -uglify

写gulpfile.js配置文件

var gulp = require('gulp');var jshint = require('gulp-jshint');var uglify = require('gulp-uglify');//定义任务a ,验证代码。gulp.task('a',function(){        //  .src 找要处理的资源   return gulp.src('**.js')        .pipe(jshint())        .pipe(jshint.reporter('default'));});// 定义任务b,压缩代码gulp.task('b',function(){   return gulp.src('**.js')       .pipe(uglify())       .pipe(gulp.dest('build'));});将a和b 任务组合起来，用数组的形式。一个包含任务列表的数组，这些任务会在你当前任务运行之前完成他们。gulp.task('default',['a','b']);

常用的gulp 插件 ： gulp-uglify 、gulp-autoprefixer、gulp-htmlmin、gulp-less、gulp-minify-css、gulp-imagemin、gulp-concat、gulp-rev、gulp-rev-collector、gulp-clean ; 具体实现什么样的功能请去插件查询库查询！

总感觉没有fis3 用的顺手。。。

参考：
http://blog.csdn.net/fendouzhe123/article/details/50766550

gulp官方站点
gulp插件查询库