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

Posted 2023-03-06

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

【英文标题】：How to compile SASS files in different directories using Gulp?

【发布时间】：2015-04-15 18:25:44

【问题描述】：

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

我第一次遇到这个错误 TypeError:Arguments to path.join must be strings

找到 this answer，这是因为我使用的是带有 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 时，还不支持 glob。

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

【问题讨论】：

首先使用 gulp.src，然后使用 sass 插件对其进行管道传输。 Gulp src 使用 ** 处理地球仪

^ 不正确，请阅读问题

文档中的 Sourcemap 用法看起来与您的示例不同：github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0#sourcemap

我不明白为什么它不正确 Heikki。他可以使用旧版本的插件，该插件支持多个文件，并且可能工作正常，并最终在将来自动将功能添加到 ** inglobe 时更改它

我同意，加上它是正确的:)

【参考方案1】：

想通了！

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

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

@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，我只需要直接定位那个 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());
);

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

【讨论】：

很好，有趣的是，简单的解决方案经常是答案。

【参考方案2】：

我在使用“*.scss”时也遇到了问题

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

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

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

以防万一有人遇到同样的问题

【讨论】：

对我来说，我必须添加一个星号，例如“桌面/sass/共享/*”