Running node app from grunt with watch - node.js

So, I have the grunt file below. I'm wanting to add a task that will start my node app and watch for changes in a directory and restart. I have been using supervisor, node-dev (which are great) but I want to run one command and start my whole app. There has got to be a simple way to do this, but I'm just missing it. It is written in coffeescript as well (not sure if that changes things)...
module.exports = function(grunt) {
grunt.initConfig({
/*exec: {
startApi: {
command: "npm run-script start-api"
}
},*/
//static server
server: {
port: 3333,
base: './public',
keepalive: true
},
// Coffee to JS compilation
coffee: {
compile: {
files: {
'./public/js/*.js': './src/client/app/**/*.coffee'
},
options: {
//basePath: 'app/scripts'
}
}
},
mochaTest: {
all: ['test/**/*.*']
},
watch: {
coffee: {
files: './src/client/app/**/*.coffee',
tasks: 'coffee'
},
mochaTest: {
files: 'test/**/*.*',
tasks: 'mochaTest'
}
}
});
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-mocha-test');
//grunt.loadNpmTasks('grunt-exec');
grunt.registerTask( 'default', 'server coffee mochaTest watch' );
};
As you can see in the comments, I tries grunt-exec, but the node command stops the execution of the other tasks.

You can set grunt to run default task and the watch task when you start your node app:
in app.js
var cp = require('child_process');
var grunt = cp.spawn('grunt', ['--force', 'default', 'watch'])
grunt.stdout.on('data', function(data) {
// relay output to console
console.log("%s", data)
});
Then just run node app as normal!
Credit

Related

Use grunt with browser-refresh

I'm currently using browser-refresh to restart my node server every time I make a change to my server file. I want to take this further and have my browser refresh/reload every time I make a change to an HTML file. I'm using handlebars for the client, so I have .hbs files in my views directory. I thought browser-refresh was supposed to be able to refresh the browser as well, but it's not working for me.
For grunt, I have the following tasks installed:
grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-exec');
grunt.loadNpmTasks('grunt-open');
grunt.loadNpmTasks('grunt-express-runner');
I don't think I need all of these, but I want to find something that works. I'm able to restart my server with grunt-exec, but I already have an alias for browser-refresh, so I don't really need that.
I should also note that in my app.js server file, I'm using app.use('/', routes); where var routes = require('./routes/index');. So, when my app loads (using node app.js), it goes directly to http://localhost:3000/users/login.
Thanks in advance.
Using the grunt-contrib-watch and setting the Live reload option to true, will enable live reloads and grunt auto rebuild.
For example, in your gruntfile.js:
watch: {
css: {
files: '**/*.sass',
tasks: ['sass'],
options: {
livereload: true,
},
},
},
For the rebuild of your site, (using the grunt-contrib-watch plugin), simply type
grunt watch
To auto rebuild your website on changes, have a look at an example usage of the grunt watch command below:
gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
exec: {
server: 'node server'
},
// Other JS tasks here
// ...
watch: {
css: {
files: ['scss/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
},
javascript: {
files: ['js/*.js'],
tasks: ['uglify']
},
options: {
livereload: true,
},
},
});
grunt.registerTask('server', ['exec:server']);
// Minify JS and create CSS files
grunt.registerTask('build', ['uglify', 'sass']);
// Do what you expect the default task to do
grunt.registerTask('default', ['build', 'exec:server']);
};
More info here: https://github.com/gruntjs/grunt-contrib-watch/blob/master/docs/watch-examples.md#enabling-live-reload-in-your-html

How to make grunt watch and grunt nodemon work together

I have a web app in node.js that I want to start with nodemon, so everytime the main script changes, the webapp can start again.
At the same time, I have my coffeescript files that I need to recompile everytime any of them changes.
I've set up a grunt-contrib-watch task to listen just for app/frontend/*.coffee files, to dispatch the coffee parser.
However, this doesn't seem to be hapenning, since the nodemon task is also listening.
I set up app/frontend/ folder in nodemon ignore.
I also set up nodemon and watch as concurrent.
Still, everytime I edit a coffee script, the coffee task is not bein executed.
This is my Gruntfile
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
concurrent: {
dev: [
'nodemon',
'watch'
],
options: {
logConcurrentOutput: true
}
},
coffee: {
compile: {
files: {
'app/public/app.js': ['app/frontend/*.coffee']
}
}
},
nodemon: {
dev: {
script: 'app/index.js',
options: {
ignore: ['app/frontend/**', 'app/public/**']
}
}
},
watch: {
scripts: {
files: 'app/frontend/*.coffee',
tasks: ['coffee'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
// Default task(s).
grunt.registerTask('default', ['coffee', 'nodemon', 'watch']);
};
Your Gruntfile instructs Grunt to run nodemon and watch sequentially as the default task (and thus watch is never run as nodemon never finishes).
You need to explicitly include the concurrent task in the last line:
grunt.registerTask('default', ['coffee', 'concurrent']);

Running node-inspector and node-debug with npm run

How to run two script at once with npm run?
First of all I know grunt or gulp but I want to make it without another js modules.
To make this I have this script:
"scripts": {
"start": "node ./node/www",
"nodemon": "./node_modules/.bin/nodemon node/www.js -i './e2e-tests/**' -i './node_modules/**' -i '.idea/**' -i './node/log/**' -w './node/server/**/*' -V -L",
"nodeInspector": "./node_modules/.bin/node-inspector --save-live-edit=true",
"debug": "node-debug ./node/www.js",
"ins": "npm run nodeInspector & npm run debug"
}
I want to run with npm run ins but it only fires node-inspector.
It is not possible to run both commands. They each need their own console
If node-debug comes from node-inspector package, then you don't need to start a new node-inspector instance, node-debug will start it automatically for you.
This is what node-debug performs under the hood (source code):
Run node-inspector.
Run the supplied script in debug mode
Open the user's browser, pointing it at the inspector.
In fact, running both node-inspector and node-debug will not work as intended, as the second node-inspector instance won't be able to attach to the same port where the first instance already listens.
I couldn't make it happen on one line that's why I changed to grunt with concurrent:
module.exports = function(grunt) {
grunt.initConfig({
concurrent: {
options: {
limit: 3,
logConcurrentOutput: true
},
debug: {
tasks: ['node-inspector', 'nodemon:debug'],
options: {
logConcurrentOutput: true
}
}
},
nodemon: {
dev: {
script: "node/www.js",
options: {
ignore: ['node/public/**'],
callback: function (nodemon) {
nodemon.on('log', function (event) {
console.log(JSON.stringify(event));
});
// opens browser on initial server start
nodemon.on('config:update', function () {
console.log("nodemon config:update oldu");
// Delay before server listens on port
setTimeout(function() {
require('open')('http://localhost:3000');
}, 1000);
});
// refreshes browser when server reboots
nodemon.on('restart', function () {
// Delay before server listens on port
setTimeout(function() {
//require('fs').writeFileSync('.rebooted', 'rebooted');
}, 1000);
});
}
}
},
debug: {
script: './node/www.js',
options: {
ignore: ['node/log/*.log','node/public/**','node/views/**','doc/**','e2e-tests/**','.idea'],
callback: function (nodemon) {
nodemon.on('log', function (event) {
console.log("Nodemon debug callback fonksiyonu nodemon.onLog olayı");
});
// opens browser on initial server start
nodemon.on('config:update', function () {
console.log("Nodemon debug callback fonksiyonu nodemon.onConfig:Update olayı");
// Delay before server listens on port
setTimeout(function() {
require('open')('http://localhost:3000');
require('open')('http://localhost:1337/debug?port=5858');
}, 1000);
});
// refreshes browser when server reboots
nodemon.on('restart', function () {
console.log("Nodemon debug callback fonksiyonu nodemon.onRestart olayı");
// Delay before server listens on port
setTimeout(function() {
//require('fs').writeFileSync('.rebooted', 'rebooted');
}, 1000);
});
},
nodeArgs: ['--debug'],
watch: ['Gruntfile.js', 'node/server', 'package.json']
}
}
},
'node-inspector': {
custom: {
options: {
'web-port': 1337,
'web-host': 'localhost',
'debug-port': 5857,
'save-live-edit': true,
'no-preload': true,
'stack-trace-limit': 4,
'hidden': ['node_modules']
}
}
}
});
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Çalışması test edildi ve iki pencerede hem test hem uygulama açıyor.
grunt.registerTask('nodemon-debug', ['concurrent:debug']);
};
I managed to run node-inspector and nodemon from a script using concurently
https://www.npmjs.com/package/concurrently
"dev": "npm install && concurrently \"node-inspector --web-port 9090\" \"nodemon --debug .\""

Gruntjs with grunt-nodemon, watch and jshint

I'm trying to run GruntJS with those 3 plugins so it can watch for changes and first: lint the file and then reload express server.
My problem with the config below is that if jshint lint the file, nodemon doesn't run and vice versa.
// Gruntfile.js
// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
// ===========================================================================
// CONFIGURE GRUNT ===========================================================
// ===========================================================================
grunt.initConfig({
// get the configuration info from package.json ----------------------------
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// all of our configuration will go here
// configure jshint to validate js files -----------------------------------
jshint: {
options: {
reporter: require('jshint-stylish') // use jshint-stylish to make our errors look and read good
},
// when this task is run, lint the Gruntfile and all js files in src
build: ['Grunfile.js', 'routes/*.js']
},
watch: {
// for scripts, run jshint and uglify
scripts: {
files: 'routes/*.js',
tasks: ['jshint']
}
},
concurrent: {
dev: {
tasks: ['jshint', 'nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
}
}, // concurrent
nodemon: {
dev: {
script: './server.js'
}
} // nodemon
});
// ===========================================================================
// LOAD GRUNT PLUGINS ========================================================
// ===========================================================================
// we can only load these if they are in our package.json
// make sure you have run npm install so our app can find these
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
grunt.registerTask('default', '', function() {
var taskList = [
'jshint',
'nodemon',
'watch'
];
grunt.task.run(taskList);
});
};
EDIT (clarification):
The first time that I ran grunt, jshint lint the files, then nodemon start and jshint doesn't lint anymore.
Output:
grunt
Running "default" task
Running "jshint:build" (jshint) task
✔︎ No problems
Running "nodemon:dev" (nodemon) task
[nodemon] v1.2.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./server.js`
Express server listening on port 3000
Was a really silly mistake.
I wasn't loading grunt-concurrent, just installed grunt-concurrent and addeded it to Kelz's function and now its working :).
Thank you all.
Final code:
// Gruntfile.js
// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
// ===========================================================================
// CONFIGURE GRUNT ===========================================================
// ===========================================================================
grunt.initConfig({
// get the configuration info from package.json ----------------------------
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// all of our configuration will go here
// configure jshint to validate js files -----------------------------------
jshint: {
options: {
reporter: require('jshint-stylish') // use jshint-stylish to make our errors look and read good
},
// when this task is run, lint the Gruntfile and all js files in src
build: ['Grunfile.js', 'routes/*.js']
},
watch: {
// for scripts, run jshint and uglify
scripts: {
files: 'routes/*.js',
tasks: ['jshint']
}
}, // watch
nodemon: {
dev: {
script: './server.js'
}
}, // nodemon
concurrent: {
dev: {
tasks: ['jshint', 'nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
}
} // concurrent
});
// ===========================================================================
// LOAD GRUNT PLUGINS ========================================================
// ===========================================================================
// we can only load these if they are in our package.json
// make sure you have run npm install so our app can find these
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-nodemon');
grunt.registerTask('default', '', function() {
var taskList = [
'concurrent',
'jshint',
'nodemon',
'watch'
];
grunt.task.run(taskList);
});
};
Try running it as a function task:
grunt.registerTask('default', '', function() {
var taskList = [
'jshint',
'nodemon',
'watch'
];
grunt.task.run(taskList);
});
EDIT: Another method I've used to achieve the goal of auto rerunning tasks including express, using grunt-express-server, applied to your setup:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
watch: {
express: {
files: ['routes/*.js'],
tasks: ['jshint', 'express:dev'],
options: {
spawn: false
}
}
},
express: {
dev: {
options: {
script: 'app.js',
}
}
},
jshint: {
options: {
node: true
},
all: {
src: ['routes/*.js']
}
}
});
grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', '', function() {
var taskList = [
'jshint',
'express:dev',
'watch'
];
grunt.task.run(taskList);
});
};

What am I doing wrong with Gruntjs targets?

I followed the instructions on the grunt.option page to create different configurations for different environments/targets such as development, staging, and production in my Gruntfile. However, upon doing so I found that my tasks silently fail.
I've reduced the problem to a very simple example. The following Gruntfile fails to build the file:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
dev: {
options: {
compress: true
},
build: {
src: ['src/css/test.less'],
dest: 'build/css/test.css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less:dev']);
};
The output in my terminal is the following:
$ grunt
Running "less:dev" (less) task
Done, without errors.
If, however, I use the following Gruntfile, the build output is as expected:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
options: {
compress: true
},
build: {
src: ['src/css/test.less'],
dest: 'build/css/test.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less']);
};
The terminal output for this Gruntfile reflects the built file:
$ grunt
Running "less:build" (less) task
File build/css/test.css created.
Done, without errors.
What am I doing wrong in the first Gruntfile? What is it that I am missing about this task:target convention?
Your first Gruntfile - If you want per-target options, you need to specify the files object. So your code would be something like this:
less: {
dev: {
files: {
"build/css/test.css": "src/css/test.less"
}
},
production: {
options: {
compress: true
},
files: {
"build/css/test.css": "src/css/test.less"
}
},
}
Basically in your first Gruntfile build is an unknown object. Your target is named dev and grunt-contrib-less doesn't have an option called build so Grunt doesn't know where to write the files. Your second Gruntfile works because you set the options as a global. Use the above code if you want per-target options.

Resources