How to make grunt watch and grunt nodemon work together - node.js

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']);

Related

Fastest livereloader sass into css (Grunt, Gulp - Browsersync )

I am looking for fastest livereload result (sass into css + browerssync)
Grunt or Gulp is better fastest result?
I was experimenting with Grunt,
When save css file we get livereload without nothing delay but when sass compile sass into css its working with 1 or 2 seconds delay
This is my grunt code
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
watch: {
sass: {
files: "app/scss/*.scss",
tasks: "sass:dev"
}
},
sass: {
dev: {
files: {
"app/css/styles.css": "app/scss/styles.scss"
}
}
},
browserSync: {
default_options: {
bsFiles: {
src: [
"css/*.css",
"*.html"
]
},
options: {
watchTask: true,
proxy: "yourvhost.dev"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-browser-sync');
// Launch BrowserSync + watch task
grunt.registerTask('default', ['browserSync', 'watch']);
};
Gulp has traditionally been a bit quicker since it uses node streams. A more in-depth read about the node stream subject and the Gulp/Grunt compiling of Sass you find here.
edit: if you're thinking of using Grunt, you should check out grunt-sass. Seems to be the fastest one and pretty close to the Gulp one.

Grunt hangs on uglify

I am trying to minify a little angular script, but for some reason uglify just hangs indefinitely. JSHint runs fine and completes if I add it into the task list, and then it hangs on uglify.
Here is my Gruntfile:
module.exports = function (grunt) {
// Project configuration
grunt.initConfig({
// make node configuration available for use
pkg: grunt.file.readJSON('package.json'),
// configure uglify
uglify: {
options: {
mangle: false
},
my_target: {
dist: {'dist/test.min.js': ['src/test.js']}
}
},
// configure JSHint
jshint: {
app: ['src/*.js']
}
});
// load pluginsng
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
// default
grunt.registerTask('default', ['jshint', 'uglify']);
grunt.registerTask('uglify', ['uglify']);
};
Here are the versions I am using:
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.11.2",
"grunt-contrib-uglify": "~0.9.1"
}
I ran grunt -v and after jshint finishes it outputs this forever:
Running "uglify" task
Running "uglify" task
Running "uglify" task
It doesn't seem to care what file I give it either, so it seems to be hitting some issue before it gets to reading my file.
Any ideas?
You're redefining the uglify task to run itself in your last line, replacing grunt-contrib-uglify:
grunt.registerTask('uglify', ['uglify']);
That's why your grunt is looping endlessly.
Just give it a different name:
grunt.registerTask('compress', ['uglify']);

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.

Running node app from grunt with watch

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

Resources