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

来源：懂视网责编：小采时间：2020-11-27 16:07:31

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

Gulp学习指南之CSS合并、压缩与MD5命名及路径替换_html/css_WEB-ITnose:接上一篇文章：Gulp学习指南，这里主要记录一下用 gulp 来合并、压缩CSS以及进行 MD5命名以及替换文件中引入的CSS文件，当然这一系列操作都是用基于gulp插件的，主要会用到下面的几个插件： var concat = require('gulp-concat');//- 多

推荐度：

点击下载本文 文档为doc格式

导读Gulp学习指南之CSS合并、压缩与MD5命名及路径替换_html/css_WEB-ITnose:接上一篇文章：Gulp学习指南，这里主要记录一下用 gulp 来合并、压缩CSS以及进行 MD5命名以及替换文件中引入的CSS文件，当然这一系列操作都是用基于gulp插件的，主要会用到下面的几个插件： var concat = require('gulp-concat');//- 多

接上一篇文章：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 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替换前后对比：

替换前：

替换后：

gulp-rev-collector进行文件路径替换是依据 rev-manifest.json 的，所以要先成生 .json 文件，然后再进行替换；

结语

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

gulp-rev
gulp-rev-collector
gulp-minify-css
gulp-concat

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推荐度：

点击下载本文 文档为doc格式

标签： md5 css web

热门焦点

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

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

安装Gulp插件到本地项目

创建配置文件 gulpfile.js

运行结果

结语

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

最新推荐

猜你喜欢

热门推荐