使用gulp解決Web項目中靜態資源版本更新與緩存

時間 2019-11-08

標籤使用 gulp 解決 web 項目靜態資源版本更新緩存欄目 JavaScript 简体版

原文原文鏈接

如今大部分項目還沒作到徹底的靜態分離，想作到徹底靜態分離，後端和前端人員配比也相差不大。對於中小型公司，通常都前端工程師作出靜態頁面和相應的動畫效果，頁面的渲染還都是由後端工程師完成。項目打包也都是由後端工程師完成。javascript

在版本更新的時候，涉及靜態資源的更新常常會因爲瀏覽器緩存、致使顯示不正常。解決這個問題的方法是每次有靜態資源更新就加上版本號，讓瀏覽器每次都去加載最新的文件。如何更優雅的加版本號請參見文末連接。css

解決思路：

此次我主要是基於原有項目結構，來解決靜態資源版本更新。html

如今的項目前端數據渲染主要採用 JSP 和 Velocity模板引擎實現，項目打包使用Maven。
剛開始查了前端打包工具資料、Maven打包靜態文件相關資料。不過沒找到合適的解決方案，在找資料的過程當中，我有了一點思路，由於目前項目打包是基於Maven，爲了保持原有的打包流程，一定要經過Maven插件去完成。目前前端打包工具已經很是成熟了，因此不會本身去寫相關Maven插件去處理靜態文件。要經過Maven插件將前端打包工具集成到 Maven打包流程中。前端

按着這個思路，後面找到了適合目前的解決方案：java

Maven + gulp + frontend-maven-pluginnode

在不影響原來項目的結構前提下，一個命令完成靜態資源的版本更新。git

clean package frontend:gulp

實現思路：github

具體實現：

1. 新建Maven項目

列出幾個文件用於打包後對比web

account_index.jsp npm

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    request.setAttribute("root",path);
%>
<html>
<head>
    <title>account index</title>
    <link href="${root}/resources/css/global.css" rel="stylesheet" type="text/css" />
    <link href="${root}/resources/css/account.css" rel="stylesheet" type="text/css" />
    <%@include file="/commons/script.jsp"%>
    <script src="${root}/resources/js/commons/plus/date/WdatePicker.js" type="text/javascript"></script>
    <script src="${root}/resources/js/account/account_index.js" type="text/javascript"></script>
</head>
<body>
account index
</body>
</html>

account_index.js

function init(){
    console.log("account");
}

init();

global.css

body {
    font-size: 30px;
    font-family: Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
    background: url(../images/bg.jpg) no-repeat 50%;
    background-size: cover;
}

2. 將 gulpfile.js、package.json 放到根目錄

gulpfile.js 部分代碼

var gulp = require('gulp'),  //基礎
    runSequence = require('run-sequence'), //順序
    cssver = require('gulp-make-css-url-version'), //
    cssmin = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),//js檢查
    uglify = require('gulp-uglify'), //js壓縮
    concat = require('gulp-concat'),//文件合併
    clean = require('gulp-clean'),//清空文件夾
    rename = require('gulp-rename'),//更改文件名
    rev = require('gulp-rev'),//更改版本名
    filter = require('gulp-filter'),//文件過濾
    zip = require('gulp-zip'), //zip插件
    revCollector = require('gulp-rev-collector');//gulp-rev的插件 ，用於html模板更改引用路徑


var project = 'java-web-gulp-1.0-SNAPSHOT';
var path = {
    target : 'target',
    base : 'target/' + project,
    resources : 'target/' + project + '/resources',
    css: 'target/' + project + '/resources/css',
    js: 'target/' + project + '/resources/js',
    jsp: 'target/' + project + '/WEB-INF/views',
    static_build_path: 'target/build'
};

//省略

//執行
gulp.task('default', function () {
    console.log("start...")
    runSequence(
        ['clean'],
        ['cssmin'],
        ['js'],
        ['rev'],
        ['del'],
        ['copy'],
        ['zip']
    )
});

3. 配置 frontend-maven-plugin 插件，加入到plugins標籤下

<!-- maven gulp插件 -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.4</version>
                <executions>
                    <execution>
                        <id>install-node</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>install-tern</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                    </execution>
                </executions>
                <!-- For reasons unknown, configuration for all executions must be placed at the plugin level!!! -->
                <configuration>
                    <nodeVersion>v4.4.2</nodeVersion>
                    <npmVersion>2.15.0</npmVersion>
                    <!--<installDirectory>target</installDirectory>-->
                    <!--<arguments>install tern</arguments>-->
                    <!--<workingDirectory>target/node</workingDirectory>-->
                </configuration>
            </plugin>

插件配置好後：

配置好Maven執行命令：