It would be nice to have the browser automatically reload the page when I change a project file. I have this node-express site with the server being defined in 'server.js'
However, I've tried different grunt configurations, but none of them caused the browser to reload on a file change although the 'watch' task prints a message that the file changed!
Here is the relevant grunt configuration:
watch: {
all: {
files: 'views/index.ejs', // for now only watch this file!
options: {
livereload: true
}
}
},
express: {
options: {
background: true,
error: function(err, result, code) {},
fallback: function() {},
port: 3000
delay: 0,
output: ".+",
debug: false
},
dev: {
options: {
script: './server.js',
node_env: 'development',
livereload: true
}
}
}
....
grunt.registerTask('server', [
'express:dev',
'open',
'watch'
])
};
And to run the task I do
$> grunt server
Can someone explain what is wrong with this configuration ?
thnx
You need to install the livereload browser plugin from http://livereload.com/
I am trying to use grunt livereload to reload css changes on my node.js pages. I am getting closer to solve my problem which is similar to yours. So from what i know so far and please correct me if i'm wrong you dont need to install "livereload browser plugin" right? I used grunt alone without node.js and i could just use livereload without installing "livereload browser plugin" i just had to add a line in my .html (the problem i run into with node is how to reload .ejs and i found this page/question on the way solving it) : so i dont know if installing the livereload thing is another way to do the script part or if this is the case like i mentioned in my problem if i want to live reload .ejs i have to install the plugin.
Related
I'm learning Gulp and NPM and decided to test myself by using Browser-Sync with a PHP project I'm working on (using XAMPP). I know Browser-Sync doesnt work with PHP files, but I wanted to use it with my .css files (and later on perhaps add Sass).
I installed npm, Gulp, Gulp-watch and Browser Sync to my project's root directory and all seemed fine.
I then created a gulp.js file with the following:
var gulp = require('gulp'),
watch = require('gulp-watch'),
browserSync = require('browser-sync').create();
gulp.task('watch', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
watch('css/*.css', function() {
browserSync.reload();
});
});
However, when I gulp watch a new browser window does open but just shows the Cannot GET / error.
Also, the URL shows http://localhost:3002/ rather than http://localhost:myproejct
I read this may have something to do with my baseDir so tried:
baseDir: ""
baseDir: "./"
baseDir: "../myproject"
Would anyone know what I've done wrong?
You are doing way more than is necessary to do what you want. You can just use browsersync as a proxy layer over the top of your hosted site.
See the following example from the docs
# Proxy a PHP app + serve static files & watch them
$ browser-sync start --proxy 'mylocal.dev' --serveStatic 'public' --files 'public'
I think this is what you will need, run it from the physical root of your site and replace mylocal.dev with your php server address
npm install browser-sync -g
browser-sync start --proxy 'mylocal.dev' --serveStatic 'css' --files 'css/*.css'
Your code works fine for me. Assuming your target HTML file works if opened in the browser manually: One common cause of the Cannot Get/ error is using an index file other than Browsersync's default expectation, index.html. Could that be the problem you're having? If you need a custom index file, you can set the index option:
browserSync.init({
server: {
baseDir: 'mybasedirectorypath',
index: 'notindex.html'
}
});
Fwiw, you can also do this more efficiently, and save yourself the weight of installing gulp-watch (this example adapted and simplified from this Browsersync docs example):
var gulp = require('gulp'),
browserSync = require('browser-sync').create();
gulp.task('watch', function() {
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('css/*.css').on('change',browserSync.reload)
});
As for using a custom url, check out https://github.com/BrowserSync/browser-sync/issues/646 which has some solutions.
I'm new to grunt and have been trying to make a development environment where on change to a Jade file to activate live reload.
I have been able to turn on live reload when using a vanilla HTML file using a grunt express server.
express: {
all: {
options: {
bases: ['C:\\location\\projectfolder'],
port: 8080,
hostname: "0.0.0.0",
livereload: true
}
}
},
I have also tried to compile the jade just afterwards then have the watch function afterwards.
jade: {
html: {
files: {
'C:\\Users\\pavni_000\\Documents\\Business\\learning\\jade\\projectfolder': ['C:\\Users\\pavni_000\\Documents\\Business\\learning\\jade\\projectfolder\\text.jade']
},
options: {
client: false
}
}
}
Could someone give me some guidance on how to make it so that any changes to the jade file (and any other project code in general) using grunt or any other tool?
Sounds like you need a file watcher. I use WebStorm IDE and it can be configured to use a Jade file watcher that continually compiles to html in real-time. So long as you have Jade installed on your machine, point the watcher to the Jade command (windows will be something like C:\Users\~USERNAME\AppData\Roaming\npm\jade.cmd, Linux/OSX would probably be /usr/local/bin/jade).
So then if you already have Grunt running a livereload server, it will pickup the html files your watcher updates. There MAY be a way to do this all within grunt if you aren't using an IDE with a watcher (have Grunt's live-reload trigger a Jade compilation), but this method works fine for me.
Unfortunately, grunt-contrib-watch and grunt-contrib-connect don't seem to be playing nice.
On the grunt-contrib-connect readme it says:
Note that this server only runs as long as grunt is running. Once grunt's tasks have completed, the web server stops. This behavior can be changed with the keepalive option, and can be enabled ad-hoc by running the task like grunt connect::keepalive.
Fine. But what if I want to run my watch task in tandem with the connect server? Like so:
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
keepalive: true
}
}
},
watch: {
options: {
livereload: true
},
files: ['**'],
tasks: ['connect'],
}
Here, the connect task runs when a file is changed. If I set the connect's keepalive option to true, then grunt-contrib-watch stops watching because it technically hasn't finished it's task. If I falsify the keepalive option, then the connect server dies after it has finished the tasks.
Yes, I could run the commands...
$ grunt connect
$ grunt watch
...in separate shells, but is there no way of running them with one command?
Livereload in grunt-contrib-watch informs for changes in files at a port here below you can see it is at 35729.
On the other hand the livereload in grunt-contrib-connect listens for changes at the port 35729.
So we should should configure them as -
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
livereload: 35729
}
}
},
watch: {
options: {
livereload: 35729
},
files: ['**'],
tasks: []
}
You need not provide "connect" as a task here. As the work of reloading is done by livereload here.
Now to make these two work with a single command we will register them as -
grunt.registerTask("server", ["connect", "watch"]);
Now the connect is run and then watch is run. Now normally registerTasks works by finishing the first task then the second task and so on. But due to the behaviour of connect as stated by you -
Note that this server only runs as long as grunt is running
Connect is run only once. But watch will keep on running looking for changes (keeping grunt running) and thus keeping the connect server up.
Now when you try
grunt server
things will work like a charm.
I use grunt-nodemon, which encapsulates watch and a nodejs launcher in a single task:
nodemon: {
dev: {
script: 'app.js',
options: {
ignore: [
'node_modules/**',
'public/**'
],
ext: 'js'
}
}
}
Then executed with:
$ grunt nodemon:dev
Now, nodemon only launches the app.js script with nodejs, so you will need a small app.js to load a static static express server:
var express = require('express');
var server = express(); // better instead
server.configure(function(){
server.use(express.static(__dirname + '/public'));
});
server.listen(3000);
Trying to get grunt-connect setup.
What I want is to start a server (either localhost or an IP), the browser to open at that url and ideally this to livereload when a CSS, HTML or JS file is changed. But we can come to that later.
This is what I have in the gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
includesPath: "includes",
connect: {
test: {
port: 9001,
hostname: '0.0.0.0',
base: '',
open: true
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect:test']);
grunt.registerTask('server', ['connect:test']);
};
this is the dependency in the package.json
"grunt-contrib-connect": "~0.8.0"
When I run either grunt or grunt server the Terminal window says
Started connect web server on http: //0.0.0.0:8000
It doesn't open a browser. If I go to that address in the browser, there is no page there.
What do you reckon?
So it seems I was missing the options object! What a stupid, Friday afternoon mistake that was. Frustrating that it didn't error though, I assume it has default settings it uses, which would explain why it used it's on port?
This code did the trick, thanks for your help Dave McNally
connect: {
server: {
options: {
keepalive: true,
port: 4000,
base: '.',
open: true
}
}
}
You’ll want a value in the base parameter, the default '.' will do if source is in same root directory and as mentioned, you don't need to specify hostname when using the default. Also, check ports, as you're specifying one in the task but then opening another in the given address?
Is it possible to run Grunt Karma locally?
Start the Karma server, assign a port to it and then open different browsers on my computer and run tests by inserting the localhost:port?
I have a Github project running Travis and have strange results in some Browsers. I can run the tests locally but only with "virtual" PhantomJS. Would be nice to check my Specs in a real browser.
I regularly use karma-chrome-launcher and know that there is also karma-firefox-launcher as well.
In your karma.conf.js file, or in your Gruntfile.js options area you can define:
browsers: ['Phantomjs', 'Chrome'],
and then in the plugins section include:
plugins: [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-phantomjs-launcher'
]
https://github.com/karma-runner has a list of launcher plugins and other useful plugins. There is even a karma-browserstack-launcher, though that wouldn't be local.
Documentation on what you can configure either total in the Gruntfile.js or by referencing a karma.conf.js in your Gruntfile.js can be found:
https://github.com/karma-runner/grunt-karma
http://karma-runner.github.io/0.10/config/configuration-file.html
I like the functionality of using a karma.conf.js file to separate out the majority of my karma config, so in my Gruntfile.js I do the following:
karma: {
options: {
configFile: 'karma.conf.js'
},
unit: {
autoWatch: true,
singleRun: true
},
watch: { // still needs watch integration and testing
browsers: ['PhantomJS'],
background: true
}
},
Then in my karma.conf.js file I follow the base structure shown https://github.com/karma-runner/karma/blob/master/test/client/karma.conf.js