-
-
Save kevinSuttle/c8b198aaa30349088c35 to your computer and use it in GitHub Desktop.
| var express = require('express'); | |
| var app = express(); | |
| var router = express.Router(); | |
| var hbs = require('hbs'); | |
| app.set('view engine', 'html'); | |
| app.engine('html', hbs.__express); | |
| app.use(express.json()); | |
| app.use(express.urlencoded()); | |
| app.use(express.static('public')); | |
| app.get('/', function(req, res) { | |
| res.sendfile('./views/index.html'); | |
| }); | |
| app.listen(5000); |
| var gulp = require('gulp'); | |
| var sass = require('gulp-sass'); | |
| var prefix = require('gulp-autoprefixer'); | |
| var browserSync = require('browser-sync'); | |
| var reload = browserSync.reload; | |
| var nodemon = require('gulp-nodemon'); | |
| gulp.task('sass', function () { | |
| return gulp.src('public/scss/*.scss') | |
| .pipe(sass({outputStyle: 'compressed', sourceComments: 'map'}, {errLogToConsole: true})) | |
| .pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR")) | |
| .pipe(gulp.dest('public/css')) | |
| .pipe(reload({stream:true})); | |
| }); | |
| gulp.task('browser-sync', ['nodemon'], function() { | |
| browserSync.init(null, { | |
| proxy: { | |
| host: "http://localhost", | |
| port: "5000" | |
| } | |
| }); | |
| }); | |
| gulp.task('default', ['sass', 'browser-sync'], function () { | |
| gulp.watch("public/scss/*.scss", ['sass']); | |
| gulp.watch(["public/js/**/*.js", "./*.html"], reload); | |
| }); | |
| gulp.task('nodemon', function (cb) { | |
| var called = false; | |
| return nodemon({script: 'app.js'}).on('start', function () { | |
| if (!called) { | |
| called = true; | |
| cb(); | |
| } | |
| }); | |
| }); |
@kevinSuttle do you get the following message when you run the 'default' gulp task?
[BS] Copy the following snippet into your website, just before the closing </body> tag
@makenova: you don't need to have nodemon installed globally on the system to have it working. gulp-nodemon comes bundled with nodemon. but I'm not sure about supervisor though
@sgudjonsson: this is weird, I get the same message too, but it disappears after changing the browser-sync config slightly (but though it kinda seem to mean the same thing, could be a bug in browser-sync)
. // change the following ...
. ...
browserSync.init(null, {
proxy: {
host: "http://localhost",
port: "5000"
}
});
. ...
. // to the following
...
browserSync.init(null, {
proxy: "http://localhost:5000"
});
...I've created a similar gist to showcase using gulp + browser-sync + expresses + nodemon
For some reason, I have to manually add the script tag into my view template (Dust.js), and not the version that it recommends. Just a regular script tag. It's the only way I could get it working.
<script async="" src="/browser-sync/browser-sync-client.1.7.0.js"></script>
It's simply not getting injected dynamically. I assume it's because it's being rendered on the server.
@sgudjonsson, @kevinSuttle Be sure you load the proxied url in the browser, not nodemon's one.
From the example above, go to http://localhost:5000, not http://localhost:3000.
@kevinSuttle @sogko the reason you're getting this is because the proxy option accepts a string, not an object as in your example. See http://www.browsersync.io/docs/options/#option-proxy.
Try this instead:
browserSync.init(null, {
proxy: "http://localhost:<nodemon_server_port>",
port: <port_you_want_in_your_browser>
});
Now, when you go to http://localhost:9000 (for example), it will pass through browserSync, proxy to the nodemon server on the port you specify in the proxy option, and when the response comes back through browserSync it will inject the snippet before returning the response to the browser.
@simonrobb so what are the defaults for these ports - can they be stored as variables and used in the nodemon configuration in the nodemon task?
I noticed in the gulp-nodemon documentation you can specify a custom debug port.
nodeArgs: ['--debug=9999']
What are the options you can pass to the reload method? When nodemon restarts, I want my app to redirect to /
@simonrobb +1 about the proxy accepting strings and not objects.
This was a lifesaver, excellent work. Broswersync isn't 100% for me yet but it's definitely useable.
Hey do you need to already have nodemon running for this to work?
I'm trying to duplicate this with supervisor.