Geek Answers Handbook

Why can't Gulp automatically reprogram my JS when I make a change?

In my gulpfile.js JS changes will automatically activate BrowserSync reload and my JS processing task. But for some reason, although the reboot really works, my JS task does not allow me to correctly process the JS changes and create a new JS file in the dist/ folder. I have to restart gulp for this. 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:

I also tried the code below for the "js" task (see the last 3 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 })) });
+7
javascript gulp browser-sync
source share
7 answers

Like mark mentioned in his answer , you have to change your watch task. But you must 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 styles and scripts change, we run tasks ( sass and js ) and reload the page.

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

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

Try js task as i mentioned below

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

Writing this method helped me. Hope this works for you.

+3
source share

Your gulp.watch for js changes doesn't actually call your js task. This is why you need to rerun the watch task to see any changes.

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

It just restarts the browser, but does not call the js task. Change to:

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

and

 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
source share

try the end event:

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

`An array of tasks that must be completed before gulp starts the clock and processes the array in the reverse order. So, browserSync starts first, then js and then sass. You just need to change the order to ['browserSync', 'js', 'sass']. This should solve the problem.

0
source share

I would modify the view task as follows:

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

The problem is probably how you reboot.

0
source share

Modify your code a bit. easy to make changes!

Your gulpfile.js

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

In your build.js assembly inside gulp, do a series of tasks that you want to perform 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 ); and run gulp build: dist as a start task

0
source share

More articles:


All Articles