Question

我是一个相对较新的人。当我尝试使用带有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)和其他主题的文档，我找到的一个解决方案是将所有sass代码导入到一个文件中并进行编译。

我尝试了不同的路径：./sass，sass，sass/，即使是带有gulp.src(path/**/*.sass)存储库的gulp-sass的最后一种语法也是如此。

你能帮帮我吗？提前致谢

Answer 1

修改：使用gulp-sass而非gulp-ruby-sass，因为gulp-ruby-sass仅支持单个文件，如docs中所述：

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

您应该使用有效的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'));
});

修改：修正了一些代码错误 - SO需要一个linter（;

Gulp文件夹编译

1 个答案: