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 静态资源版本控制的更多相关文章

  1. Gulp:静态资源(css,js)版本控制

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录 ...

  2. SpringBoot2.0实现静态资源版本控制

    写在最前面 犹记毕业第一年时,公司每次发布完成后,都会在一个群里通知[版本更新,各部门清理缓存,有问题及时反馈]之类的话.归根结底就是资源缓存的问题,浏览器会将请求到的静态资源,如JS.CSS等文件缓 ...

  3. gulp静态资源构建、压缩、版本号添加

    公司移动端商城使用前后分离方案,前台nginx静态文件,js使用requirejs模式,使用gulp压缩添加版本号时发现问题, 问题1.在公共的js配置中,引用的路径是写死的,缓存会一直存在. 解决方 ...

  4. webpack htmlWebpackPlugin 静态资源 版本控制

    plugins: [ new webpack.optimize.UglifyJsPlugin({ // 压缩webpack 后生成的代码较长时间,通常推到生产环境中才使用 compress:{ war ...

  5. spring mvc 静态资源版本控制

    spring bean 文件中增加 <bean class="cn.zno.smse.common.context.VersionServletContext">< ...

  6. gulp之静态资源防缓存处理

    最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的 ...

  7. gulp 自动化构建网站(版本号静态资源)

    前言 新的一年啦,感觉总是静不下心,用了一天的时间吧,算是对gulp 这个前端打包工具入门了,自己也写了demo,表示对这个稍微理解了吧, 当然还是有差距的啦,下面讲讲怎么用吧: 如何用 当然先去官网 ...

  8. SpringMVC+FreeMarker实现静态资源文件自动添加版本号(md5)

    近日切换java开发,开始学习springframework.在实现静态资源文件自动计算版本号的实例时,因为不熟悉框架,走了不少弯路,好在最终解决了问题.这里写篇文章记录一下实现,也希望对大家有些用处 ...

  9. 前端静态资源版本更新与缓存之——gulp自动化添加版本号

    公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1 ...

随机推荐

  1. client、offset、scroll

    1. client 客户区大小 1.1. clientHeight和clientWidth element.clientHeight表示元素可视区域的高度,包括可视区域中元素的 CSS height+ ...

  2. spring rest 请求怎样添加Basic Auth请求頭

    请自行揣摩代码 package com.hudai.platform.manager.util; import java.net.URI; import java.net.URISyntaxExcep ...

  3. js,add script async? loaded ok.

    function loadScript(url, callback){ var script = document.createElement_x("script") script ...

  4. UVA 524 素数环 【dfs/回溯法】

    Description   A ring is composed of n (even number) circles as shown in diagram. Put natural numbers ...

  5. java数据结构和算法10(堆)

    这篇我们说说堆这种数据结构,其实到这里就暂时把java的数据结构告一段落,感觉说的也差不多了,各种常见的数据结构都说到了,其实还有一种数据结构是“图”,然而暂时对图没啥兴趣,等有兴趣的再说:还有排序算 ...

  6. j2ee性能调优之最小化资源压力测试法则

    前面看到有人讲j2ee的性能调优,虽然这块不是自己的专长,但是猪养多了,也忍不住跳出来说几句. 虽然几乎每本讲性能调优的书籍开篇都会提,没必要的情况下就不要做调优,但是我个人还是认为,所有系统在上线前 ...

  7. noip2013/day1/1/转圈游戏

    总时间限制:  10000ms 单个测试点时间限制:  1000ms 内存限制:  128000kB 描述 n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从  ...

  8. 【JSOI2007】文本生成器

    用AC自动机处理所有了解的单词 显然,不能直接算,直接算的话,我们需要大力容斥,复杂度不允许 我们不妨反过来做,我们根据AC自动机处理出所有的不可行解,然后用总数减去即可 计算所有不可行解用dp,\( ...

  9. Codeforces Round #490 (Div. 3)

    感觉现在\(div3\)的题目也不错啊? 或许是我变辣鸡了吧....... 代码戳这里 A. Mishka and Contes 从两边去掉所有\(≤k\)的数,统计剩余个数即可 B. Reversi ...

  10. RequireJS解决代码依赖问题,异步加载js,避免页面失去相应

    RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代码,但其主要目的还是为了代码的模块化.它鼓励在使用脚本时以modul ...