Pourquoi Gulp ne réussit-il pas à ré-traiter automatiquement mon JS lors des modifications?

Dans mon gulpfile.js , les modifications JS déclenchent automatiquement la recharge BrowserSync et ma tâche de traitement JS. Mais pour une raison quelconque, bien que le rechargement fonctionne, ma tâche JS échoue à traiter correctement les modifications JS et à créer de nouveaux fichiers JS dans dist/ folder. Je dois recommencer Gulp pour cela. Pourquoi?

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

MODIFIER:

A également essayé le code ci-dessous pour la tâche "js" (voir les 3 dernières lignes par rapport au code ci-dessus), sans succès:

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

Comme mentionné dans sa réponse , vous devriez changer votre tâche de watch . Mais, vous devriez avoir:

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

Lorsque les styles et les scripts changent, nous reprenons les tâches ( sass & js ) et rechargons la page.

J'ai essayé votre code avec ces changements et cela a fonctionné. La réponse est basée sur le gulpfile.babel.js de Google Web Starter Kit qui comporte:

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

Essayez d'exécuter la tâche js comme je l'ai mentionné ci-dessous

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

L'écriture de cette façon m'a aidé. J'espère que ça marche pour toi.

Votre gulp.watch pour les changements js n'appelle pas réellement votre tâche 'js'. C'est pourquoi vous devez répéter la tâche «regarder» pour voir les modifications.

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

Il suffit de recharger le navigateur mais n'appelle pas la tâche 'js'. Passer à:

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

et

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

Essayez l'événement 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) }); 
 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); }); 

`L'ensemble des tâches qui doivent être complétées, avant que gulp ne fonctionne, traite le tableau dans l'ordre inverse. Ainsi, browserSync s'exécute en premier, puis js puis sass. Il suffit d'inverser l'ordre sur ['browserSync', 'js', 'sass']. Cela devrait résoudre le problème.

Je changerais la tâche de surveillance comme suit:

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

Le problème est probablement la façon dont vous rechargez.

Modulez un peu votre code. C'est facile de faire des changements!

Votre gulpfile.js

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

Dans votre build.js dans le dossier gulp, créez une série de tâches que vous souhaitez effectuer 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 );
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 );
Et exécutez gulp build: dist comme tâche de départ