npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dietechniker/gulp-sass-dependency-tracker

v1.2.0

Published

A NodeJS gulp package to optimize sass compilation - only compile what you actually changed.

Downloads

27

Readme

GulpSassDependencyTracker GitHub version npm version

A NodeJS module for keeping things easy in sass tasks for Gulp.
This gulp plugin filters the file stream to include only scss files that have to be recompiled.
Also features automatic dependency tracking based on the same stream.
Best fitted for gulp watch tasks where partial rebuilds are desirable.

Example usage

Firstly, here's a quick example:

// Sass-Dependency-Tracker for partial recompilation
const SassDepTracker = require('@dietechniker/gulp-sass-dependency-tracker');
const sassDepTracker = new SassDepTracker();

const fileGlob = 'resources/sass/**/*.s[a|c]ss';

gulp.task('sass', function () {
    gulp.src(fileGlob)
                .pipe(sassDepTracker.filter())
                .pipe(gulpPrependAppend.prependText(`@import 'some-mandatory-import-prepended';`))
                .pipe(sassDepTracker.inspect(sassOptions))
                .pipe(sassDepTracker.logFiles())
                .pipe(sass(sassOptions).on('error', sass.logError))
                .pipe(sassDepTracker.reportCompiled())
                .pipe(gulp.dest('.'))
});

gulp.task('sass:watch', function () {
    let watcher = gulp.watch(fileGlob, 'sass');
    
    watcher.on('unlink', file => {
        log.info(`File deleted: ${file.path}`);
        sassDepTracker.queueRebuild(file);
    });
    
    watcher.on('add', file => {
        log.info(`File added: ${file.path}`);
    });
    
    watcher.on('change', file => {
        log.info(`File changed: ${file.path}`);
        sassDepTracker.queueRebuild(file);
    });
});

As you can see, we have four main things to register in order to get things flying:

  1. Create our instance of the sass helper
  2. Pipe the stream into DependencyTracker#filter()
    2.1 Optionally pipe through DependencyTracker#logFiles() if you want a notification about whats left in the stream.
  3. Pipe the stream into DependencyTracker#inspect(<sassOptions>)
  4. Pipe the stream into gulp-sass or any similar compilation package.
  5. Pipe the stream into DependencyTracker#reportCompiled() to mark them as compiled.
  6. Notify the sass helper when a file is removed or changed so we can mark them dirty.

Note: On the first run all files in the stream are marked dirty as none of them have been analyzed yet.

filter()

The filter function is responsible for keeping only the files in the stream which need to be recompiled.
When a file change is reported (#queueRebuild), the file and all its depending files will be marked for recompile.

inspect(<sassOptions>)

When the stream is piped through this function, the plugin reads @import statements from the files contents.
This information is used to determine which files depend on which.
That also means, that any dependencies not in the stream cannot be tracked. (Little hint at the bottom)

queueRebuild(<file>) on watchers

When a file has been changed, it needs to be marked for recompilation with its depending files.
This method does exactly that.
It is recommended that file is a Vinyl file but an absolute normalized path should work too.

logFiles

Just a convenience function that logs out the absolute file paths from the stream so you know what will be compiled.

Dependency detection

In normal use cases, the helper can detect all dependencies through the inspect function.
That means that any dynamically injected imports will have to be added before filter() is called.
If you need to have dependencies tracked which are not/never included in the stream, you may manually register them.
Take a look at #reportImport(<match>, <file>, <sassOptions>) for that purpose.

Options

There are two kinds of options:

  1. SassOptions
    Used to retrieve the includePaths from the options so we can properly resolve the imports.
  2. Module options with:
  {
    debug: false // Whether or not to provide debug log message (e.g. from the dependency detection)  
    suppressOutput: false // Whether or not to suppress all console messages,
    filterNonSass: false // Whether or ot to exclude non-sass files from the stream when running through #filter
  }