zoukankan      html  css  js  c++  java
  • gulp-css-spriter图片精灵

    1.在当前目录下安装npm install gulp-css-spriter

    2.gulpfile.js中
    var gulp = require('gulp'),
    spriter = require('gulp-css-spriter');
    gulp.task('spritercss1', function() {
    return gulp.src('./css/1.css')
    .pipe(spriter({
    'spriteSheet': './dist/img/spritesheet.png',
    'pathToSpriteSheetFromCSS': '../img/spritesheet.png'
    }))
    .pipe(gulp.dest('./dist/css'));
    });

      总结:路径不能乱写否则会覆盖原css,原css中的路径不对了,就不能生成图片精灵了。

    -----------------------------------------------

    若只是合并部分图片则,

    摘自http://www.qianduancun.com/npm/43.html

    1.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);
        }
    }
    

     原css中这样写:

     

       区别于:

       

       这样只有带?_spriter的图片会合并。

  • 相关阅读:
    输出菱形
    for语句输出三角形
    阶乘倒数的和
    变量赋值判断奇偶
    928作业
    各种主流数据库的比较(所以说我觉得Oracle这个keng?入的不错?)
    Oracle创建表
    (转载)全球唯一标识GUID
    (转载)Java基础知识总结
    两天以来对plsqldev操作的记忆
  • 原文地址:https://www.cnblogs.com/lichaoqing/p/5676991.html
Copyright © 2011-2022 走看看