I am working with a virtualbox set up with vagrant/puphpet (ubuntu 12.04).
I set up grunt and contrib-watch successfully. I installed the chrome extension ... everything as specified here : https://github.com/gruntjs/grunt-contrib-watch#live-reloading
My Gruntfile is as follow :
module.exports = function(grunt)
{
require('load-grunt-tasks')(grunt);
grunt.initConfig({
compass: { // Task
dist: { // Target
options: { // Target options
sassDir: 'sass',
cssDir: 'css',
environment: 'development',
httpPath: '/',
imagesDir: 'img',
relativeAssets: true
}
}
},
watch: {
options: { livereload: true },
sass: {
files: ['sass/**/*.scss'],
tasks: ['compass'],
options: { spawn: false }
}
}
});
grunt.registerTask('default', ['compass']);
}
I run command "grunt watch" and it processes my sass right. But in Chrome's console I get the following error :
GET http://127.0.0.1:35729/livereload.js?ext=Chrome&extver=2.0.9
net::ERR_CONNECTION_REFUSED injected.js:116
If I add the script manualy in my view I still get the error :
GET http://localhost:35729/livereload.js net::ERR_CONNECTION_REFUSED
Any idea where this error could come from and why it's not loading the script ?
Your gruntfile looks alright.
It looks like your virtual machine refuses the connection. Make sure the live reload port is open in iptables.
In Ubuntu, that can be done simply with ufw:
sudo apt-get install ufw
sudo ufw enable
sudo ufw allow 35729/tcp
Related
Hey guys I am new to gruntfile and front end dev in general, I am trying to set up gruntfile so that it will run a server from my default task, this actually works but it does not open at index.htmt but on Grunt-Serve page instead then i have to navigate to src/index.html.
my gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
serve: {
options: {
port: 9000,
hostname: 'localhost',
}
}
});
//Load Grunt serve task
grunt.loadNpmTasks('grunt-serve');
grunt.registerTask('default', ['serve']);
};
package.json:
"devDependencies": {
"grunt": "^1.0.1",
"grunt-serve": "^0.1.6"
}
also i have seen before that it is possible to use gruntfile or the serve task to auto open the project in a browser... package I would need for this....? and also once am developing i would like to see my changes live.
Any help appricated
You're probably looking for browser-sync. It normally opens the browser automatically. You can see some configuration examples here: https://www.browsersync.io/docs/grunt
But just to get you started, try this setup:
First run $ npm install grunt-browser-sync --save-dev
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
browserSync: {
bsFiles: {
src : [
'index.html',
'paths/to/files/for/autoreload'
]
},
options: {
server: {
baseDir: "./"
}
}
}
});
grunt.loadNpmTasks('grunt-browser-sync');
grunt.registerTask('default', ['browserSync']);
};
The baseDir will try to open any file named index.html in the directory you specify, but I'm pretty sure you can configure this too. You can also change the file structure as you like and adapt the config.
Add the paths in src that you would like to watch and auto reload. Please note you might need to have a look at the other examples if you combine this with sass or other preprocessors.
I want to install package grunt-bower for my grunt by using npm install grunt-bower --save. After I install, I see package grunt-bower inside node_modules. Here is my gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
bower: {
dev: {
dest: 'public',
js_dest: 'public/javascripts',
css_dest: 'public/stylesheets'
}
},
watch: {
source: {
files: ['sass/**/*.scss', 'views/**/*.jade'],
tasks: ['sass'],
options: {
livereload: true, // needed to run LiveReload
}
}
}
});
grunt.loadNpmTasks('grunt-bower');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['grunt-bower']);
};
I have register this as on official page : grunt.loadNpmTasks('grunt-bower'); But when I run grunt command, I meet this error:
Warning: Task "grunt-bower" not found. Use --force to continue.
I don't know why. Does I do something wrong ? Please tell me.
Thanks :)
You've defined the task you want to run as bower and not grunt-bower therefore,
grunt.registerTask('default', ['grunt-bower']);
should be
grunt.registerTask('default', ['bower']);
I have a Grunt file running a concat and then a watch on that to re-concat if anything changes.
The problem is it blocks the terminal.
I am running this as a Visual Studio post build action, which means the program never launches.
Is there a way to run it so it doesn't block?
This is what my grunt file looks like:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
src: ['public/app/**/*.js'],
dest: 'public/app/app.js'
},
css: {
src: ['public/app/**/*.css'],
dest: 'public/app/app.css'
}
},
concurrent: {
watch: ['watch']
},
watch: {
files: ['public/app/**/*.js', 'public/app/**/*.css', '!public/app/app.js', '!public/app/app.css'],
tasks: ['concat']
}
});
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', ['concat', 'concurrent:watch']);
};
It is possible to run grunt as a process by running the command:
On Windows
start grunt
On Linux
grunt &
This is relevant to any Grunt task which has a source file and a destination (output file).
When I run grunt in my command line, I don't want Grunt to write anything to file, I just want to view (return) the output to my console, be it Bash, CMD or any CLI.
Lets take uglify for example.
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
options: {
mangle: true,
sourceMap: true,
},
build: {
src: 'js/foo.js',
dest: 'js/foo.min.js' <-- Don't need this.
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
Instead of Done, without errors, when successful, I want to view the uglifed code in the console.
For context, I need this for a command line application which won't need anything written to disk. I just need to use the output on the fly (I'm trying to avoid writing to file and re-reading from the CLI).
You could write directly to /dev/stdout ( not on windows tough ):
build: {
src: 'js/foo.js',
dest: '/dev/stdout'
}
I am building a Gruntfile.js file by hand for the learning experience. With the logic I have in this, if one of the static html/css/js files changes I want the express server to reload. So, in the watch task I have a livereload option to reload the express by pointing it to the express server task with livereload: '<%= express %>'. However, it's not working out as planned and I get:
Running "watch" task
Waiting...
Verifying property watch.livereload.files exists in config...ERROR
>> Unable to process task.
Warning: Required config property "watch.livereload.files" missing.
I get this message scrolling contentiously until grunt eventually breaks. What is causing this and how do I have it to where it would bounce express upon one of the static files changing? I would rather keep the express task outside of watch task and just reference it in watch task to keep it cleaner looking.
Gruntfile.js:
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
express: {
options: {
port: 9000,
script: 'app.js'
}
},
watch: {
options: {
livereload: true
},
servedFiles: {
files: '<%= pkg.name %>/static/**',
options: {
livereload: true
}
},
livereload: {
options: {
livereload: '<%= express %>'
}
}
}
});
grunt.registerTask('default', 'start server', function(target) {
grunt.task.run('watch');
console.log("ssss");
grunt.task.run('express');
});
}
I included a files property with a list of files in options under livereload which fixed the error. With that being said, this is not going to bounce express and the best way is just the standard way as a task(make sure to use spawn: false).