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 ...
随机推荐
- POJ1595 Prime Cuts
Prime Cuts Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 11961 Accepted: 4553 Descr ...
- 64位linux 汇编
c源码:testg.c 1 #include<stdio.h> 2 3 #define s ...
- Android 利用工具实现一键自动findViewById功能
在线网站工具 地址:http://android.lineten.net/layout.php
- iOS YYYY 和 yyyy的区别
2017年1月31日 转换后变成 2018年1月31日,相差一年.这是为什么呢? 原因:YYYY 是以周为单位计算的,我们平常计算日期时最好用yyyy,yyyy才是标注的年份 如果一月1日是星期一,星 ...
- 误加all_load引起的程序报错
一.为什么要加-all_load 在64位的mac系统和iOS系统下,链接器有一个bug,会导致只包含有类别的静态库无法使用-ObjC标志来加载文件.解决方法是使用-all_load或者-force_ ...
- 提升开发效率的一款mybatis开发神器
文末附有完整案例的代码内容!! 以前在开发的时候,使用mybatis的时候,经常都需要先配置xml映射文件,然后每条sql操作都需要自己进行手动编写,对于一些复杂的sql这么来操作确实有必要,但是如果 ...
- 伪造服务钓鱼工具Ghost Phisher
伪造服务钓鱼工具Ghost Phisher Ghost Phisher是一款支持有线网络和无线网络的安全审计工具.它通过伪造服务的方式,来收集网络中的有用信息.它不仅可以伪造AP,还可以伪造DNS ...
- 块级元素和行内元素的区别 (block vs. inline)
块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...
- Android Studio +MAT 分析内存泄漏实战
对于内存泄漏,在Android中如果不注意的话,还是很容易出现的,尤其是在Activity中,比较容易出现,下面我就说下自己是如何查找内存泄露的. 首先什么是内存泄漏? 内存泄漏就是一些已经不使用的对 ...
- django博客开发
找一文件夹作为项目文件夹1 django-admin.py startproject mysite建立工程2 cd mysite python manage.py startapp blog 建立第一 ...