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
Related
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']);
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.
I followed this tutorial:
http://www.gilluminate.com/2014/06/10/livereload-ssl-https-grunt-watch/
My Gruntfile.js looks like this:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
css: {
files: '**/*.sass',
tasks: ['sass'],
options: {
livereload: {
port: 9000,
key: grunt.file.read('ssl/livereload.key'),
cert: grunt.file.read('ssl/livereload.crt')
// you can pass in any other options you'd like to the https server, as listed here: http://nodejs.org/api/tls.html#tls_tls_createserver_options_secureconnectionlistener
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
I added
<script src="//localhost:9000/livereload.js"></script>
at the end of my index.html file.
My goal is to run livereload over httpS: port 9000.
Maybe am I missing some part, like "run Grunt to make it load to the grunt file"?
The error I get is:
GET https://localhost:9000/livereload.js net::ERR_CONNECTION_REFUSED
Grunt-contrib-watch uses tiny-lr#^0.2.1 which doesn't support SSL, someone needs to make a pull request to upgrade tiny-lr.
I'm new to using gruntjs and nodejs. I wanted to know how can I setup the gruntfile so that it watches both the sass files and the js files compiles using watch.
This is what I have so far:
module.exports = function ( grunt ) {
"use strict";
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
config: 'config.rb',
watch: true
}
}
}
});
grunt.registerTask('default', []);
};
Any help will be much appreciated. Thank you!
Try grunt-contrib-watch with grunt-contrib-sass. They're both Grunt plugins specifically for this kind of thing:
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/build/global.css': 'scss/screen.scss'
}
}
},
watch: {
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
},
The watch plugin configuration above will watch for changes in any .scss files, and will run the sass tasked (also defined above). You can even hook into livereload this way. You can also have multiple watches (the above only defines a css watch); creating a second watch to minify JS would be easy with grunt-contrib-uglify
I have an example you can look at that also concatenates JavaScript and does some minification with grunt-contrib-uglify. Here is the example.
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