使用gulp解决Web项目中静态资源版本更新与缓存

现在大部分项目还没做到完全的静态分离，想做到完全静态分离，后端和前端人员配比也相差不大。对于中小型公司，一般都前端工程师做出静态页面和相应的动画效果，页面的渲染还都是由后端工程师完成。项目打包也都是由后端工程师完成。

在版本更新的时候，涉及静态资源的更新经常会由于浏览器缓存、导致显示不正常。解决这个问题的方法是每次有静态资源更新就加上版本号，让浏览器每次都去加载最新的文件。如何更优雅的加版本号请参见文末链接。

解决思路：

这次我主要是基于原有项目结构，来解决静态资源版本更新。

现在的项目前端数据渲染主要采用 JSP 和 Velocity模板引擎实现，项目打包使用Maven。
刚开始查了前端打包工具资料、Maven打包静态文件相关资料。不过没找到合适的解决方案，在找资料的过程中，我有了一点思路，因为目前项目打包是基于Maven，为了保持原有的打包流程，必定要通过Maven插件去完成。目前前端打包工具已经非常成熟了，所以不会自己去写相关Maven插件去处理静态文件。要通过Maven插件将前端打包工具集成到 Maven打包流程中。

按着这个思路，后面找到了适合目前的解决方案：

Maven + gulp + frontend-maven-plugin

在不影响原来项目的结构前提下，一个命令完成静态资源的版本更新。

clean package frontend:gulp

实现思路：

具体实现：

1. 新建Maven项目

列出几个文件用于打包后对比

account_index.jsp

<%@ 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>

插件配置好后：