Geek Answers Handbook

Browser synchronization Gulp configuration not working with .NET MVC

I'm trying to set up a gulp browser build system for a .NET MVC application, everything works, except for a live reboot with browser synchronization whenever a change occurs. This is my first attempt, so I could do something simple wrong. Here is my gulpfile.js

var gulp = require('gulp'), uglify = require('gulp-uglify'), jshint = require('gulp-jshint'), watch = require('gulp-watch'), livereload = require('gulp-livereload'), browserSync = require('browser-sync'), concat = require('gulp-concat'); //minify js gulp.task('minifyJS', function () { gulp.src('Scripts/**/*.js') .pipe(concat('app.js')) .pipe(gulp.dest('Scripts')) }); gulp.task('minifyCSS', function () { gulp.src('Content/**/*.css') .pipe(concat('app.css')) .pipe(gulp.dest('Content')) }); //browsersync gulp.task('browserSync', function () { var files = [ 'Scripts/**/*.js', 'Content/**/*.css', 'Views/**/*.cshtml' ]; browserSync.init(files, { proxy: "http://localhost:55783/" }); }); //default task wraps the two gulp.task('default', ['minifyJS', 'minifyCSS', 'watch', 'browserSync']); //watch tasks gulp.task('watch', function () { var jsWatcher = gulp.watch('Scripts/**/*.js', ['minifyJS']); var cssWatcher = gulp.watch('Content/**/*.css', ['minifyCSS']); jsWatcher.on('change', function (event) { console.log('Event type: ' + event.type); // added, changed, or deleted console.log('Event path: ' + event.path); // The path of the modified file }); cssWatcher.on('change', function (event) { console.log('Event type: ' + event.type); // added, changed, or deleted console.log('Event path: ' + event.path); // The path of the modified file }); });

when I run gulp watch , it works just fine when the lines are written to the console, but just do not reload. Ive ruined quite a few blog posts to no avail, any ideas?

EDIT: Browser-Sync launches a site from a proxy server only when I change the CSS or JS file in the directories listed, gulp watches it, but Browser-Sync does not. I need to update manually

+5
source share
4 answers

Try the following:

 gulp.task('watch', function () { function reportChange(event){ console.log('Event type: ' + event.type); // added, changed, or deleted console.log('Event path: ' + event.path); // The path of the modified file } gulp.watch('Content/**/*.css', ['minifyCSS', browserSync.reload]).on('change', reportChange); gulp.watch('Scripts/**/*.js', ['minifyJS', browserSync.reload]).on('change', reportChange); });

If you need an example, you can see in this repository of skeleton applications: https://github.com/aurelia/skeleton-navigation/blob/master/build/tasks/watch.js

(I linked the Watch task, but you can move on to other tasks if you need more examples!)

+3
source

Here is what works in my project

 var sourcemaps = require('gulp-sourcemaps'); var viewDir = './src/'; gulp.task('cshtml', function(){ return gulp.src(viewDir) .pipe(livereload({quiet: true})); }); gulp.task('watch', function() { livereload.listen(); gulp.watch(viewDir + '/**/*.cshtml', ['cshtml']); });

For chrome, make sure that the live reload plugin has access to the file URL in the settings, and if your page runs under https, follow the instructions for insecure content .

+1
source

You can try this piece of code in gulp-file:

 gulp.task('browserSync', function() { browserSync.init({ proxy: "http://localhost:55783/" }); gulp.watch("app/*.html").on('change', reload); // all your files go here });

Everything about this gulp plugin can be read at:
http://www.browsersync.io/docs/gulp/

0
source

You can manually activate browser synchronization reboot using the clock in Gulp! Here is an example of code that has a job defined just for that.

 gulp.task('watch', [], function () { gulp.watch([ paths.app + '/**/*.html', paths.assets + '/**/*.less', paths.app + '/**/*.js' ], ['browsersync-reload']); }); //Task that triggers the reload gulp.task('browsersync-reload', function () { browserSync.reload(); });
0
source

More articles:


All Articles