gulp自動化打包及靜態文件自動添加版本號

時間 2019-12-08

標籤 gulp 自動化打包靜態文件自動添加本號欄目 JavaScript 简体版

原文原文鏈接

前端自動化打包發佈已經是一種常態，尤爲在移動端，測試過程當中靜態資源的緩存是件很頭疼的事情，有時候明明處理的bug測試仍是存在，其實就是緩存惹的禍，手機不比pc瀏覽器，清理緩存仍是有點麻煩的。因此自動化實現靜態資源的版本更新纔是正道。javascript

實際開發過程當中，咱們經常使用到的功能包括：css

一、目標路徑的清除；html

二、靜態資源複製到目標路徑；前端

三、css文件的合併與壓縮；java

四、js文件的合併與壓縮；node

五、根據文件的變化添加版本號；npm

第一、二、三、4幾個功能卻是很好解決，今天主要說說gulp實現靜態資源自動添加版本號；json

搜了很多資料，發現都不是想要的，我但願實現的效果是：gulp

<script type="text/javascript" src="../../scripts/app_common.js?v=51921f3"></script>

可是大部分插件實現的效果相似下面，並且看起來很麻煩瀏覽器

<script type="text/javascript" src="../../scripts/app_common-51921f3.js"></script>

這樣會致使一個問題，每次都會生成新的文件，並且必須同時修改html的引用。

下面說說個人解決方案：

這是目錄結構，不一樣的結構可能在處理上會有些不一樣。

用到的gulp插件是：gulp-asset-rev

先下載插件： npm install --save-dev gulp-asset-rev

Example:

var gulp = require('gulp');
var assetRev = require('gulp-asset-rev');
 
gulp.task('rev',['revCss'],function() {
    gulp.src("./test/test.html")
        .pipe(assetRev())
        .pipe(gulp.dest('./dest'));
});
 
gulp.task('revCss',function () {
    return gulp.src('./test/styles/test.css')
        .pipe(assetRev())
        .pipe(gulp.dest('./dest/styles/'))
});
gulp.task('default',['rev']);

使用前：

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
  <link rel="stylesheet" href="./styles/test.css" type="text/css" />
</head>
<body>
    <div>
        <img src="./images/test.png" />
    </div>
    <script src="./scripts/test.js" type="text/javascript"></script> 
</body>
</html>

使用後：

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="./styles/test_0ede2cf.css" type="text/css" />
</head>
<body>
    <div>
        <img src="./images/test_25cf2b4.png" />
    </div>
    <script src="./scripts/test_8ced4e6.js" type="text/javascript"></script> 
</body>
</html>

很顯然它把整個文件名都給改了，不符合咱們以前只在文件後面添加版本號參數的需求。咱們能夠在源文件中作點手腳。

找到node_modules --> gulp-assets-rev -->index.js 修改成以下代碼：

var verStr = (options.verConnecter || "") + md5;
    src=src+"?v="+verStr;

實際上MD5人家都已經算好了，最後只是拼湊了顯示方式，因此咱們能夠按照本身的需求去組合就好了。so easy~

完整配置以下：

package.json

{
  "name": "StagingFinancial",
  "version": "0.0.1",
  "description": "Pages for Staging Financial App",
  "devDependencies": {
    "browser-sync": "*",
    "del": "*",
    "gulp": "*",
    "gulp-asset-rev": "*",
    "gulp-concat": "*",
    "gulp-if": "*",
    "gulp-jshint": "*",
    "gulp-load-plugins": "*",
    "gulp-minify-css": "^*",
    "gulp-minify-html": "*",
    "gulp-sass": "*",
    "gulp-size": "*",
    "gulp-sourcemaps": "*",
    "gulp-uglify": "*",
    "gulp-useref": "*",
    "run-sequence": "*"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "private": true
}

都是些經常使用的插件，gulp總共就5個API接口，可是插件是異常強大，可根據需求本身配置。

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var assetRev = require('gulp-asset-rev');

function gulpScripts(app_name) {
    return gulp.src([app_name + '/**/*.js']) //源文件下的全部js
        .pipe(assetRev())                    //配置版本號
        .pipe($.uglify())                    //進行壓縮，若是須要合併也可加上合併的代碼
        .pipe(gulp.dest(app_name + "_dist"));//複製到目標文件路徑
}

function gulpStyles(app_name) {
    return gulp.src([app_name + '/**/*.css'])
        .pipe(assetRev())
        .pipe($.minifyCss())
        .pipe(gulp.dest(app_name + "_dist"));
}

function gulpImages(app_name) {
    return gulp.src([app_name + '/**/images/*']) 
        .pipe(gulp.dest(app_name + "_dist"));   //複製全部圖片到目標文件夾
}

function gulpRevHtml(app_name) {
    gulp.src([app_name + '/*.html', app_name + '/**/*.html'])   //源文件下面是全部html
        .pipe(assetRev())                                       //配置引用的js和css文件，須要的話也能夠用minifyHtml壓縮html文件
        .pipe(gulp.dest(app_name + '_dist'));                   //打包到目標文件夾路徑下面
}

gulp.task('app_scripts', function(){
    gulpScripts("app");
});
gulp.task('app_styles', function(){
    gulpStyles("app");
});
gulp.task('app_images',function(){
     gulpImages("app");
});
gulp.task('app_rev', ['app_styles', 'app_scripts'], function(){
    gulpRevHtml("app");
});
gulp.task('clean', del.bind(null, ['app_dist'], {
    force: true
}));
gulp.task("beike", function() {
    runSequence('clean', ["app_images", "app_rev"]);
});

由於同一個目錄下有別的項目，因此這裏寫成了函數，輸入不一樣名稱打包到不一樣目標文件。

結果就是：

打包後引用的靜態資源文件分別以下，若是修改了某個文件，參數會發生變化，若是沒有修改，則不發生變化：

<link rel="stylesheet" type="text/css" href="../../styles/common.css?v=a8aacfb">

<script type="text/javascript" src="../../scripts/app_common.js?v=51921f3"></script>

background:url(../images/none.png?v=8f204d4)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。