Created
January 29, 2017 16:33
-
-
Save afrodesia/8bfa52495014b5af16b91e8bb0a8b600 to your computer and use it in GitHub Desktop.
BrowserSync + Express + Node
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| var gulp = require('gulp'); | |
| var browserSync = require('browser-sync'); | |
| var nodemon = require('gulp-nodemon'); | |
| // we'd need a slight delay to reload browsers | |
| // connected to browser-sync after restarting nodemon | |
| var BROWSER_SYNC_RELOAD_DELAY = 500; | |
| gulp.task('nodemon', function (cb) { | |
| var called = false; | |
| return nodemon({ | |
| // nodemon our expressjs server | |
| script: 'app.js', | |
| // watch core server file(s) that require server restart on change | |
| watch: ['app.js'] | |
| }) | |
| .on('start', function onStart() { | |
| // ensure start only got called once | |
| if (!called) { cb(); } | |
| called = true; | |
| }) | |
| .on('restart', function onRestart() { | |
| // reload connected browsers after a slight delay | |
| setTimeout(function reload() { | |
| browserSync.reload({ | |
| stream: false | |
| }); | |
| }, BROWSER_SYNC_RELOAD_DELAY); | |
| }); | |
| }); | |
| gulp.task('browser-sync', ['nodemon'], function () { | |
| // for more browser-sync config options: http://www.browsersync.io/docs/options/ | |
| browserSync({ | |
| // informs browser-sync to proxy our expressjs app which would run at the following location | |
| proxy: 'http://localhost:3000', | |
| // informs browser-sync to use the following port for the proxied app | |
| // notice that the default port is 3000, which would clash with our expressjs | |
| port: 4000, | |
| // open the proxied app in chrome | |
| browser: ['google-chrome'] | |
| }); | |
| }); | |
| gulp.task('js', function () { | |
| return gulp.src('public/**/*.js') | |
| // do stuff to JavaScript files | |
| //.pipe(uglify()) | |
| //.pipe(gulp.dest('...')); | |
| }); | |
| gulp.task('css', function () { | |
| return gulp.src('public/**/*.css') | |
| .pipe(browserSync.reload({ stream: true })); | |
| }) | |
| gulp.task('bs-reload', function () { | |
| browserSync.reload(); | |
| }); | |
| gulp.task('default', ['browser-sync'], function () { | |
| gulp.watch('public/**/*.js', ['js', browserSync.reload]); | |
| gulp.watch('public/**/*.css', ['css']); | |
| gulp.watch('views/**/*.hjs', ['bs-reload']); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment