Check many files for change

[JacobDB]

Is there any way to check for many files changed? For example, gulp-newer("./assets/styles/**.*.scss")

[jdnichollsc]

changed? use gulp-changed... xD

[tschaub]

@revxx14 see the readme for detail on working with many:1 source:dest mappings.

You may be working with a single source file that imports additional files. And maybe you are wanting the single source file to be included any time any of those imports changes. This is a case that gulp-newer is not set up to handle (neither is gulp-changed). It would be possible to add support for an optional glob of additional paths to check.

[JacobDB]

@tschaub you're exactly right, I have some SCSS files (modern.scss and legacy.scss) that import a bunch of other files. I don't really care if it's checking the actual imports, as I can say something like "if anything in src/assets/styles/ has changed" which is effectively the same thing.

You mentioned something about an optional glob, but I don't understand what that means. Do you have an example I could look at? Or are you saying that that's a feature you'd consider adding? I'll search around in the mean time.

[JacobDB]

@tschaub just wondering if you'd seen my response?

[TimMensch]

I actually submitted a pull request adding a feature that supports a version of this, though my need didn't require glob support:

https://github.com/tschaub/gulp-newer/pull/35

Looking back, I submitted it a day after the bug was filed, but just coincidentally; I was scratching my own itch at the time.

The idea is that you can add an options.extra parameter that is either a single file or an array of files. These files are not fed into the stream; it just looks at their time stamps and if any of them have been updated, it forces all files to be rebuilt, just like in the many:1 code path.

If you really want to use a glob, you can do that at the JavaScript level by running the glob and then feeding it into the array. Or ask nicely and maybe I'll add glob support; I'm sure it wouldn't be hard. :)

You can try it out by pointing at:

https://github.com/TimMensch/gulp-newer

...instead of the default gulp-newer.

[JacobDB]

Thanks much, that's good information. I think I would need glob support as I try to keep my gulpfile universal between projects and the included Sass files change between projects.

When I have time to work on my gulpfile again I'll give it a shot with your version and report back how it goes. Might not be a for a few weeks, though.

[TimMensch]

OK, I got bored and added file globbing to the "extra" parameter in my fork. Works the same except that all files you list can optionally be globs. Was just a few more lines of code. Most of the logic was the same, and it took all of 10 minutes. Promises are awesome. :)

Let me know how it works for you when you get a chance to test it. No hurry.

Enjoy!

[JacobDB]

Very cool, thanks much! I'll give it a shot next week ☺

[JacobDB]

Finally got a chance to try this out, but I'm a bit confused on how to get it working. Is this the correct format?

.pipe(newer(cssDirectory + "/modern.css", {extra: cssDirectory + "/**.*.scss"})) // doens't work due to imports

Full task:

// styles task, compiles & prefixes SCSS
gulp.task("styles", function () {
    "use strict";

    // development CSS directory
    var cssDirectory = dev + "/assets/styles";

    // production CSS directory (if --dist is passed)
    if (argv.dist) {
        cssDirectory = dist + "/assets/styles";
    }

    // clean directory if --clean is passed
    if (argv.clean) {
        del(cssDirectory + "/**/*");
    }

    // compile all SCSS in the root styles directory
    return gulp.src(src + "/assets/styles/*.scss")
        // prevent breaking on error
        .pipe(plumber({errorHandler: onError}))
        // check if source is newer than destination
        .pipe(newer(cssDirectory + "/modern.css", {extra: cssDirectory + "/**.*.scss"})) // doens't work due to imports
        // initialize sourcemap
        .pipe(sourcemaps.init())
        // compile SCSS (compress if --dist is passed)
        .pipe(gulpif(argv.dist, sass({outputStyle: "compressed"}), sass()))
        // prefix CSS
        .pipe(autoprefixer("last 2 version", "ie 8", "ie 9"))
        // write the sourcemap (if --dist isn't passed)
        .pipe(gulpif(!argv.dist, sourcemaps.write()))
        // output to the compiled directory
        .pipe(gulp.dest(cssDirectory))
        // reload the files
        .pipe(browserSync.reload({stream: true}))
        // notify that the task is complete
        .pipe(notify({message: "Styles task complete!", onLast: true}));
});

[JacobDB]

I'm sure I'm doing something wrong :) Just tried this, and it doesn't appear to work:

.pipe(newer({dest: cssDirectory + "/modern.css", extra: cssDirectory + "/views/_screen.scss"}))

Whenever you get a chance, I'd appreciate an example. Thanks much!

[JacobDB]

Whoops! I was just being dumb :) I was checking my destination files instead of my source files. The correct code is as follows:

.pipe(newer({dest: cssDirectory + "/modern.css", extra: [src + "/assets/styles/**/*.scss"]}))

Works great, thanks so much!!

[TimMensch]

Thanks, glad it worked for you! The pull request was accepted so it should be in the main gulp-newer, by the way. Wanted to add that here for posterity. :)