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,//省略布爾屬性的值，<input checked="true" />===> <input />
removeEmptyAttributes:true,//刪除所有空格作屬性值<input id="" /> ==> <input />
removeScriptTypeAttributes:true,//刪除<script>的type="text/javascript"
removeStyleLinkTypeAttributes:true,//刪除<style>和<link>的type="text/css"
minifyJS:true,//壓縮頁面js
minifyCSS:true//壓縮頁面css
};
gulp.src("src/*.html")
.pipe(htmlmin(options))
.pipe(gulp.dest("dist"));
})
_image-28291.png
經過壓縮，所有的html文件都在一行顯示，并且去掉了注釋和空格等
17.Gulp還可以根據瀏覽器版本自動處理前綴 (自動補齊前綴)
_image-28503.png
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/"))
})
_image-29127.png
18.壓縮css gulp-minify-css 或者 gulp-clean-css
_image-29222.png
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"));
});
_image-29525.png
19.給剛剛壓縮的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"))
})
gulp test-url
20.壓縮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"));
})
gulp js-min
21.壓縮所有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"))
})
gulp.test_concat
其他插件請參考gulp中文網 http://www.gulpjs.com.cn/
