gulp解釋
GULP 是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具仔涩，是自動(dòng)化項(xiàng)目的構(gòu)建利器。
GULP 是 基 于 Node.js 的 自 動(dòng) 任 務(wù) 運(yùn) 行 器 牲蜀， 它 能 自 動(dòng) 化 地 完 成javascript/coffee/sass/less/html/image/css 等文件的的測試赏表、檢查、合并甩鳄、壓縮、格式化额划、瀏覽器自動(dòng)刷新妙啃、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟俊戳。在實(shí)現(xiàn)上揖赴，她借鑒了 Unix 操作系統(tǒng)的管道（ pipe）思想，前一級的輸出抑胎，直接變成后一級的輸入燥滑，使得在操作上非常簡單。
1阿逃、安裝node：
Gulp 是基于 node.js 環(huán)境運(yùn)行的铭拧，所以我們首先需要安裝 node.js 環(huán)境。
在 Window 系統(tǒng)中直接下一步下一步式安裝盆昙。安裝好后 WIN+R 輸入 cmd 調(diào)出 DOS 窗口，輸入 node -v 看看是否有版本信息焊虏，如果沒有則查看系統(tǒng)變量 Path淡喜，把 path 配置上去
_image-25159.png
npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安裝诵闭、卸載炼团、管理依賴等）
cnpm只是一個(gè)npm的國內(nèi)鏡像
2、安裝cnpm:
_image-25568.png
3疏尿、檢測是否安裝成功
_image-26116.png
4瘟芝、安裝gulp
_image-26250.png
5、查看gulp版本信息
_image-26368.png
6.創(chuàng)建自己的根目錄文件夾褥琐，把項(xiàng)目放進(jìn)去（放到src文件夾里）
_image-26619.png
7锌俱、進(jìn)入自己的文件夾
_image-26795.png
. 當(dāng)前目錄
.. 上級目錄
/ 根目錄
dir 顯示目錄
8.本地安裝gulp
_image-27187.png
9、成功后在根目錄下會(huì)生成兩個(gè)文件
_image-26887.png
10敌呈、通過cnpm init 或者npm init來創(chuàng)建package.json文件贸宏，把"main": "index.js"入口js為"main": "gulpfile.js"造寝，最終看到的package.json里有許多許多剛剛修改的代碼
11、安裝gulp-less插件
_image-27187.png
安裝成功后會(huì)在文件package.json里多了一行g(shù)ulp-less信息的代碼
_image-27275.png
12吭练、安裝好gulp-less后在gulpfile.js中寫入如下代碼
//加載gulp模塊
var gulp = require("gulp");
//加載gulp-less模塊
var test_less = require("gulp-less");
//gulp任務(wù)api
//語法：
//gulp.task("任務(wù)名稱"诫龙，回調(diào)函數(shù))
//回調(diào)函數(shù)里是要執(zhí)行的任務(wù)
gulp.task("test-less",function(){
gulp.src("src/less/*.less") //src表示要執(zhí)行任務(wù)的所在位置（src下必須有l(wèi)ess文件）
.pipe(test_less())//要執(zhí)行的任務(wù)
.pipe(gulp.dest("dist/css"));//執(zhí)行后的任務(wù)運(yùn)行后所要放的位置
});
語法：
gulp.task("任務(wù)名稱"，回調(diào)函數(shù))
回調(diào)函數(shù)里是要執(zhí)行的任務(wù)
src表示要執(zhí)行任務(wù)的所在位置（src下必須有要處理的文件）
gulp.src("要執(zhí)行（壓縮或編譯）的源代碼")
gulp.pipe(模塊名稱)
gulp.pipe(gulp.dest("代碼執(zhí)行后所要放的位置"));//執(zhí)行后的任務(wù)運(yùn)行后所要放的位置
13鲫咽、在控制臺輸入gulp 任務(wù)名稱
_image-27638.png
運(yùn)行后在dist文件夾下生成了一個(gè)css文件夾 里面有對應(yīng)的less編譯后的css
14签赃、應(yīng)用sass插件上操作 先安裝插件-->在gulpfile.js里寫內(nèi)容--->運(yùn)行
15、每次等寫完less或sass后分尸，再執(zhí)行一次cmd有時(shí)候覺得還是有點(diǎn)麻煩锦聊，我們可以使用自動(dòng)編譯任務(wù)
watch(參數(shù)1，參數(shù)2)方法會(huì)自動(dòng)執(zhí)行傳遞的任務(wù)
第一個(gè)參數(shù)是任務(wù)需要監(jiān)控的路徑
第二個(gè)參數(shù)是一個(gè)數(shù)組寓落，里面是要編譯的任務(wù)名
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
經(jīng)過壓縮伶选，所有的html文件都在一行顯示史飞，并且去掉了注釋和空格等
17.Gulp還可以根據(jù)瀏覽器版本自動(dòng)處理前綴 (自動(dòng)補(bǔ)齊前綴)
_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,//是否美化屬性 默認(rèn)值true
//像這樣 -webkit-transform:rotate(45deg);
//transform:rotate(45deg)
remove:true//是否去掉不必要的前綴 默認(rèn)為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,//是否開啟高級優(yōu)化（合并選擇器等），類型：Boolean 默認(rèn)為true
compatibility:'ie7',//保留ie7及以下兼容寫法 類型 string
//默認(rèn)：'' or '*'[啟用兼容模式：'ie7'：ie7兼容模式仰税，'ie8':ie8兼容模式 '*':ie9+兼容模式]
keepBreaks:true,//類型：boolean 默認(rèn)false [是否保留換行]
keepSpecialComments:"*"
//保留所有特殊前綴 當(dāng)你用autoprefixer生成的瀏覽器前綴构资，如果不加此參數(shù)，有可能會(huì)刪除你的部分前綴
}))
.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在一個(gè)文件里
cnpm install gulp-concat --save-dev
var c = require("gulp-concat");
//壓縮所有的js在一個(gè)文件里
gulp.task("test_concat",function () {
gulp.src("src/js/*.js")
.pipe(c("all.js"))
.pipe(gulp.dest("dest/js"))
})
gulp.test_concat
其他插件請參考gulp中文網(wǎng) http://www.gulpjs.com.cn/
