zoukankan      html  css  js  c++  java
  • gulp-css-spriter 将css代码中的切片图片合并成雪碧图

    NPM地址:https://www.npmjs.com/package/gulp-css-spriter/

     配置gulpfile.js:

     var gulp = require('gulp'),

        minifyCSS = require('gulp-minify-css'),
        spriter = require('gulp-css-spriter');

    gulp.task('css', function() {

        var timestamp = +new Date();
        //需要自动合并雪碧图的样式文件
        return gulp.src('./src/css/style.css')
            .pipe(spriter({
                // 生成的spriter的位置
                'spriteSheet': './dist/images/sprite'+timestamp+'.png',
                // 生成样式文件图片引用地址的路径
                // 如下将生产:backgound:url(../images/sprite20324232.png)
                'pathToSpriteSheetFromCSS': '../images/sprite'+timestamp+'.png'
            }))
            .pipe(minifyCSS())
            //产出路径
            .pipe(gulp.dest('./dist'));
    });

     技巧 :

     gulp-css-spriter默认会对样式文件里,所有的background/background-image的图片合并,

     但实际项目中,我们不是所有的图片都需要合并。

     background-image: url(../slice/p1-3.png?__spriter);//有?__spriter后缀的合并

     background-image: url(../slice/p-cao1.png); //不合并 

     修改下面文件可以按需合并。

     node_modulesgulp-css-spriterlibmap-over-styles-and-transform-background-image-declarations.js

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

                      // background-image always has a url 且判断url是否有?__spriter后缀

                    if(transformedDeclaration.property === 'background-image' && /?__spriter/i.test(transformedDeclaration.value)) {

                        transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');
                        return cb(transformedDeclaration, declarationIndex, declarations);
                    }
                    // Background is a shorthand property so make sure `url()` is in there 且判断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);
                        }
                    }

     如图:

     

     执行效果:

     

  • 相关阅读:
    表单自动填充autocomplete的兼容性方案
    函数的默认参数值
    利用zookeeper搭建hadoop HA集群
    zookeeper设置开机启动项
    zookeeper集群挂了的恢复流程
    zookeeper集群搭建
    docker 安装ElasticSearch的中文分词器IK
    [1]: max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144]
    把mysql服务设置开机启动项
    docker-compose的使用
  • 原文地址:https://www.cnblogs.com/dreamback/p/gulp-css-spriter.html
Copyright © 2011-2022 走看看