前端自動化構建工具vGulp

時間 2019-12-05

原文原文鏈接

Github地址：https://github.com/Alvin-Liu/...css

開始以前

關於Gulp的介紹網上有許多，完整的Gulp自動化工做流配置也很多，但或多或少有不讓人滿意的地方，加上項目的須要，因而本身便開始嘗試寫一個本身的前端自動化工做流。項目需求不一樣，配置確定有些許區別，因此不能保證vGulp能用於你的項目中。本文只作參考，但願能爲你提供一些幫助，具體的配置請根據實際狀況調整。vGulp須要打磨之處還有許多，歡迎各路大神指正。html

關於vGulp

vGulp基於Gulp 3.9.1開發而成，用於處理前端項目文件的編譯、壓縮、合併、打包工做。HTML使用ejs模板編譯而成，可根據自定義的語言包和命令編譯成不一樣語言的HTML文件；css使用sass預處理編譯而成，自動添加-webkit-、-moz-、-ms-等前綴；JS沒有作過多處理，能夠根據我的須要在gulpfile.js文件中添加JSLint或ESLint等。前端

什麼狀況下可使用vGulp:node

F5鍵壞了，手指不夠長，懶...git
Apaphe等環境下修改文件，找不到合適的自動刷新工具github
開發多語言版本的網站頁面等web

vGulp使用方法

1.安裝Node.js,安裝Gulp（Node.js安裝方法請自行搜索，Gulp入門）：npm

$ npm install --global gulp        // 全局安裝
$ npm install --save-dev gulp    // 做爲項目的開發依賴

2.克隆或者下載本項目，github地址：https://github.com/Alvin-Liu/vGulp：json

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

3.安裝模塊依賴：gulp

npm install

4.根據須要簡單配置本身的config.json，示例代碼：

{
    "project" : "vGulp",    // 項目名   
    "src": {    // 源文件目錄
        "ejs": "src/ejs", 
        "sass": "src/sass",
        "images": "src/images",
        "js": "src/js",
        "css": "src/css", 
        "source": "src/source",     //  其餘文件，如視頻，音樂，字體等
        "data": "language/data.json"     // 語言包路徑
    },
    "dist": {    // 打包後文件目錄
        "html": "html",
        "js": "static/js",
        "css": "static/css",
        "images": "static/images",
        "source": "static/source"
    },
    "localserver" : {    // 本地服務器
        "baseDir" : "src",    //    網站根目錄
        "port" : "8081",    //  端口
        "proxy": false,        //  時候啓用代理
        "target": "127.0.0.1"    // 代理地址
    },
    "lang":["zh","en"],        // 語言種類，HTML代碼將編譯到對應的文件夾中
    "data_use": 1,            // 指定data.json文件用那一種方式,目前可選0或者1,請看注意事項
    "displayInfo": false,    // 是否啓用文件頭部追加內容
    "pkg": {    // 追加內容模板請在gulpfile.js中修改
        "author":"",        
        "description":"",
        "version":"1.0.0",
        "homepage":"#",
        "license":""
    },
    "replaceWord": {    // 全局關鍵字替換
        "html": {
            "origin": "../",
            "dist": "../../static/"
        },
        "js": {
            "origin": "",
            "dist": ""
        },
        "css": {
            "origin": "",
            "dist": ""
        }
    },
    "concatCssFiles": {    // css合併，暫時只支持一個
        "filename": "init.min.css",        // 合併後的文件名
        "folder": "common",        // 合併該文件夾中的內容
        "files": ["init.css","header.css"]    //  指定合併後的文件的前後順序
    },
    "concatJsFiles": {    // js合併
        "filename": "global.min.js",
        "folder": "common",
        "files": ["b.js","a.js"]
    }      
}

5.根據須要修改gulpfile.js(請儘可能熟悉vGulp以後再嘗試);

6.執行gulp任務：

gulp help   // gulp參數說明
gulp        // 開發，添加命令 --lang= 能夠指定語言，例：gulp --lang=en
gulp build  // 打包
gulp ejs    // ejs模板編譯
gulp sass   // sass編譯
gulp js     // js合併
gulp clean  // 清理無用文件
gulp watch  // 監聽文件改變

特別說明

1.在命令後添加 --lang=en 或者 --lang= 指定語言版本，能夠執行該語言對應的命令操做，如：

gulp build --lang=en  // 只會打包en語言下的HTML文件

2.多語言時,有兩種方法應用頁面數據,根據我的喜歡在config.json中配置data_use爲0或者1;

data_use爲0時，一個語言對應一個文件夾，且一個頁面對應一個文件夾中的一個文件，如：index.ejs的數據對應index.json。使用該方式時，請先修改data文件的引用路徑爲 language ,不要指定具體的文件名;
data_use爲1時(默認),全部文件對應同一個json文件，config中data.json文件的引用指定到具體的文件名。

3.多語言時,同一個頁面因爲字體長度等緣由顯示會有所差異，此時能夠另外引入單獨的針對該文件的css代碼，全部ejs頁面中均可以引用_lang這一全局變量，進行指定語言引入指定內容，如參考代碼中的內容：

<%# 只有當語言爲'zh'時,引入文件zh.css %>
<% if(_lang='zh'){ %>    
    <%- include('extra/zh.css') %>
<% } %>

<br/>

若是瞭解Gulp或者只是須要一款刷新工具，下面內容能夠忽略

vGulp 插件介紹

主要插件

如下插件因爲使用頻率較高且文檔較多，使用簡單，固僅作列表介紹(畢竟這篇文檔主要目的不是用於介紹插件的，是吧):

gulp-ejs: 編譯ejs文件（項目使用的是ejs，使用其餘請自行更換）;
gulp-data: 配合gulp-ejs等使用，用於引入文件數據，如json文件等;
gulp-sass: 編譯sass;
gulp-clean-css: 壓縮css文件;
gulp-concat: 合併文件;
gulp-autoprefixer: 自動處理瀏覽器前綴, 如添加 -webkit- ;
gulp-uglify: 壓縮js文件;
gulp-clean: 進行多餘文件的清理;
gulp-imagemin: 壓縮圖片;
gulp-css-spriter: 用於合成css雪碧圖;
gulp-htmlmin: 壓縮html;

輔助插件

browser-sync

Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。

gulp-load-plugins

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

gulp-if

這個插件的功能也很簡單，能夠條件性的添加stream，如.pipe($.if(flag, action1()))，則只會在flag變量爲true時纔會將action1()添加到stream中去。

gulp-filter

gulp-filter能夠把stream裏的文件根據必定的規則進行篩選過濾。好比gulp.src中傳入匹配符匹配了不少文件，能夠把這些文件pipe給gulp-filter做二次篩選，如gulp.src('**/*.js').pipe($.filter(**/a/*.js))，原本選中了全部子文件下的js文件，通過篩選後變成名爲a的子文件夾下的js文件。

gulp-plumber

這個插件的做用簡單來講就是一旦pipe中的某一steam報錯了，保證下面的steam還繼續執行。由於pipe默認的onerror函數會把剩下的stream給unpipe掉，這個插件阻止了這種行爲。

gulp-header

這個工具用來在壓縮後的JS、CSS文件中添加頭部註釋，你能夠包含任意想要的信息，一般就是做者、描述、版本號、license等。

gulp-order

gulp-order能夠指定文件在stream中的執行順序，例如本例中css合併時，能夠指定合併後css文件的先後順序，防止前面的樣式被後面的覆蓋。

gulp-replace

在項目中這個插件仍是挺有用的，能夠批量替換字符串，而且支持使用正則替換。

gulp-print

這個插件的做用很簡單，打印出stream裏面的全部文件名，一般調試的時候比較須要。

gulp-rename

該插件能夠對文件進行從新命名。

其餘Node.js模塊簡介

yargs

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

單字符的簡單參數，如傳入-m=5或-m 5，則可獲得args.m = 5。
多字符參數（必須使用雙連字符），如傳入--lang=en或--lang en，則可獲得args.lang = en。
不帶值的參數，如傳入--mock，則會被認爲是布爾類型的參數，可獲得args.mock = true。
除此以外，還支持不少其餘類型的傳參方式，具體可參考它的文檔。

fs

fs是Node的文件系統模塊，全部的方法都有異步和同步的形式。vGulp主要使用fs模塊對文件進行判斷存在和讀取操做。

path

path模塊用於對路徑進行操做，如：

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

用於鏈接路徑。該方法的主要用途在於，會正確使用當前系統的路徑分隔符，Unix系統是"/"，Windows系統是""。

path.dirname(p)

返回路徑中表明文件夾的部分。

path.basename(p[, ext])

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

path.extname(p)

返回路徑中文件的後綴名，即路徑中最後一個'.'以後的部分。若是一個路徑中並不包含'.'或該路徑只包含一個'.' 且這個'.'爲路徑的第一個字符，則此命令返回空字符串。

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