Last active
April 3, 2023 08:16
-
-
Save webdesserts/5632955 to your computer and use it in GitHub Desktop.
Automatically reload your node.js app on file change with Gulp (https://github.com/wearefractal/gulp).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// NOTE: I previously suggested doing this through Grunt, but had plenty of problems with | |
// my set up. Grunt did some weird things with scope, and I ended up using nodemon. This | |
// setup is now using Gulp. It works exactly how I expect it to and is WAY more concise. | |
var gulp = require('gulp'), | |
spawn = require('child_process').spawn, | |
node; | |
/** | |
* $ gulp server | |
* description: launch the server. If there's a server already running, kill it. | |
*/ | |
gulp.task('server', function() { | |
if (node) node.kill() | |
node = spawn('node', ['index.js'], {stdio: 'inherit'}) | |
node.on('close', function (code) { | |
if (code === 8) { | |
gulp.log('Error detected, waiting for changes...'); | |
} | |
}); | |
}) | |
/** | |
* $ gulp | |
* description: start the development environment | |
*/ | |
gulp.task('default', function() { | |
gulp.run('server') | |
gulp.watch(['./index.js', './lib/**/*.js'], function() { | |
gulp.run('server') | |
}) | |
// Need to watch for sass changes too? Just add another watch call! | |
// no more messing around with grunt-concurrent or the like. Gulp is | |
// async by default. | |
}) | |
// clean up if an error goes unhandled. | |
process.on('exit', function() { | |
if (node) node.kill() | |
}) |
Never mind, I got it to work.
Make sure the task signal [Async Completion](https://github.com/gulpjs/gulp/blob/9f4a2e96506dec1d85804de8884678e72ffc5aa0/docs/getting-started/4-async-completion.md). Or, just define your task as an [`async` function](https://github.com/gulpjs/gulp/blob/9f4a2e96506dec1d85804de8884678e72ffc5aa0/docs/getting-started/4-async-completion.md#using-asyncawait):
```javascript
async function startServer() {
if (node) node.kill();
node = await spawn("node", ["./src/server.js"], { stdio: "inherit" });
node.on("close", function (code) {
if(code === 8) {
console.log("Error detected, waiting for changes...");
}
});
}
gulp.task("default", function () {
// Start the server, if a change is detected restart it
gulp.watch(
["src/**/*", "src/server.js"],
{
queue: false,
ignoreInitial: false // Execute task on startup
},
startServer);
});
```
👍
Hey man thanks for sharing your gulpfile, you got me out of one hell of a pickle haha!
Here's how mine endend up looking, works great now :D
const gulp = require('gulp');
const watch = gulp.watch;
const series = gulp.series;
const { exec, spawn } = require('child_process');
var serverProc = undefined;
const watcher = watch(['./frontend/**/*', './backend/**/*', '!./backend/**/*.json']);
watcher.on('change', function (path, stats) {
console.log(`File ${path} was changed - Relaunching...`);
serverProc.kill('SIGINT');
exports.default();
});
watcher.on('error', function (e) {
console.error(e.stack);
});
function purge() {
return exec('shx rm -rf ./public/*');
}
function bundle() {
return exec('parcel build ./frontend/html/*.html --out-dir public --no-source-maps');
}
function serve() {
if (serverProc) serverProc.kill('SIGINT');
serverProc = spawn('node', ['backend/server.js'], { stdio: 'inherit' });
serverProc.on('close', function (code) {
if (code === 8) {
gulp.log('Error detected, waiting for changes...');
}
});
}
exports.default = series(purge, bundle, serve);
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Awesome! this saves tons of time!