CODEWITHSUNDEEP
node.jsexpressgulpejsbrowser-sync
Ron I
Ron I

Reputation: 4250

Browser Sync, EJS, Gulp, and node - getting setup

I am in a Node environment, with gulp running for SASS, EJS for templates, and I want to get Browser Sync working as well. I am having trouble configuring my gulp file. If I run 'node server.js' my app runs in the browser, and EJS works, but I don't get Browser Sync working. If I run gulp I get 'Cannot GET /' in the browser.

Please note I am a newbie to Node, so if you can include any explanation in your answer that would help me learn and be very appreciated!

Here is my gulpfile:

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var runSequence = require('run-sequence');
var ejs = require("gulp-ejs");

gulp.task('default', function(callback) {
  runSequence(['browserSync', 'watch', 'ejs'], callback);
});

gulp.task('ejs', function(){
  return gulp.src('views/html/**/*.ejs')
   .pipe(ejs({}, {ext:'.html'}))
   .pipe(gulp.dest('dist/html/'));
});

gulp.task('sass', function() {
  return gulp.src('sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('public/css/sass'))
    .pipe(browserSync.reload({
      stream:true
    }));
});

gulp.task('watch', ['browserSync', 'ejs'], function() {
  gulp.watch('./scss/*.scss', ['sass']);
  gulp.watch('./views/html/**/*.html', browserSync.reload);
  gulp.watch('./views/html/**/*.ejs', browserSync.reload);
  gulp.watch('./public/js/**/*.js', browserSync.reload);
  gulp.watch('views/html/**/*.ejs', ['ejs']);
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'
    },
  });
});

Here is server.js:

var express = require('express');
var app = express();
var gulp = require('gulp');

gulp.task('default', function(arg) {

});

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
app.get('/', function(req, res) {
    res.render('index');
});


app.listen(3000);

Upvotes: 1

Views: 1624

Answers (1)

gara501
gara501

Reputation: 26

Try to test with proxy initialisation 

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "yourlocal.dev"
    });
});

Upvotes: 1

Related Questions