前端自动化打包发布已是一种常态，尤其在移动端，测试过程中静态资源的缓存是件很头疼的事情，有时候明明处理的bug测试还是存在，其实就是缓存惹的祸，手机不比pc浏览器，清理缓存还是有点麻烦的。所以自动化实现静态资源的版本更新才是正道。

实际开发过程中，我们常用到的功能包括：

1、目标路径的清除；

2、静态资源复制到目标路径；

3、css文件的合并与压缩；

4、js文件的合并与压缩；

5、根据文件的变化添加版本号；

第1、2、3、4几个功能倒是很好解决，今天主要说说gulp实现静态资源自动添加版本号；

搜了不少资料，发现都不是想要的，我希望实现的效果是：

<script type="text/javascript" src="../../scripts/app_common.js?v=51921f3"></script>

但是大部分插件实现的效果类似下面，而且看起来很麻烦

<script type="text/javascript" src="../../scripts/app_common-51921f3.js"></script>

这样会导致一个问题，每次都会生成新的文件，而且必须同时修改html的引用。

下面说说我的解决方案：

这是目录结构，不同的结构可能在处理上会有些不同。

用到的gulp插件是：gulp-asset-rev

先下载插件： npm install --save-dev gulp-asset-rev

Example:

var gulp = require('gulp');

var assetRev = require('gulp-asset-rev');

gulp.task('rev',['revCss'],function() {

    gulp.src("./test/test.html")

        .pipe(assetRev())

        .pipe(gulp.dest('./dest'));

});

gulp.task('revCss',function () {

    return gulp.src('./test/styles/test.css')

        .pipe(assetRev())

        .pipe(gulp.dest('./dest/styles/'))

});

gulp.task('default',['rev']);

使用前：

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <title></title>

    <link rel="stylesheet" href="./styles/test.css" type="text/css" />

</head>

<body>

    <div>

        <img src="./images/test.png" />

    </div>

    <script src="./scripts/test.js" type="text/javascript"></script>

</body>

</html>

使用后：

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <title></title>

    <link rel="stylesheet" href="./styles/test_0ede2cf.css" type="text/css" />

</head>

<body>

    <div>

        <img src="./images/test_25cf2b4.png" />

    </div>

    <script src="./scripts/test_8ced4e6.js" type="text/javascript"></script>

</body>

</html>

很显然它把整个文件名都给改了，不符合我们之前只在文件后面添加版本号参数的需求。我们可以在源文件中做点手脚。

找到node_modules --> gulp-assets-rev -->index.js 修改为如下代码：

var verStr = (options.verConnecter || "") + md5;

    src=src+"?v="+verStr;

实际上MD5人家都已经算好了，最后只是拼凑了显示方式，所以我们可以按照自己的需求去组合就行了。so easy~

完整配置如下：

package.json

{

  "name": "StagingFinancial",

  "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

}

都是些常用的插件，gulp总共就5个API接口，但是插件是异常强大，可根据需求自己配置。

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"]);

});

因为同一个目录下有别的项目，所以这里写成了函数，输入不同名称打包到不同目标文件。

结果就是：

打包后引用的静态资源文件分别如下，如果修改了某个文件，参数会发生变化，如果没有修改，则不发生变化：

<link rel="stylesheet" type="text/css" href="../../styles/common.css?v=a8aacfb">
<script type="text/javascript" src="../../scripts/app_common.js?v=51921f3"></script>
background:url(../images/none.png?v=8f204d4)

gulp自动化打包及静态文件自动添加版本号的更多相关文章

  1. 为js和css文件自动添加版本号

    web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服 ...

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

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

  3. 前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...

  4. Gulp 给所有静态文件引用加版本号

    在juqery和easyui 盛行的年代许多项目采用纯静态页面去构建前端框架从而实现前后端分离的目的.项目开发周期内往往会频繁修改更新某个文件,当你将文件更新到服务器后客户端由于缓存问题而出现显示异常 ...

  5. Gulp自动添加版本号(转载)

    本文转载自: gulp自动添加版本号

  6. sublime 设置新建文件自动添加author(作者)等文件头信息

    很多时候, sublime 自带自动添加文件头信息, 但是并不是我们想要比如下面这样的:新建一个python文件 自动添加的author 信息== 上面并不是我想要的, 我想要下面这样的效果:== 这 ...

  7. 用python给html里的css及js文件链接自动添加版本号

    传统的给文件链接添加版本号的方法是使用gulp-rev,这里提出的解决方案是使用python来替代gulp-rev. import os import re import uuid import sy ...

  8. 玩转gulp之watch监听文件自动编译

    博客移至 https://www.dodoblog.cn/blog?id=5befc928e0feb34495b57035 我们在写页面的时候,用到sass less等css预处理器的时候,虽然写的很 ...

  9. flask模板应用-加载静态文件：添加Favicon，使用CSS框架，使用宏加载静态资源

    加载静态文件 一个Web项目不仅需要HTML模板,还需要许多静态文件,比如CSS.JavaScript文件.图片和声音声.在flask程序中,默认需要将静态文件存储在与主脚本(包含程序实例的脚本)同级 ...

随机推荐

  1. php文件每隔几秒执行一次

    说实话,linux 下面的crontab 任务完全可以实现所有的定时任务脚本,但是有些脚本只需要在一段时间内执行,过了这段时间之后,就不再执行定时脚本了.在使用crontab的时候,就需要人为的关闭掉 ...

  2. jvm高级特性(2)(判断存活对象算法,finaliza(),方法区回收）

    JVM高级特性与实践(二):对象存活判定算法(引用) 与 回收 垃圾回收器GC(Garbage Collection) 于1960年诞生在MIT的Lisp是第一门真正使用内存动态分配和垃圾收集技术的语 ...

  3. 转的很好的js 入门

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...

  4. 【PKUSC2018】【loj6433】最大前缀和 状压dp

    这题吼啊... 然而还是想了$2h$,写了$1h$. 我们发现一个性质:若一个序列$p$能作为前缀和,那么在序列$p$中,包含序列$p$最后一个数的所有子序列必然都是非负的. 那么,我们 令$f[i] ...

  5. POJ 2243

    #include <iostream> #include <queue> using namespace std; ][] = {-,-,-,,,-,,,,-,-,-,,,-, ...

  6. android Service 学习总结

    学习android开发已经四五个月,由于项目中职责的原因一直没有接触过Service的实际项目,今天重新学一遍Service用法. 问题: 作为四大组件,为什么需要Service? 它与Thread又 ...

  7. sublime text3在交互时解决input（）函数无法使用的问题

    1,打开sublime text3工具栏,依次点击View->Show Console菜单打开命令行, 2,在命令行里 输入代码          import urllib.request,o ...

  8. Android_Universal-Image-Load使用

    一,快速使用(确保ImageLoader只初始化一次,这样图片缓存会更加优秀.) 场景:为ImageView设置一张指定Uri的图片. 1,导包,配置联网,读写SD卡权限. 2,初始化: ImageL ...

  9. 《垃圾回收的算法与实现》——GC标记-清除算法

    基本算法 标记-清除算法由 ==标记阶段== 和 ==清除阶段== 构成. 标记即将所有活动的对象打上标记. 清除即将那些没有标记的对象进行回收. 标记与清除 遍历GC root引用,递归标记(设置对 ...

  10. 链式编程:遇到多个构造器参数(Constructor Parameters)时要考虑用构建器(Builder)

    public class NutritionFacts { private final int servingSize; private final int servings; private fin ...