Skip to content

Instantly share code, notes, and snippets.

@dennib
Last active April 8, 2021 19:43
Show Gist options
  • Save dennib/6f1f9aa9b59596710f62c1ef22a655f4 to your computer and use it in GitHub Desktop.
Save dennib/6f1f9aa9b59596710f62c1ef22a655f4 to your computer and use it in GitHub Desktop.
Gulp 4: ExpressJs + BrowserSync + Nodemon + Sass Watching
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
const nodemon = require('gulp-nodemon');
sass.compiler = require('node-sass');
// Sass compilation
gulp.task('sass', function() {
return gulp
.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
// Sass watching, depending on "sass" task
gulp.task('sass:watch', function() {
gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});
// Nodemon task:
// Start nodemon once and execute callback (browser-sync)
gulp.task('nodemon', cb => {
let started = false;
return nodemon({
script: 'server.js'
}).on('start', () => {
if (!started) {
cb();
started = true;
}
});
});
// BrowserSync task:
// calls nodemon tasks and pass itself as callback
gulp.task(
'browser-sync',
gulp.series('nodemon', () => {
browserSync.init(null, {
proxy: 'http://localhost:3000',
files: ['public/**/*.*'],
port: 5000
});
})
);
// Dev Task:
// Parallel execution of browser-sync/nodemon
// and sass watching
gulp.task('default', gulp.parallel('browser-sync', 'sass:watch'));
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/', function(req, res) {
res.send('Hello World!');
});
// Server Listening
app.listen(3000, function() {
console.log('App listening on port 3000!');
});
@DevKitu
Copy link

DevKitu commented Sep 22, 2019

I run the files as is and just changed the dest and src files but it gave this error:C:\Data\Projects\WebApps\TulsasPark\Website\tulsaspark\gulpfile.js:39
gulp.series('nodemon', () => {
^

TypeError: gulp.series is not a function
at Object. (C:\Data\Projects\WebApps\TulsasPark\Website\tulsaspark\gulpfile.js:39:8)
at Module._compile (internal/modules/cjs/loader.js:799:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
at Module.load (internal/modules/cjs/loader.js:666:32)
at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
at Function.Module._load (internal/modules/cjs/loader.js:598:3)
at Module.require (internal/modules/cjs/loader.js:705:19)
at require (internal/modules/cjs/helpers.js:14:16)
at execute (C:\Users\Annick\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned^3.7.0\index.js:28:18)
at Liftoff.handleArguments (C:\Users\Annick\AppData\Roaming\npm\node_modules\gulp-cli\index.js:201:24)

@dennib
Copy link
Author

dennib commented Sep 23, 2019

Hi DevKitu,
it seems like your Gulp doesn't have .series, which version of Gulp do you have installed?

@DevKitu
Copy link

DevKitu commented Sep 23, 2019

Thanks, I updated to version 4 then it is working . I had version 3.9. now I cannot render my ejs view files. but u see that my sass files are working but the browser synch does not reload css. how do I get it to work? I am using ejs and my template are seating in the view folder . Also when the browser start for the first time , it load localhost on port 5000 and not 3000. please, explain what is each part of this code :
proxy: 'http://localhost:3000',
files: ['public/**/.'],
port: 5000
Is the public where the html file seat ? what about my case where they seat in view files and are ejs template?
last quedtion: how do I include js files to gulp 4?
thanks

@dennib
Copy link
Author

dennib commented Oct 1, 2019

Hi DevKitu, i'm sorry for this very late reply! Have you found the solution you're looking for?
In the meantime I'll try to answer what I can:

  1. Strange that sass file aren't reloading, gulp watch should recompile every .scss file present in sass folder into css folder at every change (can you post the script section of your package json?)

  2. It should always open on port 5000 if using nodemon/browsersync (server started with gulp command): your express/nodejs website si running on port 3000 and "forwards" (proxy) every call to port 5000 where browsersync is running (so that you can have live reload and all of browsersync functionalities).

  3. If I remember correctly the public folder is the static folder of the website, I made this test using handlebars templates (instead of ejs ones) but still in the views folder, so it should be fine for you too.

Please let me know how are you starting your nodejs server (with what script), maybe this gist is lacking some parts on my end.

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