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

Posted 2020-07-19 刘金宇

 

 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 文件，然后再进行替换；