Develop Reference

Grunt and Uglify, running more than one task?

I have a Grunt files as follows,
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
'uglify': {
options: {
preserveComments: 'some',
},
my_target: {
files: {
'site/assets/js/js_code.js': [
/* Libs */
'/js/libs/jquery_2.2.4.min.js',
'/js/libs/underscore_1.8.3.min.js',
'/js/libs/backbone_1.3.3.min.js',
/* Plugins */
'/js/plugins/dropzone.min.js',
'/js/plugins/jquery.magnific-popup.min.js',
'/js/plugins/jquery.validate.min.js',
/* Build JS Functions */
'/js/functions.js',
'/js/builder.js',
]
}
}
},
'sass': {
dist: {
options: {
style: 'expanded',
compass: true,
},
files: {
'assets/css/styles.css': '/scss/styles.scss',
} //End of Files
} //End of Dist.
}, //End of SASS
watch: {
'JS': {
files: ['/js/*.js'],
tasks: ['uglify'],
options: { spawn: false },
},
'Scss': {
files: ['/scss/*.scss'],
tasks: ['sass'],
options: { spawn: false },
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
};
What I can not work out, and I have done lots of research but cant seems to find an answer, is how to set up uglify to have more than one task.
I know I can set up more than one file target but I dont want my watch to running these. So I want to be setup a 'libs.js', 'plugins.js' and something like 'my_code.js'. But I don't want the libs and plugins to be run each time my code is edited/updated. But what to be able to set it up in a way so that I can run something like, grunt uglify-libs.
Is that doable?
Many thanks
UPDATE
As per comments below, I try to explain in more detail.
Right now, I run grunt watch Which returns one output file.
I want to change this to have three output files, one for the libs files, one for the plugins and the other would be the code I write.
So when I run Grunt watch, that would only watch the files in my code but not any of the libs or plugins files.
Then I want to be able to run, Grunt uglify-libs, this would then make the libs file.
Same goes for the plugins, but something like, Grunt uglify-plugs.
So basically I want three uplify tasks but only one of them is run within the watch function.
Hope that help explain more.
Many thanks.

If i understood you right, you want to use one grunt-command to start multiple tasks. You can do this by creating a "parent" tasks, who calls multiple sub-tasks like this:
grunt.registerTask('uglify-libs', ['sass', 'uglify']);

using updating my css file using grunt

Please i am not sure if i misunderstood what grunt is for. I was expecting to write .scss files and grunt take what i write in sass and update them in my .css file. I learnt to configure my grunfile.js here . However, after running grunt watch , grunt keeps watching and excute my .scss file when ever i change it. However, contrary to my expectation, it does not update my .css file. Below is my gruntfile.js
module.exports = function(grunt) {
grunt.initConfig ({
sass: {
dist: {
files: {
'public/stylesheets/style.css' : 'sass/style.scss'
},
options: {
loadPath: ['bower_components/foundation-apps/scss']
}
}
},
watch: {
source: {
files: ['**/*.sass','**/*.scss'],
tasks: ['sass'],
options: {
livereload: true, // needed to run LiveReload
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
In my page, i only reference the style.css and expect it to be updated with my .scss content. What am i missing please? Any help would be appreciated.

Try to add watch to the default task:
grunt.registerTask('default', ['watch', 'sass']);

How to I create a top-level grunt file and import it in another grunt file located in subfolders?

I want to create a common top-level Gruntfile.js configured to watch over less file change. When the less file changes, I want to compile it to css and then livereload the css file in browser. I have the functionality working but I have to duplicate most of code in Gruntfile.js for every project. So I was thinking if there is some way I can create a common Gruntfile.js and include/import it in different projects.
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
options: {
compress: true
},
compile: {
extend: true,
src: 'less/**/project.less',
dest: 'css/project.css',
ext: '.css'
}
},
watch : {
less : {
files : ['less/**/*.less'],
tasks : ['less']
},
css : {
files : ['css/*.css'],
options : {
livereload: true,
spawn : false
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
};

I solved the problem using grunt plugin - 'gruntfile'. It lets you import top-level Gruntfile.js to be included in other Gruntfiles.
I set parameters dynamically of parent Gruntfile from within other gruntfiles.
You can find more about the plugin and usage examples on : https://github.com/shama/gruntfile

grunt watch executes tasks multiple times

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

Can GruntJS remove the bower_components folder after copying files?

I am using Bower and GruntJS. I thought that grunt-bowercopy would remove the bower_components folder when it is done but this is not happening.
Can grunt-bowercopy remove the bower_components folder after copying the files to the locations I want?
Here is my folder setup:
->Project
->Themes
->Theme
->assets
->scripts
->styles
->tools
->build
->bower_components
->bower.json
->gruntfile.js
->package.json
Here is how I am running grunt-bowercopy in my gruntfile.js
module.exports = function (grunt) {
// Loads the necessary tasks for this Grunt file.
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
bowercopy: {
options: {
clear: true
},
js: {
options: {
destPrefix: '../../Themes/Theme/assets/'
},
//The key is the destination file. The value is the file from the bower_components folder
//The files will be added to a scripts folder at the location: ../../themes/3MTheme/assets/scripts
//The key is the name of the folder that is copied into the /assets folder.
src : 'scripts'
},
css: {
options: {
destPrefix: '../../Themes/Theme/assets/'
},
src: 'styles'
}
}
// Custom task, executed via the command "grunt bowercopy"
grunt.registerTask('bower', ['bowercopy']);
};

It doesn't seem as if grunt-bowercopy does this for you, but I've done something similar for clearing reports before running test commands.
Just create your own custom task called something like cleanbowercopy which executes an rmdir on the directory you are cleaning.
Then update your register task to call it after bowercopy:
grunt.registerTask('bower',['bowercopy','cleanbowercopy']);
That way it will accomplish what you are seeking within the same command, and can even be reused if you'd rather clean the dir at a different point in time.

I found the asnswer. I was using clear: true in the options when it should be clean: true
This works in my gruntfile.js
module.exports = function (grunt) {
// Loads the necessary tasks for this Grunt file.
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
bowercopy: {
options: {
clean: true
},
js: {
options: {
destPrefix: '../../Themes/Theme/assets/'
},
//The key is the destination file. The value is the file from the bower_components folder
//The files will be added to a scripts folder at the location: ../../themes/3MTheme/assets/scripts
//The key is the name of the folder that is copied into the /assets folder.
src : 'scripts'
},
css: {
options: {
destPrefix: '../../Themes/Theme/assets/'
},
src: 'styles'
}
}
// Custom task, executed via the command "grunt bowercopy"
grunt.registerTask('bower', ['bowercopy']);
};