摘要：前言這篇文章的主要目的是告訴大家構(gòu)建工具可以做那些事情大家不必去深入研究這個(gè)東西最基本的是有個(gè)概念什么是前端構(gòu)建在平時(shí)我們?yōu)g覽一些大型的站點(diǎn)會(huì)發(fā)現(xiàn)其中的一些經(jīng)過(guò)壓縮去掉了空白符注釋經(jīng)過(guò)了混淆和壓縮一些引用的文件的鏈接會(huì)加上奇怪的字串文件例如

這篇文章的主要目的是告訴大家,構(gòu)建工具可以做那些事情.大家不必去深入研究這個(gè)東西.最基本的是有個(gè)概念.

在平時(shí)我們?yōu)g覽一些大型的站點(diǎn),會(huì)發(fā)現(xiàn)其中的一些css經(jīng)過(guò)壓縮(去掉了空白符,注釋),js經(jīng)過(guò)了混淆和壓縮.一些引用的文件的鏈接會(huì)加上奇怪的字串(文件md5),例如:

這樣做有什么好處呢?壓縮可以減小文件的體積利于在網(wǎng)絡(luò)中傳輸,從而加快網(wǎng)頁(yè)的響應(yīng).文件加md5戳主要是為了解決文件更新和瀏覽器緩存的沖突.

這部分可以參閱 大公司里怎樣開(kāi)發(fā)和部署前端代碼？

前端部署在經(jīng)歷的刀耕火種的工人時(shí)代(手動(dòng))后，迎來(lái)了工業(yè)時(shí)代（自動(dòng)化工具）。隨著node的出現(xiàn),以此為基礎(chǔ)的構(gòu)建工具有代表性的有g(shù)runt,gulp,webpack.這些工具主要就是幫我們完成上述的工作.針對(duì)目前我們的項(xiàng)目的情況,不需要對(duì)這些工具進(jìn)行太高深的研究,幾個(gè)基本的功能就能達(dá)到很好的效果.

我在使用了幾種構(gòu)建工具后,感覺(jué)gulp是最好的.之前用過(guò)grunt,被它的繁雜的配置文件嚇到了.webpack是最新最火的構(gòu)建工具,但是這個(gè)工具更側(cè)重于模塊化和打包,對(duì)于我們現(xiàn)在來(lái)說(shuō)不太適用.之后又使用了百度前端的FIS,本想著這個(gè)構(gòu)建工具擁有傻瓜式配置,國(guó)內(nèi)大公司出品,質(zhì)量有保障的的優(yōu)點(diǎn).但是使用之后,發(fā)現(xiàn)這個(gè)FIS更適用于純前端.最后在經(jīng)過(guò)使用gulp后,發(fā)現(xiàn)它基本可以滿足我們現(xiàn)在項(xiàng)目的需求.

需要安裝node和gulp,這里偷懶一下,這個(gè)安裝教程太多了,網(wǎng)上一搜一大把,可以參考這個(gè)gulp安裝即可

我們項(xiàng)目的前端目錄結(jié)構(gòu)

  simplebootx/
    --Portal/
      --News/
        index.html
    --Public/
    --css/
      --Archaeol/
        academic.css
      style.css
    --images
    --js
      --wenbobaike
        province.js
      digit.js
    simpleboot/
    head_bt3.html
    scripts.html

這個(gè)是我們項(xiàng)目的基本目錄.

在使用過(guò)程中,有一個(gè)問(wèn)題之前困擾著我,那就是構(gòu)建工具基本都是針對(duì)純前端的,我們的前端其實(shí)是后端框架的模板文件,文件路徑是個(gè)很頭疼的問(wèn)題.這也是我放棄百度的FIS的原因.經(jīng)過(guò)實(shí)踐發(fā)現(xiàn)gulp這個(gè)工具比較靈活,就是開(kāi)始配置麻煩一些.

css,js的壓縮,文件md5戳.

需要安裝的gulp插件在package.json中,具體安裝過(guò)程可以參考 準(zhǔn)備步驟

{
  "name": "test",
  "version": "1.0.0",
  "description": "This is for study gulp project !",
  "homepage": "",
  "repository": "",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "del": "^2.2.2",                          //文件刪除
    "gulp": "^3.9.1",                         //gulp
    "gulp-clean-css": "^2.0.12",              //css壓縮
    "gulp-filter": "^4.0.0",
    "gulp-htmlmin": "^2.0.0",                 //html壓縮,去掉html的注釋,壓縮行內(nèi)css等
    "gulp-less": "^3.1.0",                    //less編譯
    "gulp-rev": "^7.1.2",                     //md5
    "gulp-rev-collector": "^1.0.5",           //md5文件關(guān)聯(lián)
    "gulp-uglify": "^2.0.0",                  //js混淆
    "gulp-useref": "^3.1.0",
    "vinyl-paths": "^2.1.0"
  }
}

/*
  前面的步驟都是定義一些路徑的變量

*/

//dist是生成版本的目標(biāo)文件夾,就是最終要部署到線上的文件夾
var dist = "./dist/";
//src目錄是我們的源代碼
var src = "./simplebootx/";
var static = "Public/";
var paths = {
    tpl:"Portal/**/*.html",
    css:"css/**/*.css",
    images:"images/**.*",
    js:"js/**/*.js",
    lib:{
        boostrap:"simpleboot/**/*.*"
    }
};

/*
  引入要使用的插件
*/
var gulp = require("gulp");
var cleanCSS = require("gulp-clean-css");
var rev = require("gulp-rev");
var revCollector = require("gulp-rev-collector");
var del = require("del");
var vinylPaths = require("vinyl-paths");
var uglify = require("gulp-uglify");
var htmlmin = require("gulp-htmlmin");
var del = require("del");
var s = src + static,
    d = dist + static;
//不用編譯的文件復(fù)制到生成環(huán)境中
gulp.task("copy",function (cb) {
    gulp.src(src+"*.html")
        .pipe(gulp.dest(dist));
    gulp.src(s+paths.images)
        .pipe(gulp.dest(d+"images"));
    gulp.src(s+paths.lib.boostrap)
        .pipe(gulp.dest(d+"simpleboot/"));
});

//壓縮css
gulp.task("compressCss",function(){
    return gulp.src(s+paths.css)
            .pipe(cleanCSS({compatibility: "ie8"}))
            .pipe(gulp.dest(d+"css"));
});
//壓縮js
gulp.task("compressJs",function () {
    return gulp.src(s+paths.js)
            .pipe(uglify())
            .pipe(gulp.dest(d+"js"));

});
//壓縮html
gulp.task("compressHtml",function () {
    var options = {
        removeComments: true,//清除HTML注釋
        removeScriptTypeAttributes: true,//刪除`

命令完成后,dist文件夾:

5. 看看變化吧
生成了一個(gè)新的dist文件夾,而且里面的文件結(jié)構(gòu)什么的和我們?cè)Y(jié)構(gòu)很類似的.那么我們打開(kāi)生成的文件和原文件對(duì)比一下,看看是否達(dá)到了效果.比如我們打開(kāi)文件/simplebootx/Portal/index.html

對(duì)應(yīng)的生產(chǎn)文件/dist/Portal/index.html

我們發(fā)現(xiàn) popModal.css 變成了 popModal-5c7f30ff2b.css,而在對(duì)應(yīng)的css文件中,我們確實(shí)找到了popModal-5c7f30ff2b.css,而且這個(gè)文件與原文件相比較是經(jīng)過(guò)壓縮的.

同理我們可以發(fā)現(xiàn),相關(guān)的js也都經(jīng)過(guò)的壓縮和混淆.
那么效果如何呢?可以打開(kāi)對(duì)應(yīng)的文件,比如/simplebootx/Public/js/calendar.js文件原大小是7k,經(jīng)過(guò)處理后變成了4k,將近縮小了一半.而且文件越大,效果月明顯
其他的就不一一舉例了,可以先自己看demo
一些說(shuō)明
關(guān)于文件md5
構(gòu)建成功了,如何發(fā)布新的文件版本呢?
我們還用/simplebootx/Public/css/popModal.css舉例.在這個(gè)文件中,我們進(jìn)行了一些修改,在第十二行中,我們把
.popModal:after {content:"";position:absolute;border:10px solid transparent}
改成了
.popModal:after {content:"";position:absolute;border:10px solid red}
此時(shí)在生產(chǎn)環(huán)境index.html中引用的popModal.css名字是popModal-5c7f30ff2b.css,wb.css對(duì)應(yīng)的生產(chǎn)文件名是wb-1fe58ce92d.css.經(jīng)過(guò)重新的構(gòu)建后生產(chǎn)環(huán)境中的文件變成了popModal-740872e77c.css,在生產(chǎn)環(huán)境的css文件夾中也生產(chǎn)了新的文件.而且wb.css對(duì)應(yīng)的生產(chǎn)文件名沒(méi)有變化

參考

gulp詳細(xì)入門教程

gulp官方

使用gulp構(gòu)建你的前端項(xiàng)目