代码之家 › 专栏 › 技术社区 › Riccardo De Contardi

吞咽任务-吞咽后使用postcss精灵

postcss gulp-sass css-sprites gulp

0

Riccardo De Contardi · 技术社区 · 5 年前

我是一个gulp初学者,我想后处理我的css文件(用gulp sass构建)和使用postss精灵。我会努力解释自己:

我的设置:

./source/Scss/ <-- contains Scss files ./source/Assets/Images/ <-- contains Images used in CSS (not part of the sprite) ./source/Assets/Sprites/ <-- contains all the .png images that will be part of the sprite

生成的文件结构如下

./dist/Assets/Css/ ./dist/Assets/Images/ ./dist/Assets/Sprites/

这是我迄今为止写的:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');   
var sprites  = require('postcss-sprites');

gulp.task('sass', function() {
    var spritesopts = {
        spritePath: './dist/Assets/Sprites/'
    };
    
    var plugins = [
        autoprefixer(),
        sprites(spritesopts)

    ];  
  
  return gulp.src('./source/Scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(plumber())    
    .pipe(sass({
        outputStyle: 'expanded',
        sourceComments:true,
        sourceMap: true
    }).on('error', sass.logError))
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/Assets/Css'));
});

请注意 ./dist/Assets/Sprites/ 与其他任务一起预先复制。

css编译后的文件具有到每个文件的正确相对路径,例如,如果我在 ./source/Assets/Sprites/knot.png 我的css文件将包含:

body { background: url("../Sprites/knot.png"); }

我的问题是精灵的任务似乎不起作用…sprite.png文件没有生成,看起来css文件中什么也没有做。

我忘了什么?谢谢你的帮助

更新

添加后 verbose:true 对于postss sprites配置,我做了一些小的改进:输出消息在某个点读取:

postcss-sprites Skip ../Images/logo_staff.png because doesn't exist. +8ms postcss-sprites Skip ../Sprites/knot.png because doesn't exist. +9ms 所以,我看到两个问题

1)所有 src() css文件中的声明是解析的,我不知道如何使它只考虑那些 src(../Sprites/something.png)

2)我不明白这些投诉是因为找不到文件还是因为看不到文件。我还没有找到什么组合 stylesheetPath , spritePath 和 basePath 应该使用…

更新2

我几乎可以用 postcss-assets ;

以下是工作配置:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var updateRule = require('postcss-sprites/lib/core').updateRule; 
var assets  = require('postcss-assets');
var sprites  = require('postcss-sprites');

// Compiles  Sass
gulp.task('sass', function() {      

    var assetsopts = {    
        cachebuster: true,
        loadPaths: ['Fonts/', 'Images/', 'Sprites/'],
        relative: true,          
        basePath: './dist/Assets/'       
    };
    var sassopts = {
        outputStyle: 'expanded',
        sourceComments:true,
        sourceMap: true
    };
    var spritesopts = {
        spritePath: "./dist/Assets/Sprites/",
        retina: true,
        verbose:true,
        // use only images inside Sprites
        filterBy: function(image) {
                
            if (!/Sprites\//.test(image.url)) {
                return Promise.reject();
            }
            return Promise.resolve('Sprites');
        }                    
    };
    
    var plugins = [        
        autoprefixer(),
        assets(assetsopts),
        sprites(spritesopts)
    ];  
  
  return gulp.src('./source/Scss/*.scss')
    .pipe(sourcemaps.init())
    .pipe(plumber())    
    .pipe(sass(sassopts).on('error', sass.logError))
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/Assets/Css'));
});

这个配置几乎可以满足我的所有需要,除了一件事

1)编译后的css中的资产路径变成: body { background: url('../../dist/Assets/Images/logo.png?1666708ec50'); } 这没有错,但我更希望更简洁 ../Images/logo.png 有可能得到吗?

0 回复 | 直到 5 年前