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. ZOJ1608 Two Circles and a Rectangle

    Time Limit: 2 Seconds      Memory Limit: 65536 KB Give you two circles and a rectangle, your task is ...

  2. nvarchar与varchar的区别

    原文发布时间为:2009-08-05 -- 来源于本人的百度文章 [由搬家工具导入] 1、通俗一點就是varchar適合輸入英文和數字,nvarchar一般用做中文或其它語言的輸入,這樣到別的語系不會 ...

  3. IIC知识

    任何一个微处理器都要与一定数量的部件和外围设备连接,但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接,那么连线将会错综复杂,甚至难以实现.为了简化硬件电路设计.简化系统结构,常用一组线路 ...

  4. Caps_Locl exchang Esc

    vim ~/.Xmodmap  1 remove Lock = Caps_Lock                                          2 keysym Escape = ...

  5. Selenium2+python自动化(学习笔记2)

    from selenium import webdriverdriver = webdriver.Ie()driver.get=("http://www.baidu.com")dr ...

  6. /* Dr黄的技术博客开通啦 */

    以前懒得写技术日志, 现在终于发现重要性.. mark一下这个里程碑.

  7. 转载自——Json.Net如何在序列化之前修改属性值

    今天写一个Json.net比较偏门的用法,也许你很久都用不到,也许你明天就能派上用场. 我们都知道 Json.net 序列话的用法 Test test = new Test() { A = " ...

  8. BZOJ4017 小Q的无敌异或(位运算)

    题目链接 小Q的无敌异或 好久之前做的这道题了……参照了别人的博客……还是没有全懂. 第一个问题维护个前缀就好了,第二个问题还要用树状数组维护…… #include <bits/stdc++.h ...

  9. 通用mapper的框架

    这两个框架都是一个大神写的.用来做单表的增删改查,爽爽的. 但是复杂的查询还不知道如何用,所以我还按传统的方式 写 service maperr ,写SQL来处理复杂查询,与多表的查询.  它的复杂查 ...

  10. Factory Method 和AbstractFactory

    对应慕课视频的连接:https://www.imooc.com/video/5316 1,工厂模式的应用场景 有一组类似的对象需要被创建 在编码时不能预见需要被创建哪种类的实例 在系统需要考虑扩展性的 ...