NPM Gulp > 检索 SCSS 导入文件路径

Question

因此，目前在我的 gulp 设置中，我生成了许多 CSS 文件 - 一个通用的“核心”文件，然后是特定于模板的样式表。

它不是在每次更改时重新编译所有样式表，而是只编译所需的样式表 - 但这会导致复杂的“监视”路径，涵盖许多文件，这些文件仅反映每个模板的主要 SCSS 文件中的内容（包括@use/@import 语句）。

然后我突然想到，与其写出所有的监视文件路径，我只是简单地“抓取”SCSS 文件并递归地抓取任何@use/@import 语句的所有文件路径，这不是很好吗。

举个例子，假设我有这个“blog.scss”文件：

    // Variables 
    @import 'variables';
    
    // Tools
    @import './tools';
    
    // Parts
    @import './core/base';
    @import './templates/blog';

是否可以为其@import 语句获取所有文件路径，例如：

'local-dev/styles/variables.scss'
'local-dev/styles/tools.scss'
'local-dev/styles/core/base.scss'
'local-dev/styles/templates/blog.scss'

我考虑过简单地将文件作为字符串检索，并使用一些正则表达式 - 但这不会考虑文件扩展名 (.scss/.css/_partials.scss) 并且可能会有其他问题。

有什么想法吗？

提前致谢。

Answer 1

您试图实现的称为增量构建系统，这意味着 - we compile only those files, that were changed, and don't touch anything else。

如果你想深入了解细节，我真的推荐这篇文章 -> Sarthak Batra 的 Incremental SASS Builds with Gulp。

---

如果你只是想要 ready2go 解决方案，这里是：

1. 所有代码示例均适用于 gulpJS v4，因此请通过在项目目录中运行控制台命令确保它是您当前拥有的版本 -> gulp -v

2. 除了 gulpV4，你还需要安装 gulp-dependents 插件。您可以在项目文件夹中运行控制台命令：npm i --save-dev gulp-dependents。

3. 在您的 gulpfile.js 中，您需要添加新的导入语句。对于 v4，它看起来像：const dependents = require("gulp-dependents")

4. 最后，您需要更新 gulp 样式函数，并确保它只编译更改的文件。

function styles(callMeBack) {
  return gulp
    .src(paths.styles.src, { since: gulp.lastRun(styles) })
    .pipe(dependents())
    .pipe(scss())
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(browserSync.stream())
    .on("end", callMeBack)
}

• path.styles.src -> 您的样式文件夹的路径，在我的情况下，它看起来像 "app/static/styles/**/*.scss";
• since: gulp.lastRun(styles) -> gulpV4 API 调用，检查当前 blob 是否与上次函数运行时相同，并仅将更改的文件纳入管道；
• .dependents() -> 运行deep search with regExp 并查找依赖于管道中一个当前文件的文件。这正是您在原始问题中试图描述的内容；
• 我想你很熟悉.scss() 和gulp.dest 在做什么。 :)
• 最终结果 -> 仅编译更改的样式；

5. 如果您有多种样式功能，我建议您创建一个新功能（这样您就不会破坏以前的工作常规），并测试这个新功能的感觉。

P.S 因为我们使用since.lastRun -> 它只有在第一次运行后才能正常工作。所以这就像编译所有内容>等待更改>检查更改>只编译已编辑的内容

P.P.S 如果您有任何问题，我很乐意为您解答。