前端構建的初步嘗試

時間 2019-11-06

標籤前端構建初步嘗試简体版

原文原文鏈接

前言

這篇文章的主要目的是告訴你們,構建工具能夠作那些事情.你們沒必要去深刻研究這個東西.最基本的是有個概念.javascript

什麼是前端構建?

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

<link rel="stylesheet" href="/css/popModal-5c7f30ff2b.css" type="text/css" media="all"/>

這樣作有什麼好處呢?壓縮能夠減少文件的體積利於在網絡中傳輸,從而加快網頁的響應.文件加md5戳主要是爲了解決文件更新和瀏覽器緩存的衝突.html

這部分能夠參閱大公司裏怎樣開發和部署前端代碼？前端

什麼是構建工具?

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

gulp

我在使用了幾種構建工具後,感受gulp是最好的.以前用過grunt,被它的繁雜的配置文件嚇到了.webpack是最新最火的構建工具,可是這個工具更側重於模塊化和打包,對於咱們如今來講不太適用.以後又使用了百度前端的FIS,本想着這個構建工具擁有傻瓜式配置,國內大公司出品,質量有保障的的優勢.可是使用以後,發現這個FIS更適用於純前端.最後在通過使用gulp後,發現它基本能夠知足咱們如今項目的需求.node

準備

須要安裝node和gulp,這裏偷懶一下,這個安裝教程太多了,網上一搜一大把,能夠參考這個gulp安裝便可webpack

實戰

1. 分析目前前端資源

咱們項目的前端目錄結構git

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

這個是咱們項目的基本目錄.web

在使用過程當中,有一個問題以前困擾着我,那就是構建工具基本都是針對純前端的,咱們的前端實際上是後端框架的模板文件,文件路徑是個很頭疼的問題.這也是我放棄百度的FIS的緣由.通過實踐發現gulp這個工具比較靈活,就是開始配置麻煩一些.json

2. 咱們須要的功能

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"
  }
}

3. gulpfile.js文件編寫

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

*/

//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,//刪除`<script>`的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除`<style`>和`<link>`的type="text/css"
        minifyCSS: true//壓縮頁面CSS
    };
    return gulp.src(src+'/jump.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest(dist));

});
//md5
gulp.task('concat',function() {                                //- 建立一個名爲 concat 的 task
    return gulp.src(s+paths.css)  //- 須要處理的css文件，放到一個字符串數組裏
        .pipe(rev())                                           //- 文件名加MD5後綴
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest(d+'css/'))                              //- 輸出文件本地
        .pipe(rev.manifest())                                  //- 生成一個rev-manifest.json
        .pipe(gulp.dest('./rev'));                            //- 將 rev-manifest.json 保存到 rev 目錄內

});
gulp.task('rev',['concat'],function() {
    return gulp.src(['./rev/*.json', src+'**/*.html'])   //- 讀取 rev-manifest.json 文件以及須要進行css名替換的文件
        .pipe(revCollector())                                  //- 執行文件內css名的替換
        .pipe(gulp.dest(dist));                  //- 替換後的文件輸出的目錄

});
//咱們最後要運行的命令就是`gulp default`;
gulp.task('default', ['copy','compressJs','compressHtml', 'rev']);

4. 開始敲命令吧!

按下鍵盤的 win 鍵 + r鍵,輸入 cmd ,調出命令行工具.

在命令行中輸入 cd D:\xampp\htdocs\gulp (這個是個人項目路徑) ,切換到gulpfile.js所在的文件夾,在命令行中輸入gulp default,此時注意,gulp目錄中是沒有dist這個文件夾的,咱們就是要在dist這個文件夾中生成咱們要的生產版本文件.
命令執行過程:

命令完成後,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對應的生產文件名沒有變化