Gulp 文件夹编译

Question

我对 gulp 比较陌生。当我尝试用子文件夹及其 sass 文件编译一个目录时，我遇到了一个问题。

文件夹结构：

|_sass
   |__folder1
   |   |_file.sass
   |__folder2
   |   |_file.sass
   |__folder3
       |_file.sass

我尝试编译的简单 gulp 任务

gulp.task('sass', function(){
  return sass('sass/')
    .pipe(gulp.dest('css');
}

上面的这个任务不适用于文件夹，但是如果我在下面的 gulp 任务中指定文件，它可以正常工作。

gulp.task('sass', function(){
  return sass('sass/folder1/file1.sass')
    .pipe(gulp.dest('css');
}

我已经检查了 repository (gulp-ruby-sass) 和 stackoverflow 中的其他主题的文档，我发现的一种解决方案是将所有 sass 代码导入一个文件并编译它。

我尝试了不同的路径：./sass、sass、sass/，甚至最后一个语法 gulp.src(path/**/*.sass) 和 gulp-sass 存储库也是如此。

你能帮帮我吗？ 提前致谢

Answer 1

编辑：使用gulp-sass，而不是gulp-ruby-sass，因为gulp-ruby-sass 只支持单个文件，如docs 中所述：

gulp-ruby-sass 还不支持 glob，只支持单个文件或目录。就像萨斯一样。

您应该使用有效的全局参数gulp.src() 创建一个流，而不是直接调用sass() 并在pipe() 中调用它：

gulp.task('sass', function (){
  return gulp.src([
    'sass/folder1/file.sass',
    'sass/folder2/file.sass',
    'sass/folder3/file.sass'
  ])
    .pipe(sass())
    .pipe(gulp.dest('css'));
});

如果您只想导入的文件名称正确（以下划线开头），这应该也可以：

gulp.task('sass', function (){
  return gulp.src('sass/**/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('css'));
});

编辑：修复了一些代码错误 - 所以需要一个 linter (;