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/