gulp创建与使用

npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

cnpm只是一个npm的国内镜像

1.下载nodejs安装包，（去node官网https://nodejs.org）

2.安装nodejs（如果命令提示权限错误，用sudo管理员权限输入）

3.安装成功  控制台输入 node -v 查看版本

4.安装cnpm

5.检测是否安装成功。

6.安装gulp

7.查看gulp版本信息

8.创建自己的根目录文件夹（project  dist  src），把项目放进去（放到src文件夹里）

9.进入自己的文件夹

.当前目录

..上级目录

/根目录

dir显示目录

cd :盘名  

10.本地安装gulp

11.成功后在根目录下会生成两个文件

12.通过cnpm init或者npm init来创建package.json文件，把"main": "index.js"入口js改为"main": "gulpfile.js"（创建gulpfile.js文件），最终看到的package.json里有许多许多刚刚修改的代码

编译 less 或者 sass 文件

1.安装gulp-less （gulp-sass）插件

less:   cnpm install --save-dev gulp-less

sass:  cnpm install --save-dev gulp-sass

安装成功后会在文件package.json里多了一行gulp-less信息的代码

2.安装好gulp-less(gulp-sass)后在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"));//执行后的任务运行后所要放的位置

});

//sass 道理一样

语法：

gulp.task("任务名称"，回调函数)

回调函数里是要执行的任务

src表示要执行任务的所在位置（src下必须有要处理的文件）

gulp.src("要执行（压缩或编译）的源代码")

.pipe(模块名称)

.pipe(gulp.dest("代码执行后所要放的位置"));//执行后的任务运行后所要放的位置

3.在控制台输入gulp任务名称

运行后在dist文件夹下生成了一个css文件夹 里面有对应的less编译后的css

1.应用sass插件上操作  先安装插件-->在gulpfile.js里写内容--->运行

2.每次等写完less或sass后，再执行一次cmd有时候觉得还是有点麻烦，我们可以使用自动编译任务

watch(参数1，参数2)方法会自动执行传递的任务

第一个参数是任务需要监控的路径

第二个参数是一个数组，里面是要编译的任务名

gulp.task("watch",function(){

gulp.watch("src/less/*.less",["test-less"]);

});

压缩html

1.安装gulp-htmlmin

cnpm install --save-dev gulp-htmlmin

2.gulpfile.js 里代码

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

var options = {

removeComments:true,//清除html注释

collapseWhitespace:true,//压缩html合并空格

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

removeEmptyAttributes:true,//删除所有空格作属性==> id=""

removeScriptTypeAttributes:true,//删除