gulp解释
GULP 是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。
GULP 是 基 于 Node.js 的 自 动 任 务 运 行 器 ， 它 能 自 动 化 地 完 成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了 Unix 操作系统的管道（ pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
1、安装node：
Gulp 是基于 node.js 环境运行的，所以我们首先需要安装 node.js 环境。
在 Window 系统中直接下一步下一步式安装。安装好后 WIN+R 输入 cmd 调出 DOS 窗口，输入 node -v 看看是否有版本信息，如果没有则查看系统变量 Path，把 path 配置上去
_image-25159.png
npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
cnpm只是一个npm的国内镜像
2、安装cnpm:
_image-25568.png
3、检测是否安装成功
_image-26116.png
4、安装gulp
_image-26250.png
5、查看gulp版本信息
_image-26368.png
6.创建自己的根目录文件夹，把项目放进去（放到src文件夹里）
_image-26619.png
7、进入自己的文件夹
_image-26795.png
. 当前目录
.. 上级目录
/ 根目录
dir 显示目录
8.本地安装gulp
_image-27187.png
9、成功后在根目录下会生成两个文件
_image-26887.png
10、通过cnpm init 或者npm init来创建package.json文件，把"main": "index.js"入口js为"main": "gulpfile.js"，最终看到的package.json里有许多许多刚刚修改的代码
11、安装gulp-less插件
_image-27187.png
安装成功后会在文件package.json里多了一行gulp-less信息的代码
_image-27275.png
12、安装好gulp-less后在gulpfile.js中写入如下代码
//加载gulp模块
var gulp = require("gulp");
//加载gulp-less模块
var test_less = require("gulp-less");
//gulp任务api
//语法：
//gulp.task("任务名称"，回调函数)
//回调函数里是要执行的任务
gulp.task("test-less",function(){
gulp.src("src/less/*.less") //src表示要执行任务的所在位置（src下必须有less文件）
.pipe(test_less())//要执行的任务
.pipe(gulp.dest("dist/css"));//执行后的任务运行后所要放的位置
});
语法：
gulp.task("任务名称"，回调函数)
回调函数里是要执行的任务
src表示要执行任务的所在位置（src下必须有要处理的文件）
gulp.src("要执行（压缩或编译）的源代码")
gulp.pipe(模块名称)
gulp.pipe(gulp.dest("代码执行后所要放的位置"));//执行后的任务运行后所要放的位置
13、在控制台输入gulp 任务名称
_image-27638.png
运行后在dist文件夹下生成了一个css文件夹 里面有对应的less编译后的css
14、应用sass插件上操作 先安装插件-->在gulpfile.js里写内容--->运行
15、每次等写完less或sass后，再执行一次cmd有时候觉得还是有点麻烦，我们可以使用自动编译任务
watch(参数1，参数2)方法会自动执行传递的任务
第一个参数是任务需要监控的路径
第二个参数是一个数组，里面是要编译的任务名
gulp.task("watch",function(){
gulp.watch("src/less/*.less",["test-less"]);
});
16、压缩html
_image-28121.png
gulp.task("htmlmin",function(){
var options = {
removeComments:true,//清除html注释
collapseWhitespace:true,//压缩html 合并空格
collapseBooleanAttributes:true,//省略布尔属性的值，<input checked="true" />===> <input />
removeEmptyAttributes:true,//删除所有空格作属性值<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(htmlmin(options))
.pipe(gulp.dest("dist"));
})
_image-28291.png
经过压缩，所有的html文件都在一行显示，并且去掉了注释和空格等
17.Gulp还可以根据浏览器版本自动处理前缀 (自动补齐前缀)
_image-28503.png
var autoprefixer = require("gulp-autoprefixer");
gulp.task("autopre",function(){
gulp.src("src/css/*.css")
.pipe(autoprefixer({
browsers:['last 2 versions','Android >= 4.0'],
cascade :true,//是否美化属性 默认值true
//像这样 -webkit-transform:rotate(45deg);
//transform:rotate(45deg)
remove:true//是否去掉不必要的前缀 默认为true
}))
pipe(gulp.dest("dest/css/"))
})
_image-29127.png
18.压缩css gulp-minify-css 或者 gulp-clean-css
_image-29222.png
var mincss = require("gulp-minify-css");
gulp.task("test-minify",function(){
gulp.src("src/css/*.css")
.pipe(mincss({
advanced:false,//是否开启高级优化（合并选择器等），类型：Boolean 默认为true
compatibility:'ie7',//保留ie7及以下兼容写法 类型 string
//默认：'' or '*'[启用兼容模式：'ie7'：ie7兼容模式，'ie8':ie8兼容模式 '*':ie9+兼容模式]
keepBreaks:true,//类型：boolean 默认false [是否保留换行]
keepSpecialComments:"*"
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加此参数，有可能会删除你的部分前缀
}))
.pipe(gulp.dest("dest/css"));
});
_image-29525.png
19.给刚刚压缩的css里的图片路径加上版本号 防止缓存
cnpm install gulp-make-css-url-version --save-dev
/给图片加版本号 防止缓存
gulp.task("test-url",function () {
gulp.src("src/css/*.css")
.pipe(urlpic())
.pipe(mincss())
.pipe(gulp.dest("dest/css"))
})
gulp test-url
20.压缩js
cnpm install gulp-uglify --save-dev
var jsmin = require("gulp-uglify");
//压缩
gulp.task("js-min",function () {
// gulp.src("src/js/*.js")
gulp.src(["src/js/")
.pipe(jsmin())
.pipe(gulp.dest("dest/js"));
})
gulp js-min
21.压缩所有js在一个文件里
cnpm install gulp-concat --save-dev
var c = require("gulp-concat");
//压缩所有的js在一个文件里
gulp.task("test_concat",function () {
gulp.src("src/js/*.js")
.pipe(c("all.js"))
.pipe(gulp.dest("dest/js"))
})
gulp.test_concat
其他插件请参考gulp中文网 http://www.gulpjs.com.cn/
