Задача gulp использовать postcss-sprites после gulp-sass - PullRequest
Новая
       42

Задача gulp использовать postcss-sprites после gulp-sass

0 голосов
/ 05 декабря 2018

Я новичок в gulp и хочу постобработать свои css-файлы (созданные с помощью gulp-sass) и использовать postcss-sprites.Я попробую объяснить:

Моя настройка:

./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 в конфигурацию postcss-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 можно ли его получить?

...