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