前端基于流的自动化构建工具gulp入门

一、 gulp的特点
1、使用简单、
2、构建快速
3、插件高质
4、易于学习
二、 gulp能做什么?
在项目中用 gulp,用它能做什么?
编译 SASS
html压缩
合并、压缩并重命名 CSS
合并、压缩、重命名和校验JS
优化图片
添加文件指纹（md5）
图片压缩
组件化头部底部（include html）
添加后缀名
浏览器实时预览更新
清除文件
ES6文件转换
雪碧图生成
自动执行任务
实时自动刷新…
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
三、 gulp实际应用
3.1 使用gulp的步骤
1、安装任务对应的依模块
2、在配置文件中加载依赖模块
3、配置任务
4、启动任务
3.2 实际开发案例
1、首先在hbulider中创建一个项目，项目名称比如为GULPDemo2，记住项目的路径，比如Q:\GULPDemo2
2、在当前项目中引入工程
把以前做好的前端项目拷贝到该目录下,如下图：

3、在项目的根目录下安装本地gulp
首先要安装node.js,如何安装node.js,请大家到网上查找。
然后在node.js的安装目录下,打开Node.js command prompt,把目录切换到Q:\GULPDemo2下。如下图：

然后，在该目录下,安装gulp。如下图：

安装完毕以后,在工程根目录Q:\GULPDemo2下会看到node_modules文件夹,打开该文件夹会看到gulp文件,说明安装成功。
4、使用gulp –v查看gulp版本

5、在项目的根目录Q:\GULPDemo2下创建gulp的配置文件
gulpfile.js
6、在gulpfile.js加载gulp模块
var gulp = require(‘gulp’);
7、在根目录下安装用于压缩JS文件的插件

安装完毕以后,在目录Q:\GULPDemo2\node_modules\下看到 gulp-uglify文件夹,说明安装成功。
8、在配置文件gulpfile.js中加载插件
var uglify=require(‘gulp-uglify’);
9、在配置文件gulpfile.js,配置压缩文件任务
gulp.task(“uglifyJS”,function(){
gulp.src(“js/*.js”)
.pipe(uglify())
.pipe(gulp.dest(“dest/js”))

})
10、执行压缩文件任务

其他任务，诸如CSS文件的压缩、合并和重命名等，步骤按照7、8、9、10即可，需要注意的是只是插件不一样。常见插件如下：
gulp-uglify JS文件压缩
gulp-jshint JS文件检测
gulp-minify-css CSS文件的压缩
gulp-concat 文件的合并
gulp-rename 文件的重命名
gulp-autoprefixer 给CSS增加前缀。解决某些CSS属性不是标准属性，有各种浏览器前缀的情况，很有用
gulp-imagemin 压缩常见的图片
gulp-sass sass编译

3.3 配置一个自动运行的任务
在gulp中，使用watch API即可配置一个自动运行的任务，比如：
gulp.task(“auto”,function(){
gulp.watch(“js/*.js”,[‘JS’]);
gulp.watch(“css/*.css”,[‘CSS’]);
})
然后执行auto任务：

上面的任务是，当js文件夹下所有的js文件发生改变时，调用JS任务。同理，CSS也一样。需要注意的是，JS和CSS任务先要配置好。

3.4 一个gulp配置文件示范
//1、引入gulp组件
var gulp = require(‘gulp’);
//2、、在配置文件中分别引入插件
var uglify=require(‘gulp-uglify’);
var minifyCss=require(“gulp-minify-css”);
var concat=require(“gulp-concat”);
var rename=require(“gulp-rename”);
var jshint=require(“gulp-jshint”);
//3、配置JS压缩任务
gulp.task(“uglifyJS”,function(){
gulp.src(“js/*.js”)
.pipe(uglify())
.pipe(gulp.dest(“dest/js”))

})
//4、配置合并、压缩并重命名CSS的任务
gulp.task(“CSS”,function(){
gulp.src(“css/*.css”)
.pipe(concat(“main.css”))
.pipe(minifyCss())
.pipe(rename(“main.min.css”))
.pipe(gulp.dest(“dest/css”))
})
//5、检测JS的语法的任务
gulp.task(“checkJS”,function(){
gulp.src(“js/*.js”)
.pipe(jshint())
.pipe(jshint.reporter(‘default’))
})
//6、合并、压缩并重命名js的任务
gulp.task(“JS”,function(){
gulp.src(“js/*.js”)
.pipe(concat(“main.js”))
.pipe(uglify())
.pipe(rename(“main.min.js”))
.pipe(gulp.dest(“dest/js”))
})
//7、配置自动执行的任务
gulp.task(“auto”,function(){
gulp.watch(“js/*.js”,[‘JS’]);
gulp.watch(“css/*.css”,[‘CSS’]);
})