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');
2条答案
按热度按时间8cdiaqws1#
我能够使用gulp-dependents来设置JS(ES6)增量构建。
为此,我不得不编写正则表达式来从import语句中提取文件路径,幸运的是,我找到了一个GitHub Gist,它有所需的正则表达式。下面是解析JS import语句的gulp-dependents配置:
一旦实现了这一点,使用吞咽依赖就相当简单了。
最终代码:
envsm3lx2#
dependents
是gulp-dependents
吗?默认情况下,
gulp-dependents
不支持.js
文件。当“partial sass file”发生变化时,
gulp-dependents
通过之前缓存的dependencyMap添加“parent sass file”,然后filter
删除“partial sass file”,将“parent sass file”传递给gulp-sass
。当“partial js file”被更改时,
gulp-dependents
不添加任何文件。然后filter
删除“partial js file”。最后没有文件。按浏览器化管道缓存依赖项。
用途: