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. 洛谷 [P3620] 数据备份

    贪心神题 首先我们发现一个显然的贪心策略,连接相邻两个写字楼总是更优. 所以本题就变成了数轴上一堆点,要选 k 个彼此不相邻的区间,使得区间长度最小 对于 10000 的数据来说,我们可以用 DP 解 ...

  2. mysql查询练习题

    建库建表 a.建立一个公司数据库(gongsi)    CREATE DATABASE gongsi b.建立一张部门表(部门编号b_id,部门名称b_name) ,             其中b_ ...

  3. Ansible进阶之企业级应用

    1.环境 cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 ...

  4. 2016北京集训测试赛(十六)Problem C: ball

    Solution 这是一道好题. 考虑球体的体积是怎么计算的: 我们令\(f_k(r)\)表示\(x\)维单位球的体积, 则 \[ f_k(1) = \int_{-1}^1 f_{k - 1}(\sq ...

  5. Spring MVC通过Pageable对象和PageableDefault注解获取分页信息(MongoDB通过Pageable来操作分页)

    说明:Pageable同时也能用于操作MongoDB的分页. PageableSpring Data库中定义的一个接口,该接口是所有分页相关信息的一个抽象,通过该接口,我们可以得到和分页相关所有信息( ...

  6. Windows 10系统出现:“出现系统还原使用的卷影复制服务无法运行...”的问题解决

    在服务中是:Volume Shadow Copy和Microsoft Software Shadow Copy Provider这两项.把它开启.

  7. 双网卡环境导致Oracle连接异常

    现在就是流行向最高水平看齐,这次项目的部署,好好的SQL Server扔了(有正版授权的企业版,神啊...),逢人就夸:“俺们那上的可是最顶级的Oracle Database System!”.看了看 ...

  8. VS2010中打开VS2012项目的方法

    VS2012中对C#的支持度非常好,不管是编写方便程度(不需要插件就能高亮代码及代码自动提示功能),还对MFC的一些功能优化很多. 修改两个工程文件就把VS2012的项目移植到VS2010中去的方法如 ...

  9. 基于django的网站开发一基础项目配置

    首先确认电脑上已经安装好了python和django,我的python版本是2.7.13,django版本是1.10.2.数据库我使用的是mysql,版本是5.7.17,我是windows7系统,用的 ...

  10. (转)python request用法

    强烈推荐!requests官方文档已有了中文版,请见http://cn.python-requests.org/zh_CN/latest/ requests是python的一个HTTP客户端库,跟ur ...