如何使用Gulp编译不同目录中的SASS文件？

I'm using gulp-ruby-sass to compile my js and sass.

我正在使用gulp-ruby-sass编译我的js和sass。

I ran into this error first TypeError: Arguments to path.join must be strings

我首先遇到了这个错误TypeError：path.join的参数必须是字符串

Found this answer and it was because I was using sourcemaps with gulp-sass and the answer recommended using gulp-ruby-sass instead.

找到这个答案，这是因为我使用的是源代码和gulp-sass，建议使用gulp-ruby-sass代替。

Next I tried to compile all my SASS files using this syntax:

接下来，我尝试使用以下语法编译所有SASS文件：

gulp.task('sass', function () {
    return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
        .pipe(sourcemaps.init())
        .pipe(concat('bitage_public.css'))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('public/_assets/css'))
        .pipe(livereload());
});

Which produced this error: gulp-ruby-sass stderr: Errno::ENOENT: No such file or directory - public/_sources/sass/**/*.scss

产生了这个错误：gulp-ruby-sass stderr：Errno :: ENOENT：没有这样的文件或目录 - public / _sources / sass / ** / * .scss

I then noticed in the answer I found the author wrote that globes ** aren't supported yet:

然后我在答案中注意到我发现作者写道，尚未支持地球仪**：

Also keep in mind, as of this writing when using gulp-ruby-sass 1.0.0-alpha, globs are not supported yet.

另外请记住，在撰写本文时，使用gulp-ruby-sass 1.0.0-alpha时，还不支持globs。

I did more digging and found a way to use an Array to specify the paths to my SASS files, so then I tried the following:

我做了更多的挖掘，并找到了一种方法来使用数组来指定我的SASS文件的路径，所以我尝试了以下内容：

gulp.task('sass', function () {
    return sass(['public/_sources/sass/*.scss',
             'public/_sources/sass/layouts/*.scss',
             'public/_sources/sass/modules/*.scss',
             'public/_sources/sass/vendors/*.scss'], { style: 'compressed' })
    // return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
    .pipe(sourcemaps.init())
    .pipe(concat('bitage_public.css'))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('public/_assets/css'))
    .pipe(livereload());
});

But still I'm getting Errno::ENOENT: No such file or directory and it lists all the dirs I put into that array.

但我仍然得到Errno :: ENOENT：没有这样的文件或目录，它列出了我放入该数组的所有目录。

How do you compile SASS in multiple directories with gulp?

如何使用gulp在多个目录中编译SASS？

SASS source folder structure:

SASS源文件夹结构：

_sources
    layouts
        ...scss
    modules
        ...scss
    vendors
        ...scss
    main.scss

2 个解决方案

#1

Figured it out!

弄清楚了！

Well not 100%, still not sure why the multiple path array didn't work.

不是100％，仍然不确定为什么多路径数组不起作用。

Anyways so I forgot that in my main web.scss file I already had multiple import statements setup:

无论如何，所以我忘了在我的主web.scss文件中我已经设置了多个import语句：

@import "vendors/normalize";    // Normalize stylesheet
@import "modules/reset";        // Reset stylesheet
@import "modules/base";         // Load base files
@import "modules/defaults";     // Defaults
@import "modules/inputs";       // Inputs & Selects
@import "modules/buttons";      // Buttons
@import "modules/layout";       // Load Layouts
@import "modules/svg";          // Load SVG
@import "modules/queries";      // Media Queries

So I didn't actually need to try use Gulp the way I was trying, I just needed to target that 1 .scss file directly. So I did that here:

所以我实际上并不需要按照我尝试的方式尝试使用Gulp，我只需要直接定位1 .scss文件。所以我在这做了：

// Compile public SASS
gulp.task('sass', function () {
return sass('public/_sources/sass/bitage_web.scss', { style: 'compressed' })
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('public/_assets/css'))
    .pipe(livereload());
});

Now it works because it sees a specific file to target and compile

现在它可以工作，因为它看到了一个特定的文件来定位和编译

#2

I was having trouble using '*.scss' too

我也无法使用'* .scss'

In the git documentation (https://github.com/sindresorhus/gulp-ruby-sass) they use this sintax:

在git文档（https://github.com/sindresorhus/gulp-ruby-sass）中，他们使用了这个sintax：

gulp.task('sass', function(){
   return sass('public/_sources/sass/',
   { style: 'compressed'})
.pipe(sourcemaps.init())
});

I tested it and it works, it compiles all the files within the folder.

我测试了它并且它工作，它编译文件夹中的所有文件。

Just in case someone has the same problem

以防有人遇到同样的问题

#1