为什么Gulp无法在更改后自动重新处理JS？ [英] Why does Gulp fail to automatically re-process my JS upon changes?

问题描述

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

Gulpfile.js：

  var gulp = require '吞'）; 
 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 
 }））
}）; 
 $ b $ 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'））
}）; 
 $ b 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任务（见上面代码与上面的代码相比），无济于事：

  gulp。 （''/ 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 
}））
}）; 
  

解决方案

他的回答中提到的/ mark / / 836330 / mark，您应该更改您的 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的gulpfile .babel.js ：
$ b $

  gulp.watch（['app / scripts / ** / *。 js']，['lint'，'scripts'，reload]）; 
  




In my gulpfile.js, JS changes automatically trigger both BrowserSync reload and my JS processing task. But for some reason, although the reload does work, my JS task fails to correctly process JS changes and create new JS file in dist/ folder. I have to restart Gulp for that. Why?

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

EDIT:

Also tried the code below for the "js" task (see the 3 last lines compared to the code above), to no avail:

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

解决方案

As mark mentioned in his answer, you should change your watch task. But, you should have:

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

When the styles and scripts change, we rerun the tasks (sass & js) and reload the page.

I tried your code with these changes and it worked. The answer is based on Google Web Starter Kit's gulpfile.babel.js which has:

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

这篇关于为什么Gulp无法在更改后自动重新处理JS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！