随着发展，前端代码复杂度和规模增加，使用构建工具实现自动化的前端开发流程很有必要。前端自动化构建工具具有代码压缩，编译，监控等功能。主要完成前端一些反复重复的任务。目前主流的前端自动化构建工具有Grunt，Gulp等。

Gulp

Gulp是基于Nodejs的自动任务运行器，能够自动化的完成javascript/coffee/sass/less/heml/image/css等文件的测试，检查，合并，压缩，格式化，浏览器自动刷新，监听文件再改动后重复指定的这些步骤。

安装gulp

gulp基于node.js环境运行，首先安装node.js环境

Node.js的安装

1、下载nodejs安装包 https://nodejs.org

2、安装

在Window系统中安装配置Path环境

然后WIN+R输入cmd调出DOS窗口输入node -v 检测是否安装成功

3、安装cnpm

npm服务器在国外，需要翻墙才能下载插件。安装cnpm

在DOS窗口中执行 npm install cnpm -g --registry=https://registry.npm.taobao.org

检测cnpm 是否安装成功

cnpm -v

gulp安装

全局安装

DOS窗口输入npm install -g gulp

检测是否正确安装 gulp -v

本地安装gulp

DOS窗口输入 cnpm install gulp --save-dev

相关插件的安装

sass 的编译(gulp-sass)

less的编译(gulp-less)

重命名(gulp-rename)

自动添加css前缀(gulp-autoprefixer)

压缩css(gulp-clean-css)

js代码校验(gulp-jshint)

合并js文件(gulp-concat)

压缩js代码(gulp-uglify)

压缩图片(gulp-imagemin)

自动刷新页面(gulp-livereload)

更改提醒(gulp-notify)

less和sass的编译(gulp-less,gulp-sass)

less插件使用gulp-less安装 cnpm install -save-dev gulp-less

eg:

var gulp = require('gulp'),

less = require('gulp-less');

gulp.task('text-less',function(){

gulp.src("src/less/*.less").pipe(less()).pipe(gulp.dest('dist/css'))

});

sass的安装同less的安装

压缩HTML页面(gulp-htmlmin)

Gulp-htmlmin插件的安装：

指令：cnpm install gulp-htmlmin --save-dev

安装成功后在gulpfile.js中编写代码。完成页面的压缩

var gulp = require("gulp");  //gulp模块

var gulp_htmlmin = require("gulp-htmlmin");  gulp-htmlmin插件模块

//test-htmlmin任务

gulp.task("test-htmlmin",function(){

var options = {

removeComments: true,  ///清除HTML注释

collapseWhitespace: true, ///压缩HTML

collapseBooleanAttributes: ture,  ///省略布尔属性的值<input checked="true"/> ==><input>

removeEmptyAttributes:ture,///删除所有的空格属性值<input id=""/> ==><input/>

removeScriptTypeAttributes:true,  ///删除<script>的type="text/javascript"

removeStyleLinkTypeAttributes:true, ///删除<style>和<link>的type="text/css"

minifyJS:true, ///压缩页面JS

minifyCSS:true ///压缩页面CSS

};

gulp.src("src/*.html").pipe(gulp_htmlmin(options)).pipe(gulp.dest('dest/'))

});

之后在DOS窗口输入指令

gulp test-htmlmin