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

Question

所以目前在我的 gulp 设置中，我生成了很多 CSS 文件 - 一个通用的 'core' 文件，然后是特定于模板的样式表。

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

然后我想到，与其写出所有的监视文件路径，不如直接 'crawl' 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。

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

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

所有代码示例都是针对 gulpJS v4 的，因此请通过项目目录中的运行ning 控制台命令确保它是您当前拥有的版本 -> gulp -v
除了gulpV4你还需要安装gulp-dependents插件。您可以通过运行ning 控制台命令来完成：npm i --save-dev gulp-dependents 在您的项目文件夹中。
在您的 gulpfile.js 中，您需要添加新的导入语句。对于 v4，它看起来像：const dependents = require("gulp-dependents")
最后，您需要更新 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() -> 运行s a deep search with regExp 并查找依赖于管道中当前文件的文件。这正是您在原始问题中试图描述的内容；
而且我认为您熟悉 .scss() 和 gulp.dest 在做什么。 :)
最终结果 -> 只会编译更改的样式；

如果你有多个样式函数，我建议你创建一个新的（这样你就不会打破你以前的工作常规），并测试这个新的感觉如何。

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

P.P.S如果有什么问题，我很乐意回答。

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

NPM Gulp > retrieve SCSS import filepaths

css

npm

sass

gulp