文档章节

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

无忌
 无忌
发布于 2017/06/19 21:12
字数 1217
阅读 494
收藏 1

        

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

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

解决思路:

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

现在的项目前端数据渲染主要采用 JSPVelocity模板引擎实现,项目打包使用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>

 插件配置好后:

配置好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

 

© 著作权归作者所有

无忌
粉丝 34
博文 33
码字总数 36090
作品 0
深圳
私信 提问
gulp自动化添加版本号

前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻...

梁宏伟
2016/12/19
527
2
js css等静态文件版本控制,一处配置多处更新.net版【原创】

日常web开发中,我们修改了js、css等静态资源文件后,如果文件名不变的话,客户端浏览并不会及时获取最新的资源文件,这就很尴尬了 怎么办呢? 1.实习生:让客户清除缓存?,No ,客户是爸爸...

sddhome
2018/11/20
0
0
移动端 Web 资源缓存解决方案--ht-candywebcache-android

移动端 Web 资源的本地缓存解决方案,能够拦截 webview 的请求,并优先使用本地缓存静态资源进行响应,以此来对 webview 加载页面性能进行优化。 特点: 协议层拦截请求,透明替换响应 静态资...

WolfCS
2017/05/25
387
0
借用workbox实现离线缓存应用

PS: 这是本人的第一篇文章,如有不对或结构不清晰的地方,望指出,我会尽量去完善,谢谢大家! 什么是workbox,workbox有什么用途,为什么要使用它?在介绍workbox之前,我们来先大致了解一下...

jannesand
03/31
0
0
大公司里怎样开发和部署前端代码?

这是一个非常有趣的 ,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中。 在我的印象中,facebook是这个领域的鼻祖,有兴趣、有梯子的同学...

卟想苌亣
2017/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot 集成MongoDB

一、MongoDB 简介 MongoDB 如今是最流行的 NoSQL 数据库,被广泛应用于各行各业中,很多创业公司数据库选型就直接使用了 MongoDB,但对于大部分公司,使用 MongoDB 的场景是做大规模数据查询...

zw965
15分钟前
10
0
使用 Envoy 和 AdGuard Home 阻挡烦人的广告

> 原文链接:使用 Envoy 和 AdGuard Home 阻挡烦人的广告 通常我们使用网络时,宽带运营商会为我们分配一个 DNS 服务器。这个 DNS 通常是最快的,距离最近的服务器,但会有很多问题,比如: ...

米开朗基杨
48分钟前
14
0
springboot之全局处理异常封装

springboot之全局处理异常封装 简介 在项目中经常出现系统异常的情况,比如NullPointerException等等。如果默认未处理的情况下,springboot会响应默认的错误提示,这样对用户体验不是友好,系...

Purgeyao
59分钟前
22
0
cookie

cookie: n. 饼干;小甜点 为什么会引入Cookie(在客户端保持http状态) 因为http协议是一种无状态协议,web服务器本身不能识别出哪些请求是同一个服务器发送的,浏览器的每一次请求都是独立...

五公里
今天
23
0
PHP常用函数

<?php/** * 获取客户端IP * @return [string] [description] */function getClientIp() { $ip = NULL; if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) { $arr = explode('......

半缘修道半缘君丶
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部