为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源。让客户端可以重新请求资源,而不是从缓存里取。然后html模板里的src也要做相应的修改。当然,这里还有个附加的需要就是,静态资源需要自行优化(压缩合并)。

下面是我gulpfile.js的代码:  

var gulp = require('gulp'),                        //基础库
    clean = require('gulp-clean'),                 //清空文件夹
    minify = require('gulp-minify-css'),           //css压缩
    rename = require('gulp-rename'),               //文件重命名
    rev = require('gulp-rev'),                     //更改版本名
    collector = require('gulp-rev-collector'),     //gulp-rev的插件,用于html文件更改引用路径
    concat = require('gulp-concat'),               //合并多个文件
    notify = require('gulp-notify');               //提示
    
gulp.task('clean',function(){            
    return gulp.src('build',{ read : false})       //src的第二个参数的{read:false},是不读取文件,加快程序。
        .pipe(clean());
})
gulp.task('index',['clean'],function(){
    return gulp.src('app/index.min.html')
        .pipe(rename(function(path){
            path.basename ='index';
            path.extname = ".html";
        }))
        .pipe(gulp.dest('build'))
})

gulp.task('css',['index'],function(cb){
    return gulp.src('app/**/*.css')
        .pipe(minify())
        .pipe(concat('main.css'))
        .pipe(rename(function(path){
            path.basename +='.min';
            path.extname = ".css";
        }))
        .pipe(rev())
        .pipe(gulp.dest('build/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('build/rev'));
    cb();
})

gulp.task('rev',['css'],function(){
    return gulp.src(['build/rev/rev-manifest.json','build/index.html'])
        .pipe(collector({
            replaceReved : true
        }))
        .pipe(gulp.dest('build/'))
        .pipe(notify("success!!!"))
})

我的目录结构:

 

app是原代码目录,build是gulp生成的

gulp之css,js压缩合并加密替换的更多相关文章

  1. ASP.NET MVC 中CSS JS压缩合并 功能的使用方法

    通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...

  2. 【转】asp.net mvc css/js压缩合并 --- combres

    转自:http://www.cnblogs.com/zxktxj/archive/2012/05/30/2526246.html NuGet   网站:http://nuget.codeplex.co ...

  3. CSS, JavaScript 压缩, 美化, 加密, 解密

    CSS, JavaScript 压缩, 美化, 加密, 解密 JS压缩, CSS压缩, javascript compress, js在线压缩,javascript在线压缩,css在线压缩,YUI C ...

  4. RequireJS模块化后JS压缩合并

    使用RequireJS模块化后代码被拆分成多个JS文件了,在部署生产环境需要压缩合并,RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩.r.js非常强大,不但可以压缩js,css, ...

  5. gulp为css,js添加版本号

    由于cdn缓存,更改样式后会有一段时间不生效,解决方法就是给css,js加上版本号效果如下: 1.安装gulp插件 npm install --save-dev gulp-rev (version:9 ...

  6. maven css/js 压缩配置

    <plugin>               <groupId>net.alchim31.maven</groupId>               <art ...

  7. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  8. gulp完成javascript压缩合并,css压缩

    最近需要对项目进行优化,主要是对js的压缩合并和css文件的压缩,查找相关资料之后发现gulp可以实现相关的功能,特此分享一下使用心得. 1.安装gulp gulp是基于Node.js的前端构建工具. ...

  9. 编写gulpfile.js文件:压缩合并css、js

    使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...

随机推荐

  1. html页面显示div源代码:用<xmp></xmp>标签

    html页面显示div源代码:用<xmp></xmp>标签效果还可以.

  2. Unity3d 模拟视锥的实现

    一个独立游戏 Teleglitch 使用了一种欺骗手法来模拟视锥,效果如下: 博主看了看了看提示 Actually, the line of sight shadows aren’t done wit ...

  3. bzoj 1513 [POI2006]Tet-Tetris 3D(二维线段树)

    1513: [POI2006]Tet-Tetris 3D Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 540  Solved: 175[Submit ...

  4. 怎么通过IE连接本机oracle数据库

    这个目录下D:\oracle\product\10.2.0\db_study\install ,有个reademe.txt文件,里面记录着你访问数据库的网址和端口.

  5. node begining

    node begining */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Consola," ...

  6. Using OpenCV with gcc and CMake

    Using OpenCV with gcc and CMake Note We assume that you have successfully installed OpenCV in your w ...

  7. 编译 Spring-framework的经验分享

    Spring-framework source codegit url: git clone git://github.com/SpringSource/spring-framework.git 导入 ...

  8. linux内核--页高速缓存

    页高速缓存,可以理解为对磁盘中的文件内容进行缓存的一种缓存策略,当然它不仅仅用于磁盘文件. 当对同一磁盘数据反复访问时,缓存数据就是非常必须的了.这就是buffer和 cache这两个概念中的buff ...

  9. express4.x 路由中间件

    路由中间件必须通过app挂载到对应的路由上,如: var express = require('express'); var router = express.Router(); var app = ...

  10. java +bootstrap table 完整例子

    需求:现在常用的table 插件很多, 比如 jquey datatables ,不过操作挺 麻烦, 看到推荐的bootstrap 自带的 table,就用到项目来,先看效果: