时间戳

首页 > 解决方案 > NPM Gulp > 检索 SCSS 导入文件路径

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

问题描述

因此，目前在我的 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）并且可能会有其他问题。

有任何想法吗？

提前致谢。

标签： cssnpmsassgulp

解决方案

您试图实现的称为增量构建系统，这意味着 - 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()->使用 regExp 运行深度搜索，并找到依赖于管道中一个当前文件的文件。这正是您在原始问题中试图描述的内容；
  • 我认为你熟悉什么.scss()和gulp.dest正在做什么。:)
  • 最终结果 -> 仅编译更改的样式；
  1. 如果您有多种样式功能，我建议您创建一个新功能（这样您就不会破坏以前的工作程序），并测试这个新功能的感觉。

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

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

推荐阅读