网站地图    收藏   

主页 > 前端 > gulp教程 >

gulp main.js不修改引入模块修改,但是只更新了模块,main.js没修改不更新

来源:未知    时间:2023-11-10 11:20 作者:小飞侠 阅读:

[导读] 在你的描述中,看起来你希望在使用Gulp构建过程中,当引入的模块发生更改时,只更新相应的模块,而不更新主文件 main.js。 这可以通过使用Gulp插件如 gulp-if 和 gulp-newer 结合使用来实...

在你的描述中,看起来你希望在使用Gulp构建过程中,当引入的模块发生更改时,只更新相应的模块,而不更新主文件 main.js。

这可以通过使用Gulp插件如 gulp-if 和 gulp-newer 结合使用来实现。以下是一个示例的 gulpfile.js 配置:

const gulp = require('gulp');
const newer = require('gulp-newer');
const gulpif = require('gulp-if');
const concat = require('gulp-concat');
// 定义任务处理的路径
const paths = {
  scripts: 'src/**/*.js',
  mainJS: 'src/main.js',
  dest: 'dist'
};
// 使用 gulp-newer 只选择未更新的文件
gulp.task('scripts', function() {
  return gulp.src(paths.scripts)
    .pipe(newer(paths.dest))
    .pipe(gulp.dest(paths.dest));
});
// 使用 gulp-if 只在 main.js 文件更新时合并模块
gulp.task('concat', function() {
  return gulp.src([paths.mainJS, paths.scripts])
    .pipe(gulpif('main.js', concat('bundle.js')))
    .pipe(gulp.dest(paths.dest));
});
// 监听文件变化并执行相应的任务
gulp.task('watch', function() {
  gulp.watch(paths.scripts, gulp.series('scripts', 'concat'));
});
// 默认任务
gulp.task('default', gulp.series('scripts', 'concat', 'watch'));



在这个示例中,我们首先引入了必要的Gulp插件,然后定义了一些文件路径。然后,我们创建了两个任务:


1.scripts 任务使用 gulp-newer 插件,它只选择未更新的文件,并将其复制到目标目录。

2.concat 任务使用 gulp-if 插件,它检查文件名是否是 main.js,如果是,则合并所有模块为一个文件。


最后,我们定义了一个 watch 任务,用于监视文件的变化,并在文件更改时执行相应的任务。

你可以在命令行中运行 gulp 命令来启动默认任务,它将监视文件的变化并在需要时更新相应的文件。


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论