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

尝试执行 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 2

here中提到的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＆amp; js）并重新加载页面。

我尝试使用这些更改代码并且它有效。答案基于his answer，其中包含：

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

Answer 3

js更改的gulp.watch实际上并没有调用你的'js'任务。这就是为什么你必须重新运行'监视'任务才能看到任何变化。

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 4

尝试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 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运行监视之前需要完成的任务数组以相反的顺序处理数组。所以browserSync首先运行，然后运行js然后运行sass。您只需要将订单撤消到[＆＃39; browserSync＆＃39;，＆＃39; js＆＃39;＆＃39; sass＆＃39;]。那应该可以解决问题。

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

在gulp文件夹中的build.js中，创建一系列要执行的任务 var buildDev = gulp.series( clean, gulp.series( lint, injectDev, moveAndFlattenFonts, moveAndFlattenAdminFonts, moveJsonToApp ) ); var buildDist = gulp.series( buildDev, //move all the things gulp.parallel( moveHtml, moveIndexHtml, moveAdminHtml, moveBowerComponentImagesToDist, moveAdminComponentImagesToDist, moveImagesToDist, moveFontsToDist, moveIconsToDist, moveJsonToDist, moveServerConfigFiles, moveScriptsToDist, moveScriptsToAdminDist, moveCssToDist, moveCssToAdminDist, moveAndTemplatifyHtml ), replaceRevisionedPaths, injectToIndexDist, injectToAdminDist ); 并运行gulp build：dist作为开始任务

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

7 个答案: