We Keep Coding

Minified all images - Grunt

I have more than 100 images in my images/ folder.
Here is my imagemin - Grunt Config
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/*/}*.{gif,jpeg,jpg,png,ico}',
dest: '<%= config.dist %>/images'
}]
}
}
When I run grunt build I saw this
Running "imagemin:dist" (imagemin) task
Minified 7 images (saved 492.79 kB)
Only 7 of my images got minified. Not all.
I've tried changing the * around in a diff combination, but so far - no luck.
src: '{,*/*/}*.{gif,jpeg,jpg,png,ico}'
How do I fix my src to minified everything in my images folder ?

I think the problem might be in the src globbing pattern. The pattern you are using only matches those images that are in the cwd root or in a two levels deep ones ({,*/*/}).
If you want all the images in the cwd directory to be minified regardless the levels of subdirectories they reside, you should use the **/* globbing pattern instead:
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '**/*.{gif,jpeg,jpg,png,ico}',
dest: '<%= config.dist %>/images'
}]
}
}

Grunt is treating folder with a dot as a file

When trying to compile my grunt file and build into my dist folder for deployment I get the following error in the console:
Running "rev:dist" (rev) task
dist/public/app/app.js >> 63decaf3.app.js
dist/public/app/vendor.js >> a09756ab.vendor.js
dist/public/app/app.css >> d2017fc8.app.css
Warning: Unable to read "dist/public/bower_components/animate.css" file (Error code: EISDIR).
The reason for this is that I have a bower component I've got installed named animate.css. This library is of course installed in my bower_components folder, but the matching string I have in my Grunt file only looks for files with an extension of .js, .css, et cetera. Here's my matching string:
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css', // Offending line
'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/public/assets/fonts/*'
]
}
}
}
And here's the directory structure:
bower_components
-> ...
-> angular-ui-router
-> animate.css // Folder with the error
---> animate.css // File that it should be recognizing
---> animate.min.css // File that it should be recognizing
-> es5-shim
-> ...
In this case, how would I tell Grunt that this is a directory which contains files rather than a file itself?

I have slightly different approach.
bower install animate-css --save
it will grab animate.css but save at:
bower_components/animate-css
Using this method you don't have to play with Gruntfile.js which I personally consider unpleasant to edit and even look at ;)

Exclude the animate.css folder, then include everything inside it. I am not sure about the exact glob options see here, for details. Something like this:
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css',
'!<%= yeoman.dist %>/public/bower_components/animate.css',
'<%= yeoman.dist %>/public/bower_components/animate.css/animate.css',
'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/public/assets/fonts/*'
]
}
}
}

You should be able to use a custom filter function with the fs.Stats method. Also, there is the ext option ( Indicates where the period demarcating the extension is located. )
ext: String
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css', // Offending line
'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/public/assets/fonts/*'
],
filter: 'isDirectory',
You may need to use isFile depending on if you only want to match actual files instead.

Example of isFile usage, worked a charm for me.
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= yeoman.dist %>/**/*.js',
'!<%= yeoman.dist %>/local.js',
'!<%= yeoman.dist %>/web.js',
'<%= yeoman.dist %>/styles/**/*.css',
'<%= yeoman.dist %>/images/**/*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/styles/fonts/*'
],
filter: 'isFile'
}
},

Compile, Concatenate and Minify Sass files with Grunt

I'm building a sizable JS application using angularjs, and I'm using Grunt to process everything into a compact distribution. I can't figure out what to use to compile, concat and minify my .scss files into one single css file.
My project is organized by modules, so the .scss files are scattered, rather than grouped in a single directory.
I've looked at grunt-contrib-sass and grunt-contrib-compass, but they both seem to require you to individually specify files to compile. I'm looking for a solution that won't have to change when I add source files.
What Grunt plugin can I use to compile, concat and minify my sass files into a single css file?
I'm currently using concat and recess to concat and minify my plain css files:
concat: {
css: {
src: ['<%= src.css %>'],
dest: '<%= distdir %>/<%= pkg.name %>.css'
},
},
recess: {
min: {
files: {
'<%= distdir %>/<%= pkg.name %>.css': ['<%= distdir %>/<%= pkg.name %>.css']
},
options: {
compress: true
}
}
}

I think a documentation about patterns can help you.
http://gruntjs.com/configuring-tasks#globbing-patterns
sass: { // Task
dist: { // Target
options: { // Target options
style: 'expanded'
},
src: 'foo/{a,b}*.sass', // you can use some kind of regular expression
dest: 'foo/css/
}
}

How do I tell Grunt to NOT minify or concatenate js files in a build task?

I've just scaffolded an Angular app using Yeoman. I've noticed that the build task does several things by default, including minifying and concatenating js files.
I'd like to have a simpler build task that didn't do any minifying or concatenation, and, instead, only did the following two things:
compile my .scss into .css
copy a working app into my distribution directory
Can anyone help me write a grunt task that will do (only) these two things?
Many thanks.

Ok, I've edited the default grunt file so that it does what I want.
My solution involved writing tasks called copy:devDist and compass:devDist, and then combining them into a devDist task.
//
// copy:devDist --> copies everything into the dist folder, except styles/
//
copy: {
[...]
devDist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'**','!styles/**' // everything but styles/
]
}]
}
},
//
// compass:devDist --> compile the sass; put result in dist/styles/
//
compass: {
[...]
devDist: {
options: {
cssDir: '<%= yeoman.dist %>/styles'
}
}
},
//
// register a 'devDist' task that calls the two tasks above
//
grunt.registerTask('devDist', [
'clean:dist',
'copy:devDist',
'compass:devDist'
]);
Now running grunt devDist compiles my css and puts a fully functional app into my dist folder. Excellent. :)

Grunt watcher for javascript concat

I'm trying to concatenate all javascript files inside my controllers directory into one file, located one level higher. This is the code I'm using:
concat: {
dist: {
files: {
'<%= yeoman.app %>/scripts/all.js': [
'<%= yeoman.app %>/scripts/controllers/{,*/}*.js',
'<%= yeoman.app %>/scripts/controllers/{,*/}*.js'
]
}
}
}
It works fine, but I'm forced to manually type grunt concat in console every time I change my javascript files. So I'm trying to get this done with a watcher but can't get it to work. This is my watcher code:
concat: {
files: ['<%= yeoman.dist %>/scripts/controllers/*.js'],
tasks: ['concat']
},

You will need to type "grunt watch" when you want to have watch monitor the files. You'll need to add the watch task in your "Gruntfile.js" like so:
watch: {
concat: {
files: ['<%= yeoman.dist %>/**/*.js'],
tasks: "concat"
}
}
Your concat task still needs to be there as you currently have.
Make sure you install grunt-contrib-watch as well..
npm install grunt-contrib-watch --save-dev
Check out the github page for grunt-contrib-watch for more info on these: https://github.com/gruntjs/grunt-contrib-watch