-
-
Save dennib/6f1f9aa9b59596710f62c1ef22a655f4 to your computer and use it in GitHub Desktop.
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!'); | |
}); |
Hi DevKitu,
it seems like your Gulp doesn't have .series, which version of Gulp do you have installed?
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
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:
-
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?)
-
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). -
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.
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)