CODEWITHSUNDEEP
sassgulpgulp-sassgulp-spritesmith
Julien Alary
Julien Alary

Reputation: 780

Gulp with spritesmith and sass compilation

I have the following issue in my gulp build. In one task, I create sprite files for each of my folder and then I run a task compiling sass files which uses spritesmith sass files. I got the following error :

Error: File to import not found or unreadable: sprites/x

NB: x is the name of my folder in ASSETS_SPRITE_SRC

Here is my spritesmith task

    export = function buildAssets(gulp, plugins, option) {
      return function () {
      var folders = getFolders(ASSETS_SPRITE_SRC);
      folders.map(function(folder) {
          var spriteData = gulp.src(path.join(ASSETS_SPRITE_SRC, folder, '/*.*'))
              .pipe(plugins.spritesmith({
                  imgName: folder + '.png',
                  cssName: folder + '.scss'
              }));
          spriteData.img.pipe(gulp.dest(ASSETS_SPRITE_DEST));
          spriteData.css.pipe(gulp.dest(STYLE_SRC + '/sprites'));
      });
      return gulp.dest(STYLE_SRC + '/sprites');
  };
}

function getFolders(dir) {
    return fs.readdirSync(dir)
        .filter(function(file) {
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
}

inspired from: https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md

And here is my sass task

export = function buildSassDev(gulp, plugins, option) {
    return function () {
        return gulp.src(join(STYLE_SRC, '**', '*.scss'))
            .pipe(plugins.sass().on('error', plugins.sass.logError))
            .pipe(gulp.dest(CSS_DEST));
    }; }

I run buildAssets first, then buildSassDev.

What I'm wrong about ?

Upvotes: 1

Views: 1031

Answers (1)

Julien Alary
Julien Alary

Reputation: 780

I finally found what I was wrong about. I needed to merge both spriteData.img.pipe and spriteData.css.pipe to be sure they were both ok.

Here is the right code:

export = function buildAssets(gulp, plugins, option) {
return function () {
    var folders = getFolders(ASSETS_SPRITE_SRC);
    var tasks = folders.map(function (folder) {
        var spriteData = gulp.src(path.join(ASSETS_SPRITE_SRC, folder, '/*.*'))
            .pipe(plugins.spritesmith({
                imgName: folder + '.png',
                cssName: folder + '.scss'
            }));
        var imgStream = spriteData.img.pipe(gulp.dest(ASSETS_SPRITE_DEST));
        var cssStream = spriteData.css.pipe(gulp.dest(STYLE_SRC + '/sprites'));
        return merge(imgStream, cssStream);
    });
    return merge(tasks);
};

}

Upvotes: 2

Related Questions