Gulp 使用 spritesmith 和 sass 编译

Question

我的 gulp 构建中存在以下问题。在一项任务中，我为我的每个文件夹创建精灵文件，然后我运行编译 sass 文件的任务使用 spritesmith sass 文件。我收到以下错误：

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

NB: x is the name of my folder in ASSETS_SPRITE_SRC

这是我的 spritemithm 任务

    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();
        });
}

灵感来自：https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md

这是我的 sass 任务

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

我先运行buildAssets，然后buildSassDev。

我哪里错了？

Answer 1

我终于找到我错的地方了。我需要合并 spriteData.img.pipe 和 spriteData.css.pipe 以确保它们都正常。

正确的代码如下：

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

}

Gulp 使用 spritesmith 和 sass 编译

Gulp with spritesmith and sass compilation

sass

gulp

gulp-sass

gulp-spritesmith