码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-06-02 13:23:01      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

 

 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(cssConcat, function() {                                //- 创建一个名为 concat 的 task
    gulp.src(./src/css/*.css)    //- 需要处理的css文件,放到一个字符串数组里
        .pipe(concat(style.min.css))                            //- 合并后的文件名
        .pipe(minifyCss())                                      //- 压缩处理成一行
        .pipe(rev())                                            //- 文件名加MD5后缀
        .pipe(gulp.dest(./build/css))                               //- 输出文件本地
        .pipe(rev.manifest())                                   //- 生成一个rev-manifest.json
        .pipe(gulp.dest(./rev));                              //- 将 rev-manifest.json 保存到 rev 目录内
});

gulp.task(rev,[cssConcat],function() {console.log(111)
    gulp.src([./rev/rev-manifest.json, ./src/index.html])   //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
        .pipe(revCollector())                                   //- 执行文件内css名的替换
        .pipe(gulp.dest(./build/));                     //- 替换后的文件输出的目录
});
gulp.watch(./src/**/*,[rev])
gulp.task(default, [ 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 文件,然后再进行替换;

 

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

标签:

原文地址:http://www.cnblogs.com/liujinyu/p/5552393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!