gulp 静态资源版本控制
package.json
{
"name": "gulp",
"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
}
gulpfile.js
/**
* Created by efric.hu on 2016/11/4.
*/
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"]);
});
所有项目文件定义在app文件夹下面,自动生成app_dist文件夹为实际添加版本后的项目文件
注意需要修改一个node_modules文件
node_modules --> gulp-assets-rev -->index.js
var verStr = (options.verConnecter || "ef-") + md5;
src = src + "?v=" + verStr;
// src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
gulp 静态资源版本控制的更多相关文章
- Gulp:静态资源(css,js)版本控制
为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录 ...
- SpringBoot2.0实现静态资源版本控制
写在最前面 犹记毕业第一年时,公司每次发布完成后,都会在一个群里通知[版本更新,各部门清理缓存,有问题及时反馈]之类的话.归根结底就是资源缓存的问题,浏览器会将请求到的静态资源,如JS.CSS等文件缓 ...
- gulp静态资源构建、压缩、版本号添加
公司移动端商城使用前后分离方案,前台nginx静态文件,js使用requirejs模式,使用gulp压缩添加版本号时发现问题, 问题1.在公共的js配置中,引用的路径是写死的,缓存会一直存在. 解决方 ...
- webpack htmlWebpackPlugin 静态资源 版本控制
plugins: [ new webpack.optimize.UglifyJsPlugin({ // 压缩webpack 后生成的代码较长时间,通常推到生产环境中才使用 compress:{ war ...
- spring mvc 静态资源版本控制
spring bean 文件中增加 <bean class="cn.zno.smse.common.context.VersionServletContext">< ...
- gulp之静态资源防缓存处理
最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的 ...
- gulp 自动化构建网站(版本号静态资源)
前言 新的一年啦,感觉总是静不下心,用了一天的时间吧,算是对gulp 这个前端打包工具入门了,自己也写了demo,表示对这个稍微理解了吧, 当然还是有差距的啦,下面讲讲怎么用吧: 如何用 当然先去官网 ...
- SpringMVC+FreeMarker实现静态资源文件自动添加版本号(md5)
近日切换java开发,开始学习springframework.在实现静态资源文件自动计算版本号的实例时,因为不熟悉框架,走了不少弯路,好在最终解决了问题.这里写篇文章记录一下实现,也希望对大家有些用处 ...
- 前端静态资源版本更新与缓存之——gulp自动化添加版本号
公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1 ...
随机推荐
- Date()和new Date()区别
当任意一个普通函数用于创建一类对象时,它就被称作构造函数,或构造器. new操作符来调用一个构造函数时,创建一个空对象obj, 将这个空对象的__proto__成员指向了构造函数对象的prototyp ...
- C#去除字符串的最后一个字符 与 JavaScript去除最后一个字符
原文发布时间为:2009-04-29 -- 来源于本人的百度文章 [由搬家工具导入] 例子: C#.NET中去掉字符串的最后一个逗号 字符串为 (a,b,c,)最后一个逗号即c后面的逗号 答: &qu ...
- MVP MVVM MVC
上一篇得到大家的关注,非常感谢.由于自己对于这些模式的理解也是有限,对于MVC,MVP,MVVM这些模式的比较,是结合自己的理解,一些地方不一定准确,需要的朋友可以参考下 上一篇得到大家的关注,非常感 ...
- 长沙理工校赛I题题解-连续区间的最大公约数
题目来源https://www.nowcoder.com/acm/contest/96/I 解题前们需要先知道几个结论: 首先,gcd是有区单调性的: gcd(L,R)>=gcd(L,R+d) ...
- hdu 4520
小Q系列故事——最佳裁判 Time Limit: 500/200 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total ...
- Codeforces 791D Bear and Tree Jump(树形DP)
题目链接 Bear and Tree Jumps 考虑树形DP.$c(i, j)$表示$i$最少加上多少后能被$j$整除. 在这里我们要算出所有$c(i, k)$的和. 其中$i$代表每个点对的距离, ...
- [Python Debug] SettingWithCopyWarning: A value is trying to be set on a copy of a slice from a DataFrame.
I Got a SettingWithCopyWarning when I ran the following code: tmp=date[date['date'].isnull().values= ...
- Linux下创建和删除用户
在Linux下创建用户和删除用户,必须在root用户下,如果你当前不是用根用户登录,你可以打开终端,输入"su root"命令,再输入根口令,就可以进入root用户模式下,如下所示 ...
- CoreData: 如何预载/导入已有的数据
原文地址:CoreData: 如何预载/导入已有的数据作者:出其东门 在系列教程一中,我们为对象建立了可视化数据模型,运行了快速肮脏测试并勾在一个表视图(table view)中来显示.而在这个教程, ...
- 【Java】List转化为数组
List转化为数组的两种方式: 第一种: List<String> list = new ArrayList<>(); String [] arr = list.toArray ...