gulp学习指南之CSS合并、压缩与MD5命名及路径替换
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命名及路径替换的更多相关文章
- Gulp学习指南之CSS合并、压缩与MD5命名及路径替换(转载)
本文转载自: Gulp学习指南之CSS合并.压缩与MD5命名及路径替换
- 使用gulp对js、css、img进行合并压缩
1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...
- 一篇迟到的gulp文章,代码合并压缩,less编译
前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- gulp学习笔记2
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...
- RequireJS 文件合并压缩
RequireJS的define 以及require 对于我们进行简化JavaScript 开发,进行模块化的处理具有很大的帮助 但是请求加载的js 文件会有一些影响,一般的处理是对于文件进行压缩,但 ...
- gulp 实现 js、css,img 合并和压缩
前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...
- gulp 之一 安装及简单CSS,JS文件合并压缩
最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改 ...
随机推荐
- Java的动态加载及其安全性问题
1.什么是动态加载 Class Loaders是动态加载Java类与Resource的一种机制.它支持Laziness,type-safe linkage,user-defined extensibi ...
- 转:LR的响应时间与使用IE所感受时间不一致的讨论
在做性能测试时,有时碰到这样一种情况,使用性能工具LR测试出来的响应时间比实际使用IE感受到的时间要长,例如,实际使用IE打开一个系统时只需要1~2秒,而使用LR跑一个用户所得出的结果可能是8秒.10 ...
- android 代码优化:封锁输出日志
可以使用 ProGuard 完全地删除任何在发布版中无用的语句,关于 ProGuard 参见: http://developer.android.com/guide/developing/tools/ ...
- Warning: Cannot modify header information - headers already sent by ... functions_general.php on line 45
摘自:有用到 http://blog.csdn.net/besily/article/details/5396268 PHP错误:Warning: Cannot modify header infor ...
- 初学HTML5的一点理解
刚接触了一点点用h5移动端的一点知识,用自己最浅薄的理解来看解决自适应屏幕尺寸问题和适应屏幕尺寸的布局问题.这里,为了解决自适应屏幕尺寸问题大概需要做的就是把HTML中的元素的尺寸尽可能的用百分比表示 ...
- hdu_5555_Immortality of Frog(状压DP)
题目连接:hdu_5555_Immortality of Frog 题意: 给你一个NxN的网格,第N行的每一列都有个青蛙,这些青蛙只会往上走,上帝会在每个膜中放一个长生不老的药,一共有N个膜,每个膜 ...
- 【转】The magic behind array length property
Developer deals with arrays every day. Being a collection, an important property to query is the num ...
- 2的幂次方(power)
2的幂次方(power) 题目描述 任何一个正整数都可以用2的幂次方表示.例如:137=27+23+20同时约定方次用括号来表示,即ab 可表示为a(b). 由此可知,137可表示为:2(7)+2(3 ...
- 热门IOS 第三方库
综合github上各个项目的关注度与具体使用情况,涵盖功能,UI,数据库,自动化测试,编程工具等类型,看完,还敢自称”精通iOS开发”吗? https://github.com/syedhali/EZ ...
- ubuntu配置openvpn
http://www.zhixing123.cn/ubuntu/ubuntu-openvpn-settings-tutorial.html 本文介绍Ubuntu连接使用OpenVPN方法教程,Ubun ...