Monday 8 March 2021

Gulp rebuild parent js files when partials are modified

I have the following gulp task for my js files:

gulp.task("js", () => {
  return gulp
    .src([
      src_js_folder + "*.js",
      src_js_folder + "**/*.js" // Include partial js files, to trigger the build when there is a change in them
    ], { since: gulp.lastRun("js"), read: false }) // no need of reading file because browserify does.
    .pipe(dependents())
    .pipe(filter(['**'].concat( // filter partial js files (inside subdirectories)
      readdirSync(src_js_folder, { withFileTypes: true }) // list all js files inside subdirectories
      .filter(dirent => dirent.isDirectory())
      .map(dirent => `!${src_js_folder.substring(2) + dirent.name}/**/*.js`)
    )))
    .pipe(plumber({errorHandler: reportError}))
    .pipe(tap(function (file) {
      logger.info('bundling ' + file.path);
      // replace file contents with browserify's bundle stream
      file.contents = browserify(file.path, {debug: true})
        .bundle();
    }))
    .pipe(buffer()) // transform streaming contents into buffer contents (because gulp-sourcemaps does not support streaming contents)
    .pipe(beautify.js({ indent_size: 2 }))
    .pipe(gulp.dest(dist_folder + "js"))
    .pipe(browserSync.stream());
});

And this watcher for browserSync:

 gulp.watch([src_js_folder + '**/*.js'], gulp.series("dev")).on("change", browserSync.reload);

So what I did in my task is I included the partial js files in the src as well, and then filter them to not build them.

The problem I'm having is that when I update a parent js file that includes these partials gulp is rebuilding them, but when I change something in the partials, gulp doesn't build the parent js files that include these partials.

for example if I change the following file: src_js_folder + 'somefile.js', gulp successfully rebuild the file:

[16:27:34] Starting 'js'...
[16:27:34] bundling ...\www-src\assets\scripts\global.V3-1.js
[Browsersync] 1 file changed (global.V3-1.js)
[16:27:34] Finished 'js' after 597 ms

But when I change something in the partial js file, for example: src_js_folder + '/subdir/_somePartialFile.js', gulp does nothing:

[16:29:21] Starting 'js'...
[16:29:21] Finished 'js' after 10 ms

The logic I followed in my task is the same as my sass task:

gulp.task("sass", () => {
  return (
    gulp.src([
        src_sass_folder + "*.scss",
        src_sass_folder + "**/*.scss"
      ], {
        since: gulp.lastRun("sass"),
      })
      .pipe(dependents())
      .pipe(filter(['**'].concat( // filter partial SASS files (inside subdirectories) this is used to not build the partial SASS files
        readdirSync(src_sass_folder, { withFileTypes: true }) // selector for all partial SASS files
        .filter(dirent => dirent.isDirectory())
        .map(dirent => `!${src_sass_folder.substring(2) + dirent.name}/**/*.scss`)
      )))
      .pipe(debug({title: "sass-debug:", showCount: false}))
      .pipe(sourcemaps.init())
      .pipe(plumber({errorHandler: reportError}))
      .pipe(sass({ fiber: Fiber })) // call asynchronous importers from the synchronous code path (for using Dart Sass)
      .pipe(autoprefixer())
      .pipe(minifyCss({debug: true}, (details) => {
        console.log(`Original size: ${details.stats.originalSize}, Minified size: ${details.stats.minifiedSize}, Efficiency: ${details.stats.efficiency}`);
      }))
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest(dist_folder + "Content"), {overwrite: true})
      .pipe(browserSync.stream({match: '**/*.css'}))
  );
});

gulp.watch([src_sass_folder + '**/*.scss'], gulp.series("sass"));

This is successfully working when I change something in the partial sass files, because when a partial sass file changes, gulp only builds the sass files that include them.

How can I make my js task work properly?

Edit:

My parent js files are looking like this:

bundle = require('./subdir/_partial1.js');
bundle = require('./subdir/_partial2.js');
bundle = require('./subdir/_partial3.js');


from Gulp rebuild parent js files when partials are modified

No comments:

Post a Comment