Почему Gulp не может автоматически повторно обработать мой JS при изменениях?

в своем gulpfile.js, изменения JS автоматически вызывают оба BrowserSync перезагрузка и моя задача обработки JS. Но по какой-то причине, хотя перезагрузка работает, моя задача JS не может правильно обработать изменения JS и создать новый файл 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);
});

EDIT:

также попробовал код ниже для задачи " 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
    }))
});
7
browser-sync gulp javascript

7 ответов

As Марк упомянутые в ответ, вы должны изменить свой 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) и перезагрузите страницу.

я попробовал ваш код с этими изменениями, и это сработало. Ответ основан на gulpfile Google Web Starter Kit.вавилонское столпотворение.js что есть:

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

попробуйте выполнить 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']);

написание этого способа помогло мне. Надеюсь, это сработает.

3

свой залпом.наблюдение за изменениями 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 }));
});
2

попробовать 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)
});
0
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']. Это должно решить проблему.

0

Я бы изменил задачу watch следующим образом:

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

проблема, вероятно, в том, как вы перезагружаетесь.

0

Modularize ваш код немного. легко вносить изменения !

ваш gulpfile.js

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

в свою сборку.JS внутри папки gulp сделайте серию задач, которые вы хотите выполнить 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 в качестве стартовой задачи

0