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,//删除<script>的type="text/javascript"的type="text/javascript"

removeStyleLinkTypeAttributes:true,//删除<style>和<link>的type="text/css"和的type="text/css"

minifyJS:true,//压缩页面内内嵌式js

minifyCSS:true//压缩页面内嵌式css

};

gulp.src("src/*.html")

.pipe(htmlmin(options))

.pipe(gulp.dest("dist"));

})

3.控制台输入

经过压缩，所有的html文件都在一行显示，并且去掉了注释和空格等

Gulp还可以根据浏览器版本自动处理前缀(自动补齐前缀)

cnpm install --save-dev  gulp-autoprefixer

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/"))

})

压缩css  gulp-minify-css或者gulp-clean-css

cnpm install --save-dev gulp-minify-css

cnpm install --save-dev gulp-clean-css

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"));

});

给刚刚压缩的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"))

})

压缩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"));

})

压缩所有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"))

})

压缩图片

cnpm install gulp-imagemin --save-dev

var imgmin = require("gulp-imagemin");

//压缩图片

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

gulp.src("src/img/*.{png,jpg,gif,ico}")

.pipe(imgmin({

optimizationLevel : 5,//类型：number默认：3取值范围：0-7（优化等级）

progressive : true,//类型：boolean默认false无损压缩jpg图片

interlaced : true,//类型：boolean默认：false隔行扫描gif进行渲染

multipass : true //类型：boolean默认：false多次优化svg直到完全优化

}))

.pipe(gulp.dest("dist/img"));

});

深度压缩图片

cnpm install imagemin-pngquant --save-dev

var imgminq = require("imagemin-pngquant");

//深度压缩图片

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

gulp.src("src/img/*.{png,jpg,gif,ico}")

.pipe(imgmin({

progressive : true,//类型：boolean默认false无损压缩jpg图片

svgoPlugins : [{removeViewBox:false}],//不要移除svg的viewbox属性

use : [imgminq()]//使用pngquant深度压缩png图片的imagemin插件

}))

.pipe(gulp.dest("dist/img"));

});