javascript - 修改partials时gulp重建父js文件

Question

我的 js 文件有以下 gulp 任务:

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());
});

而这个浏览器同步观察者:

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

所以我在我的任务中所做的是将部分 js 文件也包含在 src 中，然后过滤它们以不构建它们。
我遇到的问题是，当我更新包含这些部分的父 js 文件时，gulp 正在重建它们，但是当我更改部分中的某些内容时，gulp 不会构建包含这些部分的父 js 文件。
例如，如果我更改以下文件: src_js_folder + 'somefile.js' , gulp 成功重建文件:

[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

但是当我在部分 js 文件中更改某些内容时，例如: src_js_folder + '/subdir/_somePartialFile.js' , gulp 什么都不做:

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

我在任务中遵循的逻辑与我的 sass 任务相同:

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"));

当我更改部分 sass 文件中的某些内容时，这是成功的，因为当部分 sass 文件更改时，gulp 只会构建包含它们的 sass 文件。
如何让我的 js 任务正常工作？
编辑 :
我的父 js 文件看起来像这样:

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

Answer 1

我能够使用 gulp-dependents 来设置 JS(ES6) 增量构建。
为此，我必须编写用于从导入语句中提取文件路径的正则表达式，幸运的是我找到了 GitHub Gist其中有所需的正则表达式。这是用于解析 JS 导入语句的 gulp-dependents 配置:

const jsDependentsConfig = {
    ".js":{
        postfixes: ['.js'],
        parserSteps: [
            /import(?:["'\s]*(?:[\w*${}\n\r\t, ]+)from\s*)?["'\s]*(.*[@\w_-]+)["'\s].*;?$/gm,
            function(path){
                // Remove file extension, if any
                path = path.replace(/\.js$/,'');

                // Local packages
                paths = [`${path}/index.js`,`${path}.js`];

                return paths;
            },
        ]
    },
};

一旦实现，使用 gulp-dependents 就相当简单了。
最终代码:

const { src, dest, lastRun } = require('gulp');
const dependents = require('gulp-dependents');
const filter = require('gulp-filter');

const jsDependentsConfig = {
    ".js":{
        postfixes: ['.js'],
        parserSteps: [
            /import(?:["'\s]*(?:[\w*${}\n\r\t, ]+)from\s*)?["'\s]*(.*[@\w_-]+)["'\s].*;?$/gm,
            function(path){
                // Remove file extension, if any
                path = path.replace(/\.js$/,'');

                // Local packages
                paths = [`${path}/index.js`,`${path}.js`];

                return paths;
            },
        ]
    },
};

function scripts(){
    // Ref: https://stackoverflow.com/a/35413106
    const filterPartials = filter([
        `**/src/js/**/!(_)*.js`, // select all js files
        `!**/src/js/**/_*/`, // exclude all folder starting with _
        `!**/src/js/**/_*/**/*` //exclude files/subfolders in folders starting with '_'
    ]);

    return src('src/js/**/*.js',{ since: lastRun(scripts) })
       .pipe(gulpIf(!Config.production,
           dependents(jsDependentsConfig)
       ))
       .pipe(filterPartials)
       // other pipes
       .pipe(dest('assets/js'))
    ;
}