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

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

我首先遇到了这个错误TypeError: Arguments to path.join must be strings

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

接下来,我尝试使用以下语法编译所有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());
});

哪个产生了这个错误: gulp-ruby-sass stderr: Errno::ENOENT: No such file or directory - public/_sources/sass/**/*.scss

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

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

我做了更多的挖掘,并找到了一种方法来使用数组来指定我的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());
});

但我仍然得到Errno::ENOENT: No such file or directory它,它列出了我放入该阵列的所有目录.

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

SASS源文件夹结构:

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

Leon Gaban.. 7

弄清楚了!

不是100%,仍然不确定为什么多路径数组不起作用.

无论如何我忘了在我的主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

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

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

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

弄清楚了!

不是100%,仍然不确定为什么多路径数组不起作用.

无论如何我忘了在我的主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

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

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

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

我也无法使用'* .scss'

在git文档（https://github.com/sindresorhus/gulp-ruby-sass）中，他们使用以下正弦值：

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

我对其进行了测试，并且可以正常工作，它可以编译文件夹中的所有文件。

万一有人遇到同样的问题