前端資源多個產品整站一鍵打包&包版本管理（四）—— js&css文件文件打包並生成哈希後綴，自動寫入路徑、解決資源緩存問題。

問題：

當咱們版本更新的時候，咱們都要清理緩存的js跟css，如何使得在網頁中不須要手動清理呢？

答案：

生成帶有哈希後綴的js跟css文件

 

一、文件路徑

 

 

路徑中的conf.js 是用於放置全局打包的公共方法的、

conf.team.json 則是用於放置 team 這個項目的打包路徑 、

gulpfile.team.js 用於寫 team 這個項目的打包、

打包前的文件放在build中、打包後的文件放在dist中

 

 

總的打包任務在webapp 根目錄下

 

 

 

 爲何要這樣放置目錄，請看 gulp分流

 

 

 

二、咱們在conf.team.json 裏面配置 css 裏面的user 文件夾

 

 

{
  "cssUser":[
    "./build/team/stylesheets/user/**/*.css",
    "./build/team/stylesheets/user/*.css"
  ]
}

 

 

 

 有人會問：爲何使用"./build/team...  而不是使用 "./team 呢 咱們能夠看到 雖然 gulpfile.team.js  跟team 文件夾是同一級目錄的，

可是咱們最終打包執行的文件是 gulpfile.js ,由 gulpfile.js  內部引用 gulpfile.team.js

而 gulpfile.js跟 build在同一個目錄 在webapp目錄下的

 

 

所以咱們在引用路徑的時候，一切以 gulpfile.js 爲主

 

三、打包 css 文件

 

下面實在 gulpfile.team.js 裏面引入所須要的工具 下面工具咱們將會一一講解

/**
 * Created by 何Mickey on 11/7/2016.
 */
"use strict";
const fs = require('fs');
const gulp = require('gulp');
const clean = require('gulp-clean');
const pump = require('pump');
const del = require('del');
const path = require('path');
const concat = require('gulp-concat');
const modify = require('gulp-modify');
const uglifyjs = require('uglify-js');
const minifier = require('gulp-uglify/minifier');
const less = require('gulp-less');
const cleanCSS = require('gulp-clean-css');
const rev = require('gulp-rev');
const sort = require('gulp-sort');
const sourcemaps = require('gulp-sourcemaps');
const csscomb = require('gulp-csscomb');
const rename = require('gulp-rename');
const strip = require('gulp-strip-comments');

const conf = require('./conf/conf.js');  //引入公共的函數
const jsonConf = require('./conf/conf.team.json');   //引入打包路徑

 

gulp.task('css-team-user',['less-team'],(cb) => {
    //清除上一版本的殘留
    del(['./dist/team/stylesheets/team-user-*.css']).then(paths => {  //del插件能夠刪除給定連接的文件，這裏咱們要刪除上一次的哈希文件，
        pump([                                                        //若是不刪除，在下一次生成哈希文件的時候，會在原來的基礎上追加後綴，這是咱們不但願看到的
            gulp.src(jsonConf.cssUser),
            modify({
                fileModifier: conf.clearCSSCharset  
            }),
            csscomb(),                  //gulp-csscomb 插件用於整理css格式
            cleanCSS(),                //gulp-clean-css用於壓縮css文件 
            concat('team-user.css'),   //壓縮到team-user.css文件裏面
            gulp.dest('./dist/team/stylesheets/'),  //把壓縮好的文件放在改目錄下
        ],cb);
    });
});

在webapp目錄下執行

gulp css-team-user

就會在

生成一個打包好的css文件

 

 

四、生成帶哈希後綴的css文件

 

這裏用到gulp-rev 插件，用於生成帶哈希後綴的文件 並把文件名寫入 json文件

 

gulp.task('team-resource',['css-team-user'],cb => {
    del(['./dist/team/manifest.json']).then(paths => {
        pump([
            gulp.src([
                './dist/team/stylesheets/*.css'
            ], {base: './dist/team'}),
            rev(),  //生成帶哈希後綴的文件
            gulp.dest('./dist/team'),
            rev.manifest('./dist/team/manifest.json', {  //並把源文件路徑 和 哈希文件路徑 以屬性值的方式寫在 manifest.json 裏面
                base: './dist/team',
                merge: false
            }),
            gulp.dest('./dist/team'),
        ], cb);
    });
});

 

因而咱們就能夠看到

成功生成了一個哈希文件

而且生成了一個manifest.json 在目錄下，咱們打開該文件 裏面有：

 

{
  "javascripts/team-user.js": "javascripts/team-user-201ef04fd5.js",
}

 

這時 任務完成了？已經生成了哈希後綴的文件了，可是事情還沒結束，咱們還能作得更好，若是咱們每次都要把生成後的哈希值在代碼的資源引入裏面修改，會很麻煩

並且線上打包也不容許咱們這樣子作，那咱們說好的一鍵打包呢？ 接下來就是咱們要作的了：

 

 五、把帶哈希後綴的文件連接寫入文件

 

let manifest = null;
let loadTeamMainfest = () => {
    if(!manifest) manifest = require('../dist/team/manifest.json');  //引入manifest.json 文件裏面的屬性值對 
};

 引入對象

 

gulp.task('build-team',['team-resource'],cb => {
    //須要等待文件生成後再load
    loadTeamMainfest(); //
    let kv = {};
    for(let key of Object.keys(manifest)){
        kv[key] = '/dist/team/'+manifest[key];
    }
    let cssTeamUser = `<link type="text/css" rel="stylesheet" href="${kv['stylesheets/team-user.css']}">\n`
        
    fs.writeFile('./WEB-INF/templates/team/common/link/css_min.vm',cssTeamUser,'utf8');
    
});

 

這樣咱們就能夠打開

'./WEB-INF/templates/team/common/link/css_min.vm' 

<link type="text/css" rel="stylesheet" href="/dist/team/stylesheets/team-user-a1a05e86f5.css">

 

因而就成功滴引入了帶有哈希後綴的資源文件了、今後資源緩存都是浮雲了~其實這個方法在線上仍是會有問題的，在使用js帶哈希的文件的時候，一般一個網站的資源要部署到不一樣的機器上，而js的打包是一個不穩定的打包，這樣的版本會由於部署時間差，帶來困擾。過幾天，我會給你們帶來另外一個帶哈希的後綴的打包方法~~若有不對之處，歡迎指出~~喵~~夜深了、洗洗睡睡、敷面膜吧~~~