//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
concat = require('gulp-concat'),//合并文件 --合并只是放一起--压缩才会真正合并相同样式
less = require('gulp-less'),//编译less文件
cssmin = require('gulp-minify-css'),//压缩css文件
rename = require('gulp-rename'),//设置压缩后的文件名
autoprefixer = require('gulp-autoprefixer'),//给 CSS 增加前缀。解决某些CSS属性不是标准属性,有各种浏览器前缀的情况
spriter=require('gulp-css-spriter');//合并图片 //编译/加前缀 /合并/压缩css
gulp.task('css1', function () {
var timestamp = +new Date();
var flg = gulp.src('public/resources/views/css/**.less') //该任务针对的文件
.pipe(less()) //编译less
.pipe(autoprefixer({
browsers: ['last 2 versions','Safari >0', 'Explorer >0', 'Edge >0', 'Opera >0', 'Firefox >=20'],//last 2 versions- 主流浏览器的最新两个版本
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的前缀 默认:true
}))
.pipe(concat('main.css')) //合并css
.pipe(cssmin()) //压缩css
.pipe(rename({suffix:'.min'})) //设置压缩文件名
.pipe(gulp.dest('public/resources/views/css/')) //输出文件的存放地址
return flg; //反馈给依赖他的模块--,告诉执行完毕
});
//合并css图片 --执行了css1 再执行css2
gulp.task('css2',['css1'], function () {
var timestamp = +new Date();
gulp.src(['public/resources/views/css/main.min.css']) //该任务针对的文件
.pipe(spriter({
// 生成的spriter的位置
spriteSheet: 'public/resources/views/img/spritesheet' + timestamp + '.png',
// 生成样式文件图片引用地址的路径
pathToSpriteSheetFromCSS: '../img/spritesheet' + timestamp + '.png',
spritesmithOptions: {
padding:
}
}))
.pipe(gulp.dest('public/resources/views/css/'));
});
gulp.task('default',['css2']); //定义默认任务 elseTask为其他任务,该示例没有定义elseTask任务
//gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径 //运行gulp
//说明:命令提示符执行gulp 任务名称;
//编译less:命令提示符执行gulp testLess;
//当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

合并css中的图片

css代码

    .one{
background: url(../img/logo.png?__spriter) no-repeat;
}
.two{
background: url(../img/fup.png?__spriter) no-repeat;
}
.three{
background: url(../img/ffile.png?__spriter) no-repeat;
}

在路劲后面加 ?__spriter 标识要进行合并

gulp-css-spriter 默认会合并CSS中的所有图片,要按需合并则需要修改

node_modules\gulp-css-spriter\lib\map-over-styles-and-transform-background-image-declarations.js 中的代码

48行开始的if-else if代码块中,替换为下面代码:

// background-image always has a url
if(transformedDeclaration.property==='background-image'&&/\?__spriter/i.test(transformedDeclaration.value)){ transformedDeclaration.value=transformedDeclaration.value.replace('?__spriter','');
return cb(transformedDeclaration,declarationIndex,declarations);
}
//Backgroundisashorthandpropertysomakesure`url()`isinthere且判断url是否有?__spriter后缀
else if(transformedDeclaration.property === 'background'&&/\?__spriter/i.test(transformedDeclaration.value)){
transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');
var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value); if(hasImageValue){
return cb(transformedDeclaration,declarationIndex,declarations);
}
}

如图

gulp css 压缩 合并的更多相关文章

  1. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  2. gulp自动化压缩合并、加版本号解决方案

    虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 ...

  3. gurnt js css 压缩合并

    package.json 文件 { "name":"my-project-name", "version":"0.0.1" ...

  4. Grunt的配置及使用(压缩合并js/css)

    Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...

  5. grunt压缩合并代码

    module.exports = function(grunt) { // 配置 grunt.initConfig({ pkg : grunt.file.readJSON('package.json' ...

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

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

  7. gulp之css,js压缩合并加密替换

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然 ...

  8. gulp完成javascript压缩合并,css压缩

    最近需要对项目进行优化,主要是对js的压缩合并和css文件的压缩,查找相关资料之后发现gulp可以实现相关的功能,特此分享一下使用心得. 1.安装gulp gulp是基于Node.js的前端构建工具. ...

  9. gulp css html image js 合并压缩

    安装node.js  npm  以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引 ...

随机推荐

  1. jquey学习2之jquery动态添加页面片段

    第一个方法:append()方法 [1]$(selector).append(content)//向匹配的所有标签中的内容末尾处添加Html代码,会编译成页面显示. <html> < ...

  2. python 编码类型

    碰到各种编码混用, 则需要搞清楚. http://blog.csdn.net/lxdcyh/article/details/4018054. https://www.jianshu.com/p/a5b ...

  3. B树就想到这个

    比如要查找60 先在根结点中查,根结点里面有 17  35这2个关键字, 60 > 35,则从右边开始查找 p3指针开始查找 ,  到了第二层的最右边的那个结点开始查找 , 里面有  65  8 ...

  4. leetcode:Pascal's Triangle【Python版】

    1.这道题一次提交就AC了: 2.以前用C语言实现的话,初始化二维数组全部为0,然后每行第一个元素为1,只需要用a[i][j] = a[i-1][j]+a[i-1][j-1]就可以了: 3.在Pyth ...

  5. 模板引擎之jade 学习

    jade 模板引擎在node express 开发中有较多的使用,首先我们看一个简单的使用jade 生成的html 页面的标签代码: doctype html html(lang="en&q ...

  6. Linux性能测试工具安装全集

    stress 下载地址:http://people.seas.harvard.edu/~apw/stress/ 一.stress工具安装:1.获取stress源码安装包(stress-1.0.4.ta ...

  7. hadoop之 exceeds the limit of concurrent xcievers处理

    dfs.datanode.max.transfer.threads: 默认 4096 < 2.0之前该参数为dfs.datanode.max.xcievers >解释:Specifies ...

  8. RAC2——11g Grid Infrastructure的新机制

    版权声明:本文为博主原创文章,未经博主允许不得转载. 可以看到,最初CRS(Cluster Ready Services)名词的起源就是因为10.1中作为集群软件的原因.后来经历了Clusterwar ...

  9. commonJS模块规范 和 es6模块规范 区别

    ES6 模块与 CommonJS 模块的差异 CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用. CommonJS 模块是运行时加载,ES6 模块是编译时输出接口. Commo ...

  10. SVN同步

    SVN同步:1.在备份服务器上安装SVN,之后创建同名的库名2.在备机的Repositories的库文件夹下的hooks目录下,备份并修改pre-revprop-change.tmpl文件为pre-r ...