開始之前

關(guān)于Gulp的介紹網(wǎng)上有許多，完整的Gulp自動(dòng)化工作流配置也不少泉懦，但或多或少有不讓人滿意的地方涤姊，加上項(xiàng)目的需要，于是自己便開始嘗試寫一個(gè)自己的前端自動(dòng)化工作流霜定。項(xiàng)目需求不同档悠，配置肯定有些許區(qū)別，所以不能保證vGulp能用于你的項(xiàng)目中望浩。本文只做參考站粟，希望能為你提供一些幫助，具體的配置請(qǐng)根據(jù)實(shí)際情況調(diào)整曾雕。vGulp需要打磨之處還有許多，歡迎各路大神指正助被。

關(guān)于vGulp

Github地址：https://github.com/Alvin-Liu/vGulp （跪求Star剖张，歡迎Fork！）

vGulp基于Gulp 3.9.1開發(fā)而成揩环，用于處理前端項(xiàng)目文件的編譯搔弄、壓縮、合并丰滑、打包工作顾犹。HTML使用ejs模板編譯而成倒庵，可根據(jù)自定義的語(yǔ)言包和命令編譯成不同語(yǔ)言的HTML文件；css使用sass預(yù)處理編譯而成炫刷，自動(dòng)添加-webkit-擎宝、-moz-、-ms-等前綴浑玛；JS沒(méi)有做過(guò)多處理绍申，可以根據(jù)個(gè)人需要在gulpfile.js文件中添加JSLint或ESLint等。

什么情況下可以使用vGulp:

• F5鍵壞了顾彰，手指不夠長(zhǎng)极阅，懶...
• Apache等環(huán)境下修改文件，找不到合適的自動(dòng)刷新工具
• 開發(fā)多語(yǔ)言版本的網(wǎng)站頁(yè)面等

vGulp使用方法

1.安裝Node.js,安裝Gulp（Node.js安裝方法請(qǐng)自行搜索涨享，Gulp入門）：

$ npm install --global gulp     // 全局安裝
$ npm install --save-dev gulp   // 作為項(xiàng)目的開發(fā)依賴

2.克隆或者下載本項(xiàng)目筋搏，github地址：https://github.com/Alvin-Liu/vGulp：

$ git clone https://github.com/Alvin-Liu/vGulp.git

3.安裝模塊依賴：

npm install

4.根據(jù)需要簡(jiǎn)單配置自己的config.json，示例代碼：

{
    "project" : "vGulp",    // 項(xiàng)目名   
    "src": {    // 源文件目錄
        "ejs": "src/ejs", 
        "sass": "src/sass",
        "images": "src/images",
        "js": "src/js",
        "css": "src/css", 
        "source": "src/source",     //  其他文件厕隧，如視頻奔脐，音樂(lè)，字體等
        "data": "language/data.json"    // 語(yǔ)言包路徑
    },
    "dist": {   // 打包后文件目錄
        "html": "html",
        "js": "static/js",
        "css": "static/css",
        "images": "static/images",
        "source": "static/source"
    },
    "localserver" : {   // 本地服務(wù)器
        "baseDir" : "src",  //  網(wǎng)站根目錄
        "port" : "8081",    //  端口
        "proxy": false,     //  時(shí)候啟用代理
        "target": "127.0.0.1"   // 代理地址
    },
    "lang":["zh","en"],     // 語(yǔ)言種類栏账，HTML代碼將編譯到對(duì)應(yīng)的文件夾中
    "data_use": 1,          // 指定data.json文件用那一種方式,目前可選0或者1,請(qǐng)看注意事項(xiàng)
    "displayInfo": false,   // 是否啟用文件頭部追加內(nèi)容
    "pkg": {    // 追加內(nèi)容模板請(qǐng)?jiān)趃ulpfile.js中修改
        "author":"",        
        "description":"",
        "version":"1.0.0",
        "homepage":"#",
        "license":""
    },
    "replaceWord": {    // 全局關(guān)鍵字替換
        "html": {
            "origin": "../",
            "dist": "../../static/"
        },
        "js": {
            "origin": "",
            "dist": ""
        },
        "css": {
            "origin": "",
            "dist": ""
        }
    },
    "concatCssFiles": { // css合并帖族，暫時(shí)只支持一個(gè)
        "filename": "init.min.css",     // 合并后的文件名
        "folder": "common",     // 合并該文件夾中的內(nèi)容
        "files": ["init.css","header.css"]  //  指定合并后的文件的先后順序
    },
    "concatJsFiles": {  // js合并
        "filename": "global.min.js",
        "folder": "common",
        "files": ["b.js","a.js"]
    }      
}

5.根據(jù)需要修改gulpfile.js(請(qǐng)盡量熟悉vGulp之后再嘗試);

6.執(zhí)行g(shù)ulp任務(wù)：

gulp help   // gulp參數(shù)說(shuō)明
gulp        // 開發(fā)，添加命令 --lang= 可以指定語(yǔ)言挡爵，例：gulp --lang=en
gulp build  // 打包
gulp ejs    // ejs模板編譯
gulp sass   // sass編譯
gulp js     // js合并
gulp clean  // 清理無(wú)用文件
gulp watch  // 監(jiān)聽文件改變

特別說(shuō)明

1.在命令后添加 --lang=en 或者 --lang= 指定語(yǔ)言版本竖般，可以執(zhí)行該語(yǔ)言對(duì)應(yīng)的命令操作，如：

gulp build --lang=en  // 只會(huì)打包en語(yǔ)言下的HTML文件 

2.多語(yǔ)言時(shí),有兩種方法應(yīng)用頁(yè)面數(shù)據(jù),根據(jù)個(gè)人喜歡在config.json中配置data_use為0或者1;

• data_use為0時(shí)茶鹃，一個(gè)語(yǔ)言對(duì)應(yīng)一個(gè)文件夾涣雕，且一個(gè)頁(yè)面對(duì)應(yīng)一個(gè)文件夾中的一個(gè)文件，如：index.ejs的數(shù)據(jù)對(duì)應(yīng)index.json闭翩。使用該方式時(shí)挣郭，請(qǐng)先修改data文件的引用路徑為 'language' ,不要指定具體的文件名;
• data_use為1時(shí)(默認(rèn)),所有文件對(duì)應(yīng)同一個(gè)json文件，config中data.json文件的引用指定到具體的文件名疗韵。

3.多語(yǔ)言時(shí),同一個(gè)頁(yè)面由于字體長(zhǎng)度等原因顯示會(huì)有所差別兑障，此時(shí)可以另外引入單獨(dú)的針對(duì)該文件的css代碼，所有ejs頁(yè)面中都可以引用_lang這一全局變量蕉汪，進(jìn)行指定語(yǔ)言引入指定內(nèi)容流译，如參考代碼中的內(nèi)容：

<%# 只有當(dāng)語(yǔ)言為'zh'時(shí),引入文件zh.css %>
<% if(_lang='zh'){ %>   
    <%- include('extra/zh.css') %>
<% } %>

如果了解Gulp或者只是需要一款刷新工具，下面內(nèi)容可以忽略

vGulp 插件介紹

主要插件

以下插件由于使用頻率較高且文檔較多者疤，使用簡(jiǎn)單福澡，固僅做列表介紹(畢竟這篇文檔主要目的不是用于介紹插件的，是吧):

• gulp-ejs: 編譯ejs文件（項(xiàng)目使用的是ejs驹马，使用其他請(qǐng)自行更換）;
• gulp-data: 配合gulp-ejs等使用革砸，用于引入文件數(shù)據(jù)除秀，如json文件等;
• gulp-sass: 編譯sass;
• gulp-clean-css: 壓縮css文件;
• gulp-concat: 合并文件;
• gulp-autoprefixer: 自動(dòng)處理瀏覽器前綴, 如添加 -webkit- ;
• gulp-uglify: 壓縮js文件;
• gulp-clean: 進(jìn)行多余文件的清理;
• gulp-imagemin: 壓縮圖片;
• gulp-css-spriter: 用于合成css雪碧圖;
• gulp-htmlmin: 壓縮html;

輔助插件

browser-sync

Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html算利、js册踩、css、sass笔时、less等）并自動(dòng)刷新頁(yè)面棍好。

gulp-load-plugins

顧名思義，本插件的功能就是幫你自動(dòng)require你在package.json中聲明的依賴允耿。只要一句var $ = require('gulp-load-plugins')()借笙，則package.json中聲明的gulp-或gulp.開頭的插件就會(huì)自動(dòng)被放在變量$下面。如$.util就等于require('gulp-util')较锡。

gulp-if

這個(gè)插件的功能也很簡(jiǎn)單业稼，可以條件性的添加stream，如.pipe($.if(flag, action1()))蚂蕴，則只會(huì)在flag變量為true時(shí)才會(huì)將action1()添加到stream中去低散。

gulp-filter

gulp-filter可以把stream里的文件根據(jù)一定的規(guī)則進(jìn)行篩選過(guò)濾。比如gulp.src中傳入匹配符匹配了很多文件骡楼，可以把這些文件pipe給gulp-filter作二次篩選熔号，如gulp.src('/.js').pipe($.filter(/a/.js))，本來(lái)選中了所有子文件下的js文件鸟整，經(jīng)過(guò)篩選后變成名為a的子文件夾下的js文件引镊。

gulp-plumber

這個(gè)插件的作用簡(jiǎn)單來(lái)說(shuō)就是一旦pipe中的某一steam報(bào)錯(cuò)了，保證下面的steam還繼續(xù)執(zhí)行篮条。因?yàn)閜ipe默認(rèn)的onerror函數(shù)會(huì)把剩下的stream給unpipe掉弟头，這個(gè)插件阻止了這種行為。

gulp-header

這個(gè)工具用來(lái)在壓縮后的JS涉茧、CSS文件中添加頭部注釋赴恨，你可以包含任意想要的信息，通常就是作者伴栓、描述伦连、版本號(hào)、license等钳垮。

gulp-order

gulp-order可以指定文件在stream中的執(zhí)行順序除师，例如本例中css合并時(shí)，可以指定合并后css文件的前后順序扔枫，防止前面的樣式被后面的覆蓋。

gulp-replace

在項(xiàng)目中這個(gè)插件還是挺有用的锹安，可以批量替換字符串短荐，并且支持使用正則替換倚舀。

gulp-print

這個(gè)插件的作用很簡(jiǎn)單，打印出stream里面的所有文件名忍宋，通常調(diào)試的時(shí)候比較需要痕貌。

gulp-rename

該插件可以對(duì)文件進(jìn)行重新命名。

其他Node.js模塊簡(jiǎn)介

yargs

yargs是Node中處理命令行參數(shù)的通用解決方案糠排。只要一句代碼var args = require('yargs').argv;就可以讓命令行的參數(shù)都放在變量args上舵稠，非常方便。它可以處理的參數(shù)類型也是多種多樣的：

單字符的簡(jiǎn)單參數(shù)入宦，如傳入-m=5或-m 5哺徊，則可得到args.m = 5。
多字符參數(shù)（必須使用雙連字符）乾闰，如傳入--lang=en或--lang en落追，則可得到args.lang = en。
不帶值的參數(shù)涯肩，如傳入--mock轿钠，則會(huì)被認(rèn)為是布爾類型的參數(shù)，可得到args.mock = true病苗。
除此之外疗垛，還支持很多其他類型的傳參方式，具體可參考它的文檔硫朦。

fs

fs是Node的文件系統(tǒng)模塊贷腕，所有的方法都有異步和同步的形式。vGulp主要使用fs模塊對(duì)文件進(jìn)行判斷存在和讀取操作阵幸。

path

path模塊用于對(duì)路徑進(jìn)行操作花履，如：

path.join([path1][, path2][, ...])

用于連接路徑。該方法的主要用途在于挚赊，會(huì)正確使用當(dāng)前系統(tǒng)的路徑分隔符诡壁，Unix系統(tǒng)是"/"，Windows系統(tǒng)是""荠割。

path.dirname(p)

返回路徑中代表文件夾的部分妹卿。

path.basename(p[, ext])

返回路徑中的最后一部分。

path.extname(p)

返回路徑中文件的后綴名蔑鹦，即路徑中最后一個(gè)'.'之后的部分夺克。如果一個(gè)路徑中并不包含'.'或該路徑只包含一個(gè)'.' 且這個(gè)'.'為路徑的第一個(gè)字符，則此命令返回空字符串嚎朽。

var path = require('path'),
    file = 'D:/git/vGulp/test.js';

console.log(path.join('/hi', 'test', '2s/1s', 'tab', '..'));    // \hi\test\2s\1s
console.log(__dirname);             // D:\git\vGulp
console.log(path.dirname(file));    // D:/git/vGulp
console.log(path.basename(file));   // test.js
console.log(path.extname(file));    // .js

補(bǔ)充

待改進(jìn)

• 配置好像有點(diǎn)繁瑣(自我感覺)
• 沒(méi)有進(jìn)行md5命名和尋找更好的路徑替換方式等
• Gulp 4.0好像快來(lái)了

更多

關(guān)于node的更多內(nèi)容請(qǐng)參考官方文檔铺纽。

Gulp中文網(wǎng)

參考內(nèi)容：

常用gulp插件介紹

JGulp:利用Gulp 配置的前端項(xiàng)目自動(dòng)化工作流