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

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

 

首先介绍下gulp的文件压缩(压缩css和js)

(下面介绍的代码移步这里)

我的文件目录如下:

(标红部分是生成的处理后的文件)

如何使用gulp,请移步这里(gulp详细入门)

Json里面放这些插件就够了:

[plain] view plaincopy
  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 plaincopy
  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代码

 

 

[html] view plaincopy
  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 plaincopy
  1. body{margin:0;padding:0}.main{width:100%}.body,.footer,.head{width:80%;margin: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 plaincopy
  1. "gulp-rev": "^7.1.0",  
  2.  "gulp-rev-collector": "^1.0.5"  

 

以修改js名称为例

[html] view plaincopy
  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 plaincopy
  1. {  
  2.   "main.min.js": "main-336a363e91.min.js"  
  3. }  

 

 

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

Index.html引入路径的变化:

[html] view plaincopy
  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 plaincopy
  1. "main.min.js": "main-336a363e91.min.js"  

 

形式二

 

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

 

替换的文件分别是:

 

 

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

 

替换文件请移步这里

分别替换这几个文件即可,

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

生成的键值对:

 

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

 

 

文件的名称不会改变:

 

Index.html引入路径的变化:

 

[html] view plaincopy
  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 plaincopy
  1. FILE_DECL=/(?:href=|src=|url\()['|"]([^\s>"']+?)\?rev=([^\s>"']+?)['|"]/gi;  

 

 

查找并给指定链接填加版本号(默认根据文件MD5生成,因此文件未发生改变,此版本号将不会变)

需要增加的插件

 

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

 

 

html引用的方式如下:

 

[html] view plaincopy
  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 plaincopy
  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 plaincopy
  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插件,这个入门级的用法暂时介绍到这里。

转载于:https://www.cnblogs.com/wangking/p/7001986.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370364.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 7:使用NIO.2进行文件过滤-第2部分

大家好。 这是使用NIO.2系列进行文件过滤的第2部分。 对于那些尚未阅读第1部分的人 &#xff0c;这里有个回顾。 NIO.2是自Java 7起JDK中包含的用于I / O操作的新API。使用此新API&#xff0c;您可以执行与java.io相同的操作&#xff0c;以及许多出色的功能&#xff0c;例如&a…

课时76.兄弟选择器(掌握)

我们先来明确一点&#xff0c;什么是兄弟&#xff1f; 比如&#xff0c;head和body是兄弟&#xff0c;必须是同级关系&#xff0c;如果是嵌套关系&#xff0c;儿子&#xff0c;孙子则不可以。 1.相邻兄弟选择器 CSS2 作用&#xff1a;给指定选择器后面紧跟的那个选择器选中的…

24v开关电源维修技巧_康佳LED液晶彩电KPS+L1900C301电源板原理与维修

康佳液晶彩电采用的KPSL1900C3-01型电源板&#xff0c;编号为34007728&#xff0c;版本号为35015686集成电路采用FAN7530FSGM300FSFR1700组合方案&#xff0c;输出5.1VSB/4A、24V/4A、12V/4A电压。应用于康佳LED47IS988PD、LED42M11PD、LED46MS92DC、LED42IS988PDE、LED42X5000…

课时71.后代选择器(掌握)

1.什么是后代选择器&#xff1f; 作用&#xff1a;找到指定标签的所有后代标签&#xff0c;设置属性。 首先你要明确什么是后代&#xff1f; 你的儿子&#xff0c;孙子&#xff0c;重孙子等&#xff0c;只要有你的血脉的&#xff0c;都是你的后代。 我们先来举个例子 我们想…

java小球碰撞界面设计_JavaScript实现小球碰撞特效

JavaScript实现小球碰撞特效。类似自由落体运动。实现原理非常简单&#xff0c;就是动态的改变每个元素的坐标。使用radius属性将图片圆角化。使用left&#xff0c;top属性动态的改变小球的位置。碰撞反弹球&#xff0c;当碰撞到容器的边缘后&#xff0c;进行反弹&#xff0c;反…

es6常用基础合集

es6常用基础合集 在实际开发中&#xff0c;ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格&#xff0c;可以说对于前端的影响非常巨大。值得高兴的是&#xff0c;如果你熟悉ES5&#xff0c;学习ES6并不…

java接口开发_如果你想学好Java,这些你需要了解

01基本知识  在学习Java之前&#xff0c;您需要了解计算机的基本知识&#xff0c;然后再学习Java。同时&#xff0c;您需要熟悉DOS命令、Java概述、JDK环境安装配置、环境变量配置。JDK和环境变量配置完成后&#xff0c;就可以编写Java程序了。02编程格式  此时&#xff0c…

从Java程序生成QR码图像

如果您精通技术和小工具&#xff0c;则必须了解QR码。 这些天&#xff0c;到处都可以找到它-在博客&#xff0c;网站&#xff0c;甚至在某些公共场所。 这在移动应用程序中非常流行&#xff0c;在移动应用程序中&#xff0c;您可以使用QR Code扫描仪应用程序扫描QR Code&#x…

课时67.标签选择器(掌握)

通过上节课的学习我们明白了如何通过十六进制来表示颜色 例如&#xff1a;红色的几种表示方法 我们发现在学习CSS当中的一些属性的时候&#xff0c;它都有一些套路 只要知道属性的名称&#xff0c;属性有什么作用&#xff0c;它有哪些取值&#xff0c;这个属性有什么注意点 …

Java 7:使用NIO.2进行文件过滤-第1部分

NIO.2是自Java 7起JDK中包含的用于I / O操作的新API。使用此新API&#xff0c;您可以执行与 java.io以及许多出色的功能&#xff0c;例如&#xff1a;访问文件元数据和监视目录更改等。 显然&#xff0c;由于向后兼容&#xff0c;java.io包不会消失&#xff0c;但是我们鼓励为…

课时66.颜色控制属性下(理解)

今天来讲解十六进制控制属性的方法&#xff0c;其实用十六进制表示的方式本质就是rgb&#xff0c;只不过它们的格式不一样而已&#xff0c;十六进制中是通过每两位表示一种颜色的方式来给颜色赋值。 如 #FF0000 FF----r 00----g 00----b 修改前两位相当于修改rgb中的第一…

课时57.HTML被废弃的标签(掌握)

1.为什么HTML中有一部分标签会被废弃&#xff1f; 因为当前HTML中的标签只有一个作用&#xff0c;就是用来添加语义&#xff0c;而早期的HTML标签中有一部分标签是没有语义的 有一部分标签是用来修改样式的 所以这部分标签就被淘汰了 <br><hr><font> <…

课时55.详情和概要标签(理解)

1.什么是详情和概要标签&#xff1f; 作用&#xff1a;利用summary标签来描述概要信息&#xff0c;利用details标签来描述详情信息 默认情况下是折叠展示&#xff0c;想看见详情必须点击 格式&#xff1a; <details> <summary>概要信息</summary> 详情信…

课时53.video标签(掌握)

这节课来学习一下html5中新增的标签&#xff0c;我们先来看一下&#xff0c;html5中新增了哪些标签&#xff1f; 打开W3school的网页&#xff0c;点击参考手册中的HTML/HTML5标签&#xff0c;有一个按字母顺序排列的标签&#xff0c;但凡标签后面带有5标记的&#xff0c;都是h…

Canvas制作的下雨动画

简介 在codepen上看到一个Canvas做的下雨效果动画&#xff0c;感觉蛮有意思的。就研究了下&#xff0c;这里来分享下&#xff0c;实现技巧。效果可以见下面的链接。 霓虹雨: http://codepen.io/natewiley/full/NNgqVJ/ 效果截图&#xff1a; Canvas动画基础 大家都知道&…

在Eclipse中有效使用JUnit

最近&#xff0c;我被卷入了讨论1和一些受感染的同伴2&#xff0c;他们关于我们如何在Eclipse IDE中使用JUnit 。 令人惊讶的是&#xff0c;对话带来了并非所有人都知道的一些“技巧”。 这使我有了写这篇文章的想法&#xff0c;总结了我们的演讲。 谁知道–也许有人也有新事物…

jquery文件上传控件 Uploadify

基于jquery的文件上传控件&#xff0c;支持ajax无刷新上传&#xff0c;多个文件同时上传&#xff0c;上传进行进度显示&#xff0c;删除已上传文件。 要求使用jquery1.4或以上版本&#xff0c;flash player 9.0.24以上。 有两个版本&#xff0c;一个用flash,一个是html5。html5…

php实现第三方邮箱登录_PHP实现用户异地登录提醒功能的方法

有时候你的网站账号被盗或你在别处登录操作后台时&#xff0c;右下角会弹出提示信息&#xff0c;提醒你的账号异地登录&#xff0c;或者会被强制下线。对于这种安全性要求比较高的web网站&#xff0c;很多后台管理都会做这种功能提醒。甄别自己的账号是否被盗或者是否有另一个人…

课时47.datalist标签(了解)

1.datalist标签 作用&#xff1a;给输入框绑定待选项 2.datalist格式&#xff1a; <datalist> <option>待选项内容</option> </datalist> 3.如何给输入框绑定待选列表&#xff1f; 搞一个输入框搞一个datalist列表给datalist列表标签添加一个id给…

postgis安装_从零开始,构建电子地图网站:0_2_数据处理postgis

软件安装完&#xff0c;开始数据处理。从China Historical GIS下载一份数据。一、数据下载数据来源&#xff1a;China Historical GIS&#xff1a;https://sites.fas.harvard.edu/~chgis/data/chgis/v6/先下载一份时间序列数据&#xff1a;Download CHGIS V6 TIME SERIES Datah…