Extract SCSS import filepaths using NPM and Gulp

Question

Extract SCSS import filepaths using NPM and Gulp

Currently, in my gulp setup, I have several CSS files being produced - a general 'core' one, and then template-specific stylesheets.

Instead of re-compiling all stylesheets with each change, the setup only compiles the necessary ones. However, this has resulted in complex "watch" paths that cover many files reflecting what's in the primary SCSS files for each template (which contain @use/@import statements).

I had an idea: rather than manually writing out all the watch filepaths, why not 'crawl' the SCSS file to automatically grab all the filepaths for any @use/@import statements recursively?

For example, let's take this "blog.scss" file:


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

Is there a way to extract all the filepaths for its @import statements? Like so:

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

I've thought about fetching the file as a string and using regex, but that wouldn't account for file extensions (.scss/.css/_partials.scss) and could lead to other issues.

Any suggestions or ideas are greatly appreciated.

Thanks in advance!

css npm sass gulp

Answer 1

Answer №1

Incremental build systems are designed to compile only files that have been changed, without affecting anything else.

If you want to dive deeper into this concept, I highly recommend reading the article titled Incremental SASS Builds with Gulp by Sarthak Batra.

For a quick solution, follow these steps:

Ensure you are using gulpJS v4 by checking your project directory with the console command: gulp -v
Install the gulp-dependents plugin using the command: npm i --save-dev gulp-dependents in your project folder.
Add the import statement for
```
const dependents = require("gulp-dependents")
```
in your gulpfile.js.
Update your gulp styles function to only compile changed files.

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 refers to the path of your styles folder;
since: gulp.lastRun(styles) checks if current files have been changed since the last run;
.dependents() performs a deep search to find files dependent on the current one in the pipeline;
The .scss() and gulp.dest functions are self-explanatory;
Only the styles that were edited will be compiled as a result;

If you have multiple styles functions, consider creating a new one to avoid disrupting your workflow.

P.S Using since.lastRun ensures changes are detected correctly after the first run, following a process of compiling everything initially, waiting for changes, checking changes, and compiling only edited files.

P.P.S Feel free to ask any questions you may have!

Answer 2

Incremental build systems are designed to compile only files that have been changed, without affecting anything else.

If you want to dive deeper into this concept, I highly recommend reading the article titled Incremental SASS Builds with Gulp by Sarthak Batra.

For a quick solution, follow these steps:

Ensure you are using gulpJS v4 by checking your project directory with the console command: gulp -v
Install the gulp-dependents plugin using the command: npm i --save-dev gulp-dependents in your project folder.
Add the import statement for
```
const dependents = require("gulp-dependents")
```
in your gulpfile.js.
Update your gulp styles function to only compile changed files.

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 refers to the path of your styles folder;
since: gulp.lastRun(styles) checks if current files have been changed since the last run;
.dependents() performs a deep search to find files dependent on the current one in the pipeline;
The .scss() and gulp.dest functions are self-explanatory;
Only the styles that were edited will be compiled as a result;

If you have multiple styles functions, consider creating a new one to avoid disrupting your workflow.

P.S Using since.lastRun ensures changes are detected correctly after the first run, following a process of compiling everything initially, waiting for changes, checking changes, and compiling only edited files.

P.P.S Feel free to ask any questions you may have!

Extract SCSS import filepaths using NPM and Gulp

Answer №1

Similar questions

Encountering a problem while trying to install Gulp

Encountering the error "Module 'aws-sdk', 'child_process', 'net' cannot be resolved" within the /node_modules/watchpack directory when using Webpack

Encountering a problem with VUE3: npm init due to unexpected token error

The styles for the React calendar are not being properly applied to the calendar component due to CSS overriding

How can I make a bootstrap container maximize the available viewport space?

Troubleshooting: Broccoli Builder encountered an issue with the `UglifyWriter` plugin while working with an Ember application

Is there a way for me to customize the appearance of the Material UI switch component when it is in the checked

Create a dynamic animation effect for the placeholder in an input field that triggers when the user starts typing

Is there no sign of rails being utilized in production?

The problem encountered with Electron Forge is: "unable to create a package for Linux with a deb target."

Button activates SVG animation

Conceal the browser scrollbars

Tips for integrating CSS with Material UI TableContainer

Creating a looping animation on multiple elements using jQuery that makes them fade in and out at different intervals

Creating a basic popup with jQuery: A step-by-step guide

Combining HTML, CSS, JAVASCRIPT, and PHP for a seamless web development experience

How about connecting Gulp to an Express server?

CSS: the enigmatic padding of absolute positioning within a table cell

Animating file transfer can be achieved using either JavaScript or CSS

Aligning list items with Bootstrap