1.引入插件 

var gulp = require('gulp'),
// uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
minifycss = require('gulp-minify-css'),
rev = require('gulp-rev'),
revcollector = require('gulp-rev-collector');

控制台输入

npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev

2.在gulpfile.js里写代码

gulp.task('concat',function(){
gulp.src('XingboWeb/scenemall/public/static/css/reset.css') //要压缩的文件
.pipe(minifycss('reset.css')) //压缩css
.pipe(rev()) //文件名加md5后缀
.pipe(gulp.dest('dist/css'))     //
.pipe(rev.manifest())         //rev-mainfest.json文件,里面是压缩文件的信息
.pipe(gulp.dest('dist/rev'));
}); gulp.task('rev',function(){
gulp.src(['dist/rev/*.json','XingboWeb/scenemall/app/views/home/detail.phtml']) //读取压缩文件信息,和要替换目录的文件
.pipe(revcollector({ //执行替换
replaceReved:true,
dirReplacements:{
'css':'dist/css'
}
}))
.pipe(gulp.dest('XingboWeb/scenemall/app/views/home/'))
// .pipe(gulp.dest('dist/html'))
})

注意:minifycss压缩文件名一定要替换目录里的文件名一致,否则替换不成功,例如文件名里reset.css,但是压缩的文件名是reset.min.css,这样的是不能替换成功的

3.之后在控制台运行gulp,就可以替换成功了

gulp学习指南之CSS合并、压缩与MD5命名及路径替换的更多相关文章

  1. Gulp学习指南之CSS合并、压缩与MD5命名及路径替换(转载)

    本文转载自: Gulp学习指南之CSS合并.压缩与MD5命名及路径替换

  2. 使用gulp对js、css、img进行合并压缩

    1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...

  3. Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...

  4. 一篇迟到的gulp文章,代码合并压缩,less编译

    前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...

  5. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  6. gulp学习笔记2

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...

  7. RequireJS 文件合并压缩

    RequireJS的define 以及require 对于我们进行简化JavaScript 开发,进行模块化的处理具有很大的帮助 但是请求加载的js 文件会有一些影响,一般的处理是对于文件进行压缩,但 ...

  8. gulp 实现 js、css,img 合并和压缩

    前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...

  9. gulp 之一 安装及简单CSS,JS文件合并压缩

    最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...

随机推荐

  1. vue数据源转json问题

    开发过程中使用到了vue框架进行前端批量数据的处理,将批量数据转换为json格式进行ajax传参时需要注意将vue数据源得到的json结果进行如下处理,webservice接收json数据时无法有效的 ...

  2. 解决getJSON的缓存问题

    $.getJSON("/portal/edu/getAllEdu?adr="+Math.random(),function(data){

  3. css 内联与块

    内联元素可以理解为不能直接设置宽度和高度元素,比如span,你为他设置宽度和高度没有效果,除非你把它设置成块级元素. 如下面的代码把display:block;属性值去掉的话,宽度和高度都不会起作用了 ...

  4. STM32片上Flash内存映射、页面大小、寄存器映射

    STM32片上Flash内存映射.页面大小.寄存器映射 STM32有4种Flash module organization,分别是:low-density devices(32KB,1KB/page) ...

  5. SD卡的控制方法(指令集和控制时序)

    1.SD卡的命令格式: SD卡的指令由6字节(Byte)组成,如下: Byte1:0 1 x x x x x x(命令号,由指令标志定义,如CMD39为100111即16进制0x27,那么完整的CMD ...

  6. ural1855 Trade Guilds of Erathia

    Trade Guilds of Erathia Time limit: 2.0 secondMemory limit: 64 MB The continent of Antagarich was co ...

  7. ural1067 Disk Tree

    Disk Tree Time limit: 2.0 secondMemory limit: 64 MB Hacker Bill has accidentally lost all the inform ...

  8. 基于Hibernate注解的解读

    一.综述 目前为止项目用到的实体类关系有3种: 单向一对多 单向多对一 双向一对多(双向多对一) 二.说明 @Entity --注释声明该类为持久类.将一个Javabean类声明为一 个实体的数据库表 ...

  9. 读取excel数据 到 datagrid 出现 找不到可安装的ISAM

    读取excel数据 到 datagrid 出现:找不到可安装的ISAM       错误: 实在没有办法了 就仔细的查看了 一下数据链接字符串: string strConn = "Prov ...

  10. LintCode 11 二叉查找树的搜索区间

    题目链接:http://www.lintcode.com/zh-cn/problem/search-range-in-binary-search-tree/ 1.描述 给定两个值 k1 和 k2(k1 ...