gulp解釋

GULP 是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具，是自動化項目的構(gòu)建利器。
GULP 是 基 于 Node.js 的 自 動 任 務(wù) 運 行 器 ， 它 能 自 動 化 地 完 成javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟。在實現(xiàn)上，她借鑒了 Unix 操作系統(tǒng)的管道（ pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。

1、安裝node：

Gulp 是基于 node.js 環(huá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只是一個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)建自己的根目錄文件夾，把項目放進(jìn)去（放到src文件夾里）

_image-26619.png

7、進(jìn)入自己的文件夾

_image-26795.png

. 當(dāng)前目錄
.. 上級目錄
/ 根目錄
dir 顯示目錄

8.本地安裝gulp

_image-27187.png

9、成功后在根目錄下會生成兩個文件

_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

安裝成功后會在文件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ù)運行后所要放的位置
});

語法：
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ù)運行后所要放的位置

13、在控制臺輸入gulp 任務(wù)名稱

_image-27638.png

運行后在dist文件夾下生成了一個css文件夾 里面有對應(yīng)的less編譯后的css

14、應(yīng)用sass插件上操作 先安裝插件-->在gulpfile.js里寫內(nèi)容--->運行

15、每次等寫完less或sass后，再執(zhí)行一次cmd有時候覺得還是有點麻煩，我們可以使用自動編譯任務(wù)

watch(參數(shù)1，參數(shù)2)方法會自動執(zhí)行傳遞的任務(wù)
第一個參數(shù)是任務(wù)需要監(jiān)控的路徑
第二個參數(shù)是一個數(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ù)瀏覽器版本自動處理前綴 (自動補(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ù)，有可能會刪除你的部分前綴
}))
.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中文網(wǎng) http://www.gulpjs.com.cn/