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