摘要：前言這篇文章的主要目的是告訴大家構建工具可以做那些事情大家不必去深入研究這個東西最基本的是有個概念什么是前端構建在平時我們瀏覽一些大型的站點會發現其中的一些經過壓縮去掉了空白符注釋經過了混淆和壓縮一些引用的文件的鏈接會加上奇怪的字串文件例如

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

在平時我們瀏覽一些大型的站點,會發現其中的一些css經過壓縮(去掉了空白符,注釋),js經過了混淆和壓縮.一些引用的文件的鏈接會加上奇怪的字串(文件md5),例如:

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

這部分可以參閱 大公司里怎樣開發和部署前端代碼？

前端部署在經歷的刀耕火種的工人時代(手動)后，迎來了工業時代（自動化工具）。隨著node的出現,以此為基礎的構建工具有代表性的有grunt,gulp,webpack.這些工具主要就是幫我們完成上述的工作.針對目前我們的項目的情況,不需要對這些工具進行太高深的研究,幾個基本的功能就能達到很好的效果.

我在使用了幾種構建工具后,感覺gulp是最好的.之前用過grunt,被它的繁雜的配置文件嚇到了.webpack是最新最火的構建工具,但是這個工具更側重于模塊化和打包,對于我們現在來說不太適用.之后又使用了百度前端的FIS,本想著這個構建工具擁有傻瓜式配置,國內大公司出品,質量有保障的的優點.但是使用之后,發現這個FIS更適用于純前端.最后在經過使用gulp后,發現它基本可以滿足我們現在項目的需求.

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

我們項目的前端目錄結構

  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

這個是我們項目的基本目錄.

在使用過程中,有一個問題之前困擾著我,那就是構建工具基本都是針對純前端的,我們的前端其實是后端框架的模板文件,文件路徑是個很頭疼的問題.這也是我放棄百度的FIS的原因.經過實踐發現gulp這個工具比較靈活,就是開始配置麻煩一些.

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

需要安裝的gulp插件在package.json中,具體安裝過程可以參考 準備步驟

{
  "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的注釋,壓縮行內css等
    "gulp-less": "^3.1.0",                    //less編譯
    "gulp-rev": "^7.1.2",                     //md5
    "gulp-rev-collector": "^1.0.5",           //md5文件關聯
    "gulp-uglify": "^2.0.0",                  //js混淆
    "gulp-useref": "^3.1.0",
    "vinyl-paths": "^2.1.0"
  }
}

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

*/

//dist是生成版本的目標文件夾,就是最終要部署到線上的文件夾
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;
//不用編譯的文件復制到生成環境中
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. 看看變化吧
生成了一個新的dist文件夾,而且里面的文件結構什么的和我們原結構很類似的.那么我們打開生成的文件和原文件對比一下,看看是否達到了效果.比如我們打開文件/simplebootx/Portal/index.html

對應的生產文件/dist/Portal/index.html

我們發現 popModal.css 變成了 popModal-5c7f30ff2b.css,而在對應的css文件中,我們確實找到了popModal-5c7f30ff2b.css,而且這個文件與原文件相比較是經過壓縮的.

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

參考

gulp詳細入門教程

gulp官方

使用gulp構建你的前端項目