使用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执行命令：

4. 执行打包

先经过插件安装node执行环境

初次执行经过网络下载

安装成功：
执行打包命令：clean package -Dmaven.test.skip=true frontend:gulp

5.压缩先后对比

account_index.js

global.css

account_index.jsp

总结

本文主要是经过Maven 插件执行gulp，实现对静态资源版本更新，在演示项目当中只实现了静态文件的压缩、静态资源引入版本号处理。gulp功能远远不止这些，后续能够实现对js，css 合并，上传到CDN（七牛云），进一步优化前端资源请求。

frontend-maven-plugin 插件，很是好，已经集成了目前大部分的打包工具，有兴趣能够去试试。

项目地址：https://git.oschina.net/rainwen/java-web-gulp.git

参考资料：前端工程精粹（一）：静态资源版本更新与缓存

===============================================================

后期更新

20170925更新

当css 文件中有格式相似 x-x-12345678.css 时，会致使整个css文件所有替换不成功

a-b-12345678.css，a-b-1234567890.css 也不行

因此最好仍是使用x.x.xxxx.css 命名

gulp-rev-collector 1.2.2