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 &
Related
I cannot seem to get fileblocks running. Every time I run grunt I get this error message:
Running "wiredep:app" (wiredep) task
Running "fileblocks:dev" (fileblocks) task
Verifying property fileblocks.dev exists in config...ERROR
>> Unable to process task.
Warning: Required config property "fileblocks.dev" missing. Use --force to continue.
Aborted due to warnings.
I have a modular setup for integrating the various tasks executed by Grunt. I have installed file-blocks by running npm install --save-dev grunt-file-blocks and my Gruntfile.js is:
module.exports = function(grunt) {
grunt.initConfig({
pkg: require('./package.json')
});
grunt.loadTasks('grunt-tasks');
grunt.registerTask('default', ['wiredep', 'fileblocks:dev']);
};
Here's my grunt-tasks/fileblocks.js:
module.exports = function(grunt) {
grunt.initConfig({
fileblocks: {
dev: {
src: 'app/*.html',
blocks: {
'css': {
src: 'app/*.css'
},
'js': {
src: 'src/*.js'
}
}
}
}
});
grunt.loadNpmTasks('grunt-file-blocks');
};
So, I expect fileblock:dev to run the fileblocks task dev that I've defined, but I get the aforementioned error. Help!
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']);
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 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
I've the following Grunfile.js File:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/build/style.css': 'css/style.scss'
}
}
},
watch: {
stylesheets: {
files: ['css/*.scss'],
tasks: ['newer:sass']
}
}
});
// Load the plugin that compiles sass
grunt.loadNpmTasks('grunt-contrib-sass');
// watch for, and run grunt if files change
grunt.loadNpmTasks('grunt-contrib-watch');
// Plugin for Grunt tasks to run with newer files only.
grunt.loadNpmTasks('grunt-newer');
// Grunt Tasks:
grunt.registerTask('default', ['newer:sass']);
};
After running grunt watch and saving my scss File, the console output is the following:
Running "watch" task
Waiting...
>> File "css\style.scss" changed.
Running "newer:sass" (newer) task
Running "newer:sass:dist" (newer) task
Running "sass:dist" (sass) task
File css/build/style.css created.
Running "newer-postrun:sass:dist:1:D:\xampp\htdocs\grunt-test\node_modules\grunt-newer\.cache" (newer-postrun) task
Done, without errors.
The problem is, the .scss file is compiled every time. Even if there was no change.
I don't understand why grunt is running 3 tasks (newer:sass, newer:sass:dist, sass:dist), instead of only running the task defined under watch (newer:sass).
Hope someone has an idea to fix this. :)
I'm not positive this is the problem, but try specifying that you don't want to run all of sass, just sass:dist. So try: grunt.registerTask('default', ['newer:sass:dist']);