2createStudio / postcss-sprites

Generate sprites from stylesheets.
MIT License
413 stars 50 forks source link

Using postcss-sprites with gulp #22

Closed jaxxreal closed 9 years ago

jaxxreal commented 9 years ago

Hello! Earlier I used postcss-sprites@2.0.0 with gulp-postcss@5.1.8 plugin, but when I updated it to 6.0.0 it isn't work.

My gulpfile.js config is:

/* a lot of require's sections is  */

var preprocessors = [
    postcssImport({from: './'}),
    autoprefixer({ browsers: ['last 2 versions'] }),
    postcssMixins,
    postcssNested,
    postcssfor,
    postcssVars,
    postcssColor,
    cssnext,
    cssnano,
    sprites(opts)
  ];

gulp.task('styles', function () {
    return gulp.src($config.cssMain)
        .pipe($.sourcemaps.init())
        .pipe($.postcss(preprocessors))
        .pipe($.rename($config.cssOutputName))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest($config.cssOutput));
  });
vvasilev- commented 9 years ago

Hello, Can you paste some output from the task? :)

jaxxreal commented 9 years ago

It have usually output: 23 Sep 16:11:47 - [postcss-sprites] => Done.

But I mean that problem in order of execution, because plugin doesn't see all images. I has a several imports in my css which process by postcssImport plugin and situation looks like sprites plugin didn't wait when file concatenation process finished.

vvasilev- commented 9 years ago

I tried to reproduce the bug but I didn't succeed. Can you try to run the sprites plugin on separate pipe?

gulp.task('styles', function () {
    return gulp.src($config.cssMain)
        .pipe($.sourcemaps.init())
        .pipe($.postcss(preprocessors))
        .pipe($.postcss(sprites(opts))
        .pipe($.rename($config.cssOutputName))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest($config.cssOutput));
  });
jaxxreal commented 9 years ago

I choose another way, I change sprites position with cssnano in preprocessors array like this:

var preprocessors = [
    ....
    sprites(opts),
    cssnano,
  ];

And it's start work fine! I suppose cssnano@3.2.0 made some kind of problem for parsing file.