Gulp——文件压缩和文件指纹

时间  2019-11-21
标签 gulp 文件 压缩 指纹 栏目 JavaScript 繁體版
原文   原文链接

先看下文件指纹添加成功发布后的“成果”。javascript

 

首先介绍下gulp的文件压缩（压缩css和js）css

（下面介绍的代码移步这里）html

个人文件目录以下：java

（标红部分是生成的处理后的文件）node

如何使用gulp，请移步这里（gulp详细入门）json

Json里面放这些插件就够了：gulp

[plain]  view plain  copy
 
  1. {  
  2.   "name": "test",  
  3.   "version": "1.0.0",  
  4.   "description": "文件压缩、文件指纹",  
  5.   "main": "gulpfile.js",  
  6.   "scripts": {  
  7.     "test": "echo \"Error: no test specified\" && exit 1"  
  8.   },  
  9.   "author": "小工匠",  
  10.   "license": "ISC",  
  11.   "devDependencies": {  
  12.     "gulp": "^3.9.1",  
  13.     "gulp-concat": "^2.6.0",  
  14.     "gulp-load-plugins": "^1.2.4",  
  15.     "gulp-minify-css": "^1.2.4",  
  16.     "gulp-uglify": "^1.5.4"  
  17.   }  
  18. }  

gulpfile.js配置文件以下：浏览器

 

[javascript]  view plain  copy
 
  1. var gulp = require('gulp'),  
  2.     plugins = require('gulp-load-plugins')();  
  3.   
  4. gulp.task('minifyCss',function() {  
  5.     return gulp.src('css/index.css')                    //输入  
  6.             .pipe(plugins.concat('style.min.css'))      //合并（输入的文件有多个时或合并成一个）  
  7.             .pipe(plugins.minifyCss())                  //压缩  
  8.             .pipe(gulp.dest('./'));                     //输出  
  9. })  
  10. gulp.task('minifyJs',function(){                        //过程同CSS  
  11.     return gulp.src('js/index.js')  
  12.             .pipe(plugins.concat('main.min.js'))  
  13.             .pipe(plugins.uglify())  
  14.             .pipe(gulp.dest('./'));  
  15. })  
  16. gulp.task('watch',function() {  
  17.             gulp.watch('css/index.css',['minifyCss']);  //“监控”index.css文件的变化，若是发生变化就执行压缩命令(可批量监控文件，例如./**/*.css)  
  18.             gulp.watch('js/index.js',['minifyJs']);     //“监控”index.js文件的变化，若是发生变化就执行压缩命令(可批量监控文件，例如./**/*.js)  
  19. })  

 

 

ok了，能够执行watch监控文件的变化实时执行，也能够分别执行minifyCss、minifyJs压缩CSS、JS缓存

 

压缩前的CSS代码app

 

 

[html]  view plain  copy
 
  1. /*create by cc*/  
  2. body{  
  3.     margin: 0;  
  4.     padding: 0;  
  5.     /*font-family: '宋体';*/  
  6. }  
  7. .main{  
  8.     width: 100%;  
  9. }  
  10. .head{  
  11.     width: 80%;  
  12.     height: 100px;  
  13.     margin: 0 auto;  
  14.     background: rgba(7, 95,184, 0.5)  
  15. }  
  16. .body{  
  17.     width: 80%;  
  18.     height: 200px;  
  19.     margin: 0 auto;  
  20.     background: rgba(239, 228, 176, 0.6)  
  21. }  
  22. .footer{  
  23.     width: 80%;  
  24.     height: 100px;   
  25.     margin:0 auto;   
  26.     background: green;  
  27. }  


压缩后的CSS代码

 

 

[css]  view plain  copy
 
  1. body{margin:0;padding:0}.main{width:100%}.body,.footer,.head{width:80%;margin:0 auto}.head{height:100px;background:rgba(7,95,184,.5)}.body{height:200px;background:rgba(239,228,176,.6)}.footer{height:100px;background:green}  


gulpfile文件的配置意义注释的很清晰了。

 

 

其次，文件指纹添加。

平时在开发中老是会遇到这样的问题。本身的代码可能有一些小的问题，本身一眼就确认问题所在，可是修改事后却得不到本身想要的结果，而后纠结半天，最后清一下浏览器缓存，发现都是缓存惹的祸。做为开发者你能够找出这样的缘由，可是若是是普通的用户的话，反馈来的问题可能就是这么一个缓存的问题致使不愉快的用户体验。为此，为项目文件添加版本号，清除页面引用缓存，是比较合适合理的，由于你总不可能每次发布更新都要求用户去像开发者那样强刷浏览器吧？

下面介绍三种本身尝试过的添加文件指纹的方法：

第一种：

须要增长的插件：

[html]  view plain  copy
 
  1. "gulp-rev": "^7.1.0",  
  2.  "gulp-rev-collector": "^1.0.5"  

 

以修改js名称为例

[html]  view plain  copy
 
  1. gulp.task('minifyJs',function(){                        //过程同CSS  
  2.     return gulp.src('js/index.js')  
  3.             .pipe(plugins.concat('main.min.js'))  
  4.             .pipe(plugins.uglify())  
  5.             .pipe(plugins.rev())                        //为main.min.js增长10位的随机hash值  
  6.             .pipe(gulp.dest('./'))                      //输出修更名称后的文件  
  7.             .pipe(plugins.rev.manifest())               //将生成与文件对应的键值对  
  8.             .pipe(gulp.dest('rev/js'))                  //键值对输出  
  9.   
  10. })  
  11. gulp.task('htmlRouter',function() {  
  12.     return gulp.src(['rev/**/*.json','index.html'])      //  
  13.             .pipe(plugins.revCollector())                //替换引入的文件，将修更名称后的文件引入  
  14.             .pipe(gulp.dest('./'))  
  15. })  

生成的键值对：

 

[html]  view plain  copy
 
  1. {  
  2.   "main.min.js": "main-336a363e91.min.js"  
  3. }  

 

 

修改文件名称后生成的文件名：

Index.html引入路径的变化：

[html]  view plain  copy
 
  1. <head>  
  2.     <meta charset="UTF-8">  
  3.     <title>gulp</title>  
  4.     <link rel="stylesheet" href="style.min.css">  
  5.     <script src="main-336a363e91.min.js"></script>  
  6. </head>  

执行后能够看到已经作了版本的修改：

第二种：

修改第一种方法的文件配置，将形式一变成形式二

形式一

 

[html]  view plain  copy
 
  1. "main.min.js": "main-336a363e91.min.js"  

 

形式二

 

[html]  view plain  copy
 
  1. "main.min.js": "main.min.js?v=336a363e91"  

 

替换的文件分别是：

 

 

[html]  view plain  copy
 
  1. gulp-rev\index.js  
  2. gulp-rev\node_modules\rev-path\index.js  
  3. gulp-rev-collector\index.js  

 

替换文件请移步这里

分别替换这几个文件便可，

将gulpfile.js的配置仍然同上，执行代码后的结果

生成的键值对：

 

[html]  view plain  copy
 
  1. {  
  2.  "main.min.js": "main.min.js?v=336a363e91"  
  3. }  

 

 

文件的名称不会改变：

 

Index.html引入路径的变化：

 

[html]  view plain  copy
 
  1. <head>  
  2.    <meta charset="UTF-8">  
  3.    <title>gulp</title>  
  4.    <link rel="stylesheet" href="style.min.css">  
  5.    <script src="main.min.js?v=336a363e91"></script>  
  6. </head>  

 

执行后能够看到已经作了版本的修改：

 

第三种：使用append

gulp-rev-append 插件将经过正则

 

[html]  view plain  copy
 
  1. FILE_DECL=/(?:href=|src=|url\()['|"]([^\s>"']+?)\?rev=([^\s>"']+?)['|"]/gi;  

 

 

查找并给指定连接填加版本号（默认根据文件MD5生成，所以文件未发生改变，此版本号将不会变）

须要增长的插件

 

[html]  view plain  copy
 
  1. "gulp-rev-append":"^0.1.6"  

 

 

html引用的方式以下：

 

[html]  view plain  copy
 
  1. <head>  
  2.    <meta charset="UTF-8">  
  3.    <title>gulp</title>  
  4.    <link rel="stylesheet" href="style.min.css">  
  5.    <script src="main.min.js?rev=@@hash"></script>  
  6. </head>  

 

注意：<script src="main.min.js?rev=@@hash"></script>此处src的路径下的文件是须要存在的，不然不会生成MD5值，缘由以下：

 

gulpfile.js配置

[javascript]  view plain  copy
 
  1. var gulp = require('gulp'),  
  2.     plugins = require('gulp-load-plugins')();  
  3.   
  4. gulp.task('minifyJs',function(){                        //过程同CSS  
  5.     return gulp.src('js/index.js')  
  6.             .pipe(plugins.concat('main.min.js'))  
  7.             .pipe(plugins.uglify())  
  8.             .pipe(gulp.dest('./'))                     //须要先生成文件，不然rev-append()无效  
  9.              
  10.   
  11. })  
  12. gulp.task('htmlRouter',function() {  
  13.     return gulp.src('index.html')       
  14.             .pipe(plugins.revAppend())                 //查找?rev=@@hash字符串，生成md5值          
  15.             .pipe(gulp.dest('./'))  
  16. })  

 

执行后的目录结构：

 

执行后的文件指纹发生变化：

 

[html]  view plain  copy
 
  1. <head>  
  2.    <meta charset="UTF-8">  
  3.    <title>gulp</title>  
  4.    <link rel="stylesheet" href="style.min.css">  
  5.    <script src="main.min.js?rev=336a363e914f0a93aaa403dedf1c7b27"></script>  
  6. </head>  

 

执行后能够看到已经作了版本的修改：

 

总结：这几种方式均可以保证生产环境文件的惟一性，解决浏览器缓存等问题。

 

后话：由于这些都是本身在实际项目中尝试过的方式，写博文的时候不方便还原，因此用了简单的demo来作测试用，可是根据实际的项目来作状况会复杂不少，好比生成的文件重复、文件路径没法替换等，这些都须要使用到其余的gulp插件，这个入门级的用法暂时介绍到这里。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程