gulp CSS合并、压缩与MD5命名及路径替换
来源:互联网 发布:qq服务器返回数据错误 编辑:程序博客网 时间:2024/05/29 16:06
gulp 来合并、压缩CSS以及进行 MD5命名以及替换文件中引入的CSS文件,当然这一系列操作都是用基于gulp插件的,主要会用到下面的几个插件:
var concat = require('gulp-concat');//- 多个文件合并为一个;var minifyCss = require('gulp-minify-css');//- 压缩CSS为一行; var rev = require('gulp-rev');//- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector');//- 路径替换
安装Gulp插件到本地项目
npm init//- 生成一个 package.json,里面是一些常规的配置信息npm install gulp gulp-concat gulp-rev gulp-rev-collector gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev//- 安装插件到项目目录内
完成上面两步后,会在我们的项目内生成一个package.json文件以及一个node_modules目录
创建配置文件 gulpfile.js
在项目根目录内创建一个 gulpfile.js 文件(必须是这个文件名哟~),内容就是上面几个插件的配置信息:
var gulp = require('gulp');var concat = require('gulp-concat'); //- 多个文件合并为一个;var minifyCss = require('gulp-minify-css'); //- 压缩CSS为一行;var rev = require('gulp-rev'); //- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector'); //- 路径替换gulp.task('concat', function() { //- 创建一个名为 concat 的 task gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css']) //- 需要处理的css文件,放到一个字符串数组里 .pipe(concat('wap.min.css')) //- 合并后的文件名 .pipe(minifyCss()) //- 压缩处理成一行 .pipe(rev()) //- 文件名加MD5后缀 .pipe(gulp.dest('./css')) //- 输出文件本地 .pipe(rev.manifest()) //- 生成一个rev-manifest.json .pipe(gulp.dest('./rev')); //- 将 rev-manifest.json 保存到 rev 目录内});gulp.task('rev', function() { gulp.src(['./rev/*.json', './application/**/header.php']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件 .pipe(revCollector()) //- 执行文件内css名的替换 .pipe(gulp.dest('./application/')); //- 替换后的文件输出的目录});gulp.task('default', ['concat', 'rev']);
运行结果
通过以上的配置之后,就可以开始运行 gulp 对我们的项目进行相关的操作啦;
使用 gulp 命令,运行Gulp.js 构建程序
首先运行 concat 这个 task 生成一个 rev-manifest.json 文件
然后再运行 rev 这个 task 替换掉文件中引入的 css
YuanWingdeMacBook-Pro:m YuanWing$ gulp concat[11:47:02] Using gulpfile ~/SVN/JKD/m/gulpfile.js[11:47:03] Starting 'concat'...[11:47:03] Finished 'concat' after 12 msYuanWingdeMacBook-Pro:m YuanWing$ gulp rev[11:47:17] Using gulpfile ~/SVN/JKD/m/gulpfile.js[11:47:17] Starting 'rev'...[11:47:17] Finished 'rev' after 10 msYuanWingdeMacBook-Pro:m YuanWing$
rev-manifest.json文件内容:
{ "wap.min.css": "wap.min-c49f62a273.css"}
header.php替换前后对比:
替换前:<link rel="stylesheet" href="/css/wap.min.css" />
替换后:<link rel="stylesheet" href="/css/wap.min-c49f62a273.css" />
gulp-rev-collector
进行文件路径替换是依据rev-manifest.json
的,所以要先成生 .json
文件,然后再进行替换;
0 0
- gulp CSS合并、压缩与MD5命名及路径替换
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
- gulp 压缩合并Css 混淆压缩js
- jsp下较完整的gulp实例:压缩、md5、上传cdn、路径替换
- gulp合并压缩JS和CSS
- gulp下静态资源的合并、压缩、MD5后缀
- Gulp编译、合并、压缩
- gulp 实现 js、css,img 合并和压缩
- gulp 实现 js、css,img 合并和压缩
- gulp 实现 js、css,img 合并和压缩
- gulp压缩css
- 转战gulp,实现前端静态资源的压缩,加MD5戳,替换引用,加CDN前缀
- gulp实现前端静态资源的压缩,加MD5戳,替换引用,加CDN前缀
- gulp系列之 静态资源打包压缩合并MD5版本控制
- 使用gulp压缩合并代码
- Gulp安装、编译、合并、压缩
- Gulp压缩、合并js/css文件,压缩图片以及热更新教程
- Gulp压缩合并js/css文件,压缩图片,以及热更新教程
- Android 网络框架学习之Retrofit
- hdu 2639 01背包的 第K优解
- 【排序算法】归并排序(java实现)
- easyui 去除datagrid表头的checkbox 和将某行不能选中
- JSP中的pageEncoding,contentType,<meta content=""/>
- gulp CSS合并、压缩与MD5命名及路径替换
- ICC7 软件窗口拖出界面问题的解决方式
- Java基础知识IO流(流操作规律)
- LeetCode笔记:206. Reverse Linked List
- 苹果开发者账号那些事儿(三)
- 内边距、边框和外边距
- String.replaceall正则表达式
- 线程系列(一)--基础
- 设计模式笔记:命令模式