使用gulp将js css合并压缩成单个文件，并自动化打包及静态文件自动添加版本号

时间 2019-12-11

标签使用 gulp css 合并压缩单个文件自动化打包静态自动添加本号栏目 JavaScript 繁體版

原文原文链接

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

实际开发过程当中，咱们经常使用到的功能包括：css

一、目标路径的清除；html

二、静态资源复制到目标路径；前端

三、css文件的合并与压缩；java

四、js文件的合并与压缩；node

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

第一、二、三、4几个功能却是很好解决，今天主要说说gulp实现静态资源自动添加版本号；json

搜了很多资料，发现都不是想要的，我但愿实现的效果是：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:

 1 var gulp = require('gulp');
 2 var assetRev = require('gulp-asset-rev');
 3  
 4 gulp.task('rev',['revCss'],function() {
 5     gulp.src("./test/test.html")
 6         .pipe(assetRev())
 7         .pipe(gulp.dest('./dest'));
 8 });
 9  
10 gulp.task('revCss',function () {
11     return gulp.src('./test/styles/test.css')
12         .pipe(assetRev())
13         .pipe(gulp.dest('./dest/styles/'))
14 });
15 gulp.task('default',['rev']);

使用前：

 1 <html lang="en">
 2 <head>
 3     <meta charset="utf-8"/>
 4     <title></title>
 5     <link rel="stylesheet" href="./styles/test.css" type="text/css" />
 6 </head>
 7 <body>
 8     <div>
 9         <img src="./images/test.png" />
10     </div>
11     <script src="./scripts/test.js" type="text/javascript"></script> 
12 </body>
13 </html>

使用后：

 1 <html lang="en">
 2 <head>
 3     <meta charset="utf-8"/>
 4     <title></title>
 5     <link rel="stylesheet" href="./styles/test_0ede2cf.css" type="text/css" />
 6 </head>
 7 <body>
 8     <div>
 9         <img src="./images/test_25cf2b4.png" />
10     </div>
11     <script src="./scripts/test_8ced4e6.js" type="text/javascript"></script> 
12 </body>
13 </html>

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

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

1 var verStr = (options.verConnecter || "") + md5;
2     src=src+"?v="+verStr;

实际上MD5人家都已经算好了，最后只是拼凑了显示方式，因此咱们能够按照本身的需求去组合就好了。so easy~

完整配置以下：

package.json

 1 {
 2   "name": "StagingFinancial",
 3   "version": "0.0.1",
 4   "description": "Pages for Staging Financial App",
 5   "devDependencies": {
 6     "browser-sync": "*",
 7     "del": "*",
 8     "gulp": "*",
 9     "gulp-asset-rev": "*",
10     "gulp-concat": "*",
11     "gulp-if": "*",
12     "gulp-jshint": "*",
13     "gulp-load-plugins": "*",
14     "gulp-minify-css": "^*",
15     "gulp-minify-html": "*",
16     "gulp-sass": "*",
17     "gulp-size": "*",
18     "gulp-sourcemaps": "*",
19     "gulp-uglify": "*",
20     "gulp-useref": "*",
21     "run-sequence": "*"
22   },
23   "engines": {
24     "node": ">=0.10.0"
25   },
26   "private": true
27 }

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

 1 var gulp = require('gulp');
 2 var $ = require('gulp-load-plugins')();
 3 var del = require('del');
 4 var runSequence = require('run-sequence');
 5 var assetRev = require('gulp-asset-rev');
 6 
 7 function gulpScripts(app_name) {
 8     return gulp.src([app_name + '/**/*.js']) //源文件下的全部js
 9         .pipe(assetRev())                    //配置版本号
10         .pipe($.uglify())                    //进行压缩，若是须要合并也可加上合并的代码
11         .pipe(gulp.dest(app_name + "_dist"));//复制到目标文件路径
12 }
13 
14 function gulpStyles(app_name) {
15     return gulp.src([app_name + '/**/*.css'])
16         .pipe(assetRev())
17         .pipe($.minifyCss())
18         .pipe(gulp.dest(app_name + "_dist"));
19 }
20 
21 function gulpImages(app_name) {
22     return gulp.src([app_name + '/**/images/*']) 
23         .pipe(gulp.dest(app_name + "_dist"));   //复制全部图片到目标文件夹
24 }
25 
26 function gulpRevHtml(app_name) {
27     gulp.src([app_name + '/*.html', app_name + '/**/*.html'])   //源文件下面是全部html
28         .pipe(assetRev())                                       //配置引用的js和css文件，须要的话也能够用minifyHtml压缩html文件
29         .pipe(gulp.dest(app_name + '_dist'));                   //打包到目标文件夹路径下面
30 }
31 
32 gulp.task('app_scripts', function(){
33     gulpScripts("app");
34 });
35 gulp.task('app_styles', function(){
36     gulpStyles("app");
37 });
38 gulp.task('app_images',function(){
39      gulpImages("app");
40 });
41 gulp.task('app_rev', ['app_styles', 'app_scripts'], function(){
42     gulpRevHtml("app");
43 });
44 gulp.task('clean', del.bind(null, ['app_dist'], {
45     force: true
46 }));
47 gulp.task("beike", function() {
48     runSequence('clean', ["app_images", "app_rev"]);
49 });

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

结果就是：

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

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

原文地址：http://www.cnblogs.com/hutuzhu/p/5276000.html