转载

Gulp学习指南之CSS合并、压缩与MD5命名及路径替换

接上一篇文章:Gulp学习指南,这里主要记录一下用 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-minify-css gulp-rev gulp-rev-collector --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 ms YuanWingdeMacBook-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 ms YuanWingdeMacBook-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 文件,然后再进行替换;

结语

上面用到的几个插件都只用到了他们自身功能很小很小的一部份,感兴的可以自己去好好体验一下:

正文到此结束
Loading...