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

Is there a way to use a specific keyboard input to alter the characteristics of shapes on my webpage?

Tips for applying unique CSS classes to individual templates in Joomla

The terminal is unable to identify 'node' as a valid command, either internally or externally, in git bash. This could be due to it not being an operable

Place an element in a higher position than a slideshow

What is the correct method for installing webpack 4.19.1 on my system?

What is the best way to connect or link to a HTML table row <tr>

Scrollable Tailwind components

The display: flex property is not being properly implemented in Tailwind CSS for the sm:flex

Import data from a distant file into a node Buffer within the web browser

Is it possible to develop a Strapi plugin in real-time without the need to continuously rebuild the plugin?

What is the current importance of CSS3 vendor prefixes?

Comparing Express.js View Engine to Manual Compilation

Issue with conflicting peer dependency: React Native for iOS

Is it possible to direct the user to a particular link upon swiping to unlock?

Utilizing jQuery to apply a class to an element and modify the CSS parameters with custom values simultaneously

What changes should I make to my code in order to incorporate an additional level of submenu to my CSS-based dropdown menu?

What are the steps to integrate and utilize DefinePlugin within your webpack configuration?

Having trouble placing the flash element above the HTML?

What is the best way to highlight and extract only the white-coded texts on VSCode to facilitate the process of translating webpages manually?

The Bootstrap Jumbotron section stubbornly stays above the footer