前端自动构建工具@gulp入门

gulp是一个自动化的前端工具。它可以利用自身的插件来实现一些功能，如sass、less编译；浏览器自动刷新，文件压缩、重命名、代码校验（个人使用sublime的插件进行校验）等功能。当然这些功能也可以通过其他手段来实现，但是gulp实现的功能比较全面、快速、而且具有选择性（每个人都可以利用它来实现自己需要的功能）。

1.gulp安装

　　1）首先安装node环境

　　2）node全局安装gulp（npm install -g gulp），如果安装不上可使用淘宝镜像（cnpm install -g gulp）

2.gulp插件的使用

　　安装好gulp之后现在就需要使用gulp实现一些功能。

　　例如：实现js压缩并重命名

　　1）命令行切换到工程目录下，在工程目录下安装gulp（cnpm install gulp --save-dev）

　　2）在工程目录下安装gulp-uglify(压缩js的插件)和gulp-rename（文件重命名插件）。

　　3）然后在项目的根目录下新建文件gulpfile.js。

　　4）在gulpfile.js中的代码如下：

 //引入gulp 、gulp-rename、gulp-uglify
 var gulp = require('gulp'),
     rename = require('gulp-rename'),
     uglify = require('gulp-uglify');
 //定义任务名称‘uglify’
 gulp.task('uglify',function(){
     //选择文件路径
     gulp.src('script/angular/angular-1.4.6.js')
     //使用uglify压缩
     .pipe(uglify())
     //对文件进行重命名
     .pipe(rename('angular-1.4.6.min.js'))
     //文件的输出路径
     .pipe(gulp.dest('script/angular'))
 });

　　5）在命令行中执行guip uglify

3.gulp常用的api

　　1）gulp.task() 定义一个gulp任务

　　2）gulp.src() 定义文件的路径

　　3）gulp.dest() 定义文件的输出路径

　　4）gulp.watch()对文件进行监听

4）个人常用的gulp插件（后面依次介绍）

　　1）sass编译（也可以实现less编译，只是使用的插件不同）

　　2）自动添加浏览器前缀（如-webkit、 -ms、-moz、-o 等），貌似根据caniuse的数据来进行浏览器前缀的添加。

　　3）html、css、js文件的压缩、合并重名等

　　4）浏览器的自动刷新

等等。。