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'
}
},
Related
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'
}]
}
}
My grunt usemin is not working for my javascripts that is on app/scripts only for scripts outside app folder, like bower.
What I mean is, usemin is not uglify my app/scripts:
Here is my GruntFile: http://pastebin.com/7jV9mipH
Please someone could help me?
SOLUTION
I figure out how to resolve my problem:
I just put the base path to my scripts folder at usemin comment block, like this:
<!-- build:js(app/) scripts/app.js -->
instead of:
<!-- build:js scripts/app.js -->
You see if you didn't include <!-- Usemin block --> in your .html file the usemin won't work.
So either check the .html files
Or uncomment the cssmin and uglify configuration. Which is currently turned off.
usemin: {
html: ['<%= yeoman.dist %>/{,**/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,**/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images']
}
},
// The following *-min tasks will produce minified files in the dist folder
// By default, your `index.html`'s <!-- Usemin block --> will take care of
// minification. These next options are pre-configured if you do not wish
// to use the Usemin blocks.
// cssmin: {
// dist: {
// files: {
// '<%= yeoman.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%= yeoman.dist %>/scripts/scripts.js': [
// '<%= yeoman.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
See this answer: grunt usemin doesnt affect the html file(index.html)
Just had this problem by myself and solvation was to convert all line endings into unix style line endings (lf) and avoid windows line endings in any file used by usemin
I'm new to web development and I'm trying to build a small webapp. I used yoeman to set everything up and it did pretty well, angular installed perfectly and I installed angular-animate and jquery-ui after with bower. Autoreloading the webpage happend automagically, I really liked it.
After a while it stoped livereloading my changes. I don't know why. I'm not sure what I did.
This is what my gruntfile watch section looks like:
// Watches files for changes and runs tasks based on the changed files
watch: {
js: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
tasks: ['newer:jshint:all'],
options: {
livereload: true
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['newer:jshint:test', 'karma']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
}
It looks ok right? No errors showing up when running:
grunt serve
I had the same problem where LiveReload would stop working after a while.
What worked for me was reinstalling the LiveReload Chrome Extension, so if you didn't make any changes to the Gruntfile you can try that.
Very similar to this question.
I've installed the node lib and have it in my package.json:
"devDependencies": {
...
"grunt-contrib-sass": "~0.6.0"
}
and have a block in my Gruntfile.js:
grunt.initConfig({
...
sass: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/styles/scss',
src: ['scss/{,*/}*.scss'],
dest: '<%= yeoman.app %>/styles/css',
ext: '.css'
}]
}
}
My file structure looks like so:
app
styles
css
scss
And I have the sass gem installed.
I'm sure I'm missing something very basic here that needs to be included. My yo serve doesn't seem to be putting the files in the right place to be caught up and used.
I imagine theres something I'm missing in the watch block, but I'm not sure what that is.
so my Gruntfile.js needed to look like this:
sass: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/styles/scss',
src: ['*.scss'],
dest: '.tmp/styles/',
ext: '.css'
}]
}
}
and I needed to add sass to the styles task in the watch block.
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