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,//省略布尔属性的值，===> 
removeEmptyAttributes:true,//删除所有空格作属性值 ==> 
removeScriptTypeAttributes:true,//删除

gulp