为什么 Gulp 无法在更改后自动重新处理我的 JS？

Question

在我的 gulpfile.js 中，JS 更改会自动触发 BrowserSync 重新加载和我的 JS 处理任务。但出于某种原因，虽然重新加载确实有效，但我的 JS 任务无法正确处理 JS 更改并在 dist/ 文件夹中创建新的 JS 文件。为此，我必须重新启动 Gulp。为什么？

Gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');

gulp.task('sass', function() {
  return gulp.src('../assets/styles/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('../dist/styles'))
  .pipe(browserSync.reload({
    stream: true
  }))
});

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
});

gulp.task('browserSync', function() {
  browserSync.init({
    proxy: 'http://127.0.0.1/my_site/new-front-page/',
  })
})

gulp.task('watch', ['sass', 'js', 'browserSync'], function() {
  gulp.watch('../assets/styles/**/*.scss',['sass']);
  gulp.watch('../**/**/*.php', browserSync.reload);
  gulp.watch('../assets/scripts/*.js', browserSync.reload);
  gulp.watch('../*.html', browserSync.reload);
});

编辑：

还针对 "js" 任务尝试了以下代码（与上面的代码相比，请参阅最后 3 行），但无济于事：

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

Answer 1

您的 gulp.watch for js 更改实际上并未调用您的 'js' 任务。这就是为什么您必须重新运行 'watch' 任务才能看到任何更改。

gulp.watch('../assets/scripts/*.js', browserSync.reload);

它只是重新加载浏览器，但不调用 'js' 任务。更改为：

gulp.watch('../assets/scripts/*.js', ['js']);

和

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
  .pipe(jshint())
  .pipe(jshint.reporter('default'))
  .pipe(concat('main.js'))
  .pipe(uglify())
  .pipe(gulp.dest('../dist/scripts'))
  .pipe(browserSync.reload({ stream:true }));
});

Answer 2

尝试执行 js 任务，就像我在下面提到的那样

gulp.task('js', function() {
gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
    .pipe(browserSync.reload({ stream:true }));
});

gulp.task('watch', function() {
watch(['../assets/scripts/*.js'], function() {
    gulp.start('js');
 });
});

gulp.task('default', ['js', 'watch']);

这样写对我很有帮助。希望对你有用。

Answer 3

尝试 end 事件：

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))

    .on('end', browserSync.reload)
});

Answer 4

作为 mark mentioned in ，您应该更改 watch 任务。但是，你应该：

gulp.watch('../assets/styles/**/*.scss',['sass', browserSync.reload]);
gulp.watch('../**/**/*.php', browserSync.reload);
gulp.watch('../assets/scripts/*.js', ['js', browserSync.reload]);
gulp.watch('../*.html', browserSync.reload);

当样式和脚本更改时，我们重新运行任务 (sass & js) 并重新加载页面。

我尝试了您的代码并进行了这些更改并且它有效。答案基于 Google Web Starter Kit's gulpfile.babel.js 其中有：

gulp.watch(['app/scripts/**/*.js'], ['lint', 'scripts', reload]);

Answer 5

gulp.task('watch', ['sass' , 'js' , 'browserSync'], function() {
gulp.watch('../assets/styles/**/*.scss' , ['sass']);
gulp.watch('../**/**/*.php' , browserSync.reload);
gulp.watch('../assets/scripts/*.js' , browserSync.reload);
gulp.watch('../*.html', browserSync.reload);
});

`需要完成的任务数组，在gulp运行watch之前，对数组进行逆序处理。所以browserSync先运行，然后js然后sass。您只需将顺序反转为 ['browserSync'、'js'、'sass']。那应该可以解决问题。

Answer 6

我会按如下方式更改监视任务：

gulp.task('sass', function() {
  return gulp.src('../assets/styles/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('../dist/styles'))
  .pipe(reload({stream: true}));
});

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('../dist/scripts'))
    .pipe(reload({stream: true}));
});

gulp.task('watch', ['sass', 'js'], function() {
  browserSync.init({
    proxy: 'http://127.0.0.1/my_site/new-front-page/',
  });

  gulp.watch('../assets/styles/**/*.scss',['sass']);
  gulp.watch('../**/**/*.php').on('change', browserSync.reload);
  gulp.watch('../assets/scripts/*.js', ['js']);
  gulp.watch('../*.html').on('change', browserSync.reload);
});

问题可能出在您重新加载的方式上。

Answer 7

稍微模块化您的代码。易于更改！

你的gulpfile.js

var build = require('./gulp/build'); gulp.task('build:dist', build.buildDist); gulp.task('build', gulp.series('build:dist'));

在你的 build.js inside gulp 文件夹中做一系列你想执行的任务 var buildDev = gulp.series( 干净的， gulp.series( 皮棉，注入开发， moveAndFlattenFonts, moveAndFlattenAdminFonts, 移动JsonToApp ) ); var buildDist = gulp.series( 构建开发， //移动所有的东西 gulp.parallel( 移动HTML，移动索引HTML，移动AdminHtml， moveBowerComponentImagesToDist, moveAdminComponentImagesToDist, moveImagesToDist， moveFontsToDist, moveIconsToDist, moveJsonToDist, 移动服务器配置文件， moveScriptsToDist， moveScriptsToAdminDist，<br> 移动CSSToDist， moveCssToAdminDist, moveAndTemplatifyHtml<br> ), replaceRevisionedPaths， injectToIndexDist, 注入到AdminDist ); 和运行 gulp build:dist 作为起始任务

为什么 Gulp 无法在更改后自动重新处理我的 JS？

Why does Gulp fail to automatically re-process my JS upon changes?

javascript

gulp

browser-sync