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