Skip to content

Instantly share code, notes, and snippets.

@kevinSuttle
Last active February 26, 2024 07:02
Show Gist options
  • Save kevinSuttle/c8b198aaa30349088c35 to your computer and use it in GitHub Desktop.
Save kevinSuttle/c8b198aaa30349088c35 to your computer and use it in GitHub Desktop.
Gulp, BrowserSync, Sass, Autoprefixer, Nodemon
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();
}
});
});
@simonrobb
Copy link

@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.

@GarthDB
Copy link

GarthDB commented Feb 8, 2015

@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']

@JaKXz
Copy link

JaKXz commented Apr 15, 2015

What are the options you can pass to the reload method? When nodemon restarts, I want my app to redirect to /

@nelsonomuto
Copy link

@simonrobb +1 about the proxy accepting strings and not objects.

@cortharlow
Copy link

This was a lifesaver, excellent work. Broswersync isn't 100% for me yet but it's definitely useable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment