We Keep Coding

Can Grunt minify multiple files separately, without concatenating them?

I have a Sailsjs project, and it comes with Grunt built in. Here is what tasks/register/prod.js looks like:
module.exports = function(grunt) {
grunt.registerTask('prod', [
'compileAssets',
//'concat',
'uglify',
'cssmin',
'sails-linker:prodJs',
'sails-linker:prodStyles',
//'sails-linker:devTpl',
//'sails-linker:prodJsJade',
//'sails-linker:prodStylesJade',
//'sails-linker:devTplJade'
]);
};
and here is my attempt to get Grunt to minify files separately tasks/config/cssmin.js:
module.exports = function(grunt) {
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
}
});
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
This doesn't work correctly, it only gives me main.min.css (minified) but not test.min.css.

"dist" is not a static part of the syntax, it's the name of the target. You can have as many targets as you want, but you can't have two with the same name.
grunt.config.set('cssmin', {
test: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
},
main: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
Running "cssmin" executes both targets, "cssmin:test" runs the first one and "cssmin:main" runs the second.

The second time you set the value for the cssmin task you are overwriting your previous value, thus you are only returned main.min.css.
To minify multiple separate files with cssmin you would only set grunt.config once and it would look like this:
module.exports = function(grunt) {
grunt.config.set('cssmin', {
dist: {
src: 'assets/css/test.css',
dest: '.tmp/public/min/test.min.css'
},
dist2: {
src: 'assets/css/main.css',
dest: '.tmp/public/min/main.min.css'
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};

grunt uglify showing error

I am getting the error though all seems to be right in the code. Can someone help?
gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//Setting up some base links
meta: {
basePath: '../'
},
//Reading package.json file
pkg: grunt.file.readJSON('package.json'),
// Concat Configuration
concat: {
options: {
separator: ';'
},
dist: {
src: ['<%= meta.basePath %>scripts/*.js'],
dest: '<%= meta.basePath %>scripts/concated.js'
}
},
// Uglify Configuration
uglify: {
build: {
src: ['<%= meta.basePath %>scripts/concated.js'],
dest: '<%= meta.basePath %>scripts/uglify.js'
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat','grunt-contrib-uglify');
// Default task
grunt.registerTask('default', ['concat','uglify']);
};
ERROR
Already seen the links:
grunt uglify task failing
new to grunt - warning: task "concat, uglify" not found
However, "grunt concat" runs fine and provide results. No issues. But this uglify seems to create a lot of pain.

try this excerpt from http://gruntjs.com/configuring-task:
uglify: {
static_mappings: {
// Because these src-dest file mappings are manually specified, every
// time a new file is added or removed, the Gruntfile has to be updated.
files: [
{ src: 'lib/a.js', dest: 'build/a.min.js' },
{ src: 'lib/b.js', dest: 'build/b.min.js' },
{ src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js' },
{ src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js' },
]
}
}

Watch task doesn't compile sass files

So i am trying to set up my first grunt application, but i am struggling with the watch task.
When I run the task watch looks like it is working when i change my sass files, but the css files are not updated, so it looks like it is not compiling.
I am wondering if i need to install something else, for me this is all new... and i am not sure if I understand, because it looks very simple but I just cant make it work.
So here is my code
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch:{
sass:{
options: {
livereload: true
},
files:['sass/**/*.scss'],
task:['sass']
},
css: {
files: ['css/*.css'],
tasks: []
}
},
sass: {
dist: {
files: [{
expand: true,
cwd: 'sass',
src: ['*.scss', '*.sass'],
dest: 'css/',
ext: '.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};

I think you want your livereload to be on the css files instead of scss. As it is the compiled file that you want to be reloaded and not the preprocessed (scss) file.
Example
watch:{
sass:{
files:['sass/**/*.scss'],
task:['sass']
},
css: {
options: {
livereload: true
},
files: ['css/*.css']
}
}

OWWWWW....
I just found the problem... it should have been "tasks" not "task", i wasted sooo much time, on finding this little thingy!

Grunt - Minifying/processing multiples files into one

I'm new to Grunt and I'm lost in all it's option.
I'm trying to do two things :
Minify all my js files into one each time I change one of them
Process a specific scss file when one of my scss file is changed
Here is the current Gruntfile.js I got :
module.exports = function (grunt) {
grunt.initConfig({
// define source files and their destinations
uglify: {
files: {
src: 'js/*.js', // source files mask
dest: 'jsm/', // destination folder
expand: true, // allow dynamic building
flatten: true, // remove all unnecessary nesting
ext: '.min.js' // replace .js to .min.js
}
},
watch: {
js: { files: 'js/*.js', tasks: [ 'uglify' ] },
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
// register at least this one task
grunt.registerTask('default', [ 'uglify' ]);
};
How could I achieve this?

Use the grunt-contrib-concat
grunt.initConfig({
concat: {
dist: {
src: ['files/**.min.js'],
dest: 'project.js',
},
}
});
You should wrap all you files in an anonymous function and define variables using var so you do not get variable conflicts between files.
(function(){
// foo has function scope
var foo = 3;
console.log(foo);
// FOO is a global variable and
// can be accessed between files
window.FOO = 3;
console.log(FOO);
}).call()

Save jade file to html with same name

Trying to get jade to save my jade files as HTML files while keeping the same file name.
So the file views/index.jade should save as dist/index.html
Same for additional files.
I am using grunt-contrib-jade
The jade configuration of my Gruntfile:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
pretty: true
},
files: {
'dist/*.html': ['views/*.jade']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.registerTask('default', ['jade']);
};
But it just saves the file as *.html

I think it's doing what you are telling it to do.
Try this for configuration of the jade task:
jade: {
compile: {
options: {
pretty: true
},
files: [{
expand: true, // setting to true enables the following options
cwd: '/jade', // src matches are relative to this path
src: ['{,*/}*.jade'], // matches *.jade in cwd and 1 level down
dest: 'dist/', // destination prefix
ext: '.html' // replace existing extensions with this value
}]
}
}
here is is some information about building file lists dynamically with Grunt.