I am using yeoman + angular and tried out 'yeoman build:minify'. This fails because the task rev:img renames all images. Afterwards, the dynamic sources (see http://docs.angularjs.org/api/ng.directive:ngSrc) do not work anymore.
Does someone know a trick to fix this? E.g. would it be possible to avoid the image renaming?
This is currently a known issue and we'll try to fix it soon.
In the meantime you can try out one of the suggested workarounds in this thread.
Just replace the rev config with this:
rev: {
img: ['images/**','!images/ignore/**']
}
and place all your dynamic images in images/ignore/
In recent versions of Yeoman and its Gruntfile.js you can add folder of image to its filerev task. So that your filerev task looks like this:
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
/* Here you'll see some ignoring: */
'!<%= yeoman.dist %>/images/some_image.png',
'!<%= yeoman.dist %>/images/ignore',
'<%= yeoman.dist %>/styles/fonts/*'
]
}
},
Related
I created a yeoman angular project that is not building properly. After I run run the production build (dist folder), I get this error:
Failed to load template: /bundles/craigslist/main.html
It seems to be copying the files, but since the html files get turned into a string that lives in dist/scripts.js, it throws an error when trying to find /bundles/craigslist/main.html
In my "/dist/scripts.js":
.config(["$routeProvider", function(a) {
a.when("/", {
templateUrl:"/bundles/craigslist/main.html",
controller:"CraigslistMainCtrl",
controllerAs:"craigslist_main_root"
})
Info if necessary:
instead of the pattern /scripts and /views, I use bundles that organize similar files together, regardless of extension. For example, I have a /bundles/craigslist folder, which has the craigslist templates, service and routes. I'm trying to adjust my Gruntfile.js to account for this.
This is my grunt file: https://gist.github.com/ivansifrim/f632832a4ba8f44bf828b5d88066a0ce
This is my folder structure:
I tried to apply what was discussed here Angular / grunt failed to load template without any luck.
Try :
usemin: {
html: ['<%= yeoman.dist %>/**/*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
js: ['<%= yeoman.dist %>/scripts/{,*/}*.js', '<%= yeoman.dist %>/bundles/{,*/}*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>',
'<%= yeoman.dist %>/images',
'<%= yeoman.dist %>/styles'
],
patterns: {
js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
}
}
}
So I have started yo angular for a new project and it's great, the only issue is that I like to structure my views and have partials etc, for example a great structure for me is something like the following:
app/views/_partials/modals
app/views/_partials/menus
app/views/_partials/buttons
app/views/index.html
app/views/about.html
However, it appears that the angular generator doesn't look in sub directories when building into the dist folder and I get all sorts of missing includes and errors.
Can I change Grunt to look into these sub directories and process the views accordingly so that they appear within my app after building?
I located an interesting block that I think could be responsible in my Grunt file:
ngtemplates: {
dist: {
options: {
module: 'myApp',
htmlmin: '<%= htmlmin.dist.options %>',
usemin: 'scripts/scripts.js'
},
cwd: '<%= yeoman.app %>',
src: 'views/{,*/}*.html',
dest: '.tmp/templateCache.js'
}
},
Or is it something in the usemin block? I'm confused (relatively new to Angular):
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
js: ['<%= yeoman.dist %>/scripts/{,*/}*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>',
'<%= yeoman.dist %>/images',
'<%= yeoman.dist %>/styles'
],
patterns: {
js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
}
}
},
Ok, so I figured this one out, the issue was in the ngtemplates block and my code now looks like this:
ngtemplates: {
dist: {
options: {
module: 'myApp',
htmlmin: '<%= htmlmin.dist.options %>',
usemin: 'scripts/scripts.js'
},
cwd: '<%= yeoman.app %>',
src: 'views/**/**/*.html',
dest: '.tmp/templateCache.js'
}
},
Notice the src attribute has changed from:
src: 'views/{,*/}*.html',
to:
src: 'views/**/**/*.html',
This seems to capture all my templates within the _partials directories
I'm building an angular app with grunt which uses cache manifest.
My problem is that after concatenation and minification of all my js files in one, the manifest.cfm doesn't get rewritten and that makes the paths in it incorrect.
Here is some of my Gruntfile.js :
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html','<%= yeoman.dist %>/{,*/}*.tpl.html', '<%= yeoman.dist %>/views/templates{,*/}*.tpl.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images', '<%= yeoman.dist %>/images/icons-app']
}
},
I know the question is a bit old, but I just solved something similar, and could not find many answers to help. Your best bet is to continue using filerev and use a grunt manifest creator like grunt-manifest. You want the file names to change when they are updated (with filerev) so the manifest file will change as well. That is the only way the application cache will know it needs to update.
After you install grunt-manifest, a config like this in your grunt file should do what your asking:
manifest: {
generate: {
options: {
basePath: 'app/',
network: ['*'],
preferOnline: true
},
src: [
'scripts/*.js',
'styles/*.css',
'images/*.*',
'views/{,*/}*.html'
],
dest: 'dist/cache.manifest'
}
}
More Info: http://bnlconsulting.com/blog/the-browser-cache-and-angular
I ended up hand-writing the new paths in manifest.cfm before building. I'm not sure there is actually a way to get it automatically rewritten by any grunt task.
you can comment the "filerev" task form your grunt build one. This will spare you the rewriting after a new build.
Maybe necromacing this thread but there is: https://github.com/JoshSchreuder/grunt-manifest-generator
It will scan a given html file and automatically include all javascript/css/html files within.
On my project I added to my bower.json some projects that use fonts:
fontawesome
bootstrap
roboto-fontface
Grunt file was mainly generated by "yo angular" with some custom edits. Fonts work just fine in "grunt serve" development mode but don't work when I do my dist build with "grunt".
The problem is that fonts aren't copied to my dist folder. To fix that I manually changed my Gruntfile to copy:dist all my fonts. Like this:
{
expand: true,
cwd: "<%= yeoman.app %>/bower_components/bootstrap/dist/fonts",
dest: "<%= yeoman.dist %>/fonts",
src: ["*.*"]
}
My problem now is that all my libraries CSS expect the fonts to be on a specific folder ( roboto-fontface and bootstrap for example expect the font to be in different folders).
So I'll have to change my gruntfile to replace the fonts reference on the *.css files to target the right paths. I don't know yet how to do this but my main itch is that this seems very "hacky"
Bower works very well with my css files: they are automatically added to index.html and their href is correctly replaced when doing my dist build. For example I can upgrade my ng-grid project without problems, remove and add new projects. I believe that works because of the bower.json file on the ng-grid project that contains
"main": ["./ng-grid.css", "./build/ng-grid.js"]
Grunt is correctly configured to understand that and add it to my index.html.
But for fonts it seems the only solution is to to modify my gruntfile to add copy:dist and then some kind of regex replacement on my *css files. But, for example, the roboto-fontface project bower.json file also seems to have a good "main" where all the fonts are listed besides the css file.
For me it seems logical that I should be able to configure my Gruntfile so that it understands that the "main" parameter has fonts and automatically copies them to my dist/ and replaces my css files with the correct path.
When I add a new font to my project I'll have to edit my Gruntfile, also when I remove/update fonts.
So, the question is simple: how can I best manage my project fonts? What are the best practices? How are the 'cool kids' doing it?
I ran into this issue a few weeks ago, I also used yeoman-angular-generator and had to tweak the copy:dist as well.
In my project I was using 3 separate fonts, font-awesome, lato and open-sans. I added font-awesome via bower but the other 2 I manually downloaded them and placed them under app/fonts
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'images/{,*/}*.{png, jpg, jpeg, gif,webp}',
//any new font you drop under app/fonts will be copied to dist
'fonts/**'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}, {
expand: true,
cwd: '.',
src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
dest: '<%= yeoman.dist %>'
}, {
expand: true,
dot: true,
cwd: 'bower_components/font-awesome',
src: ['fonts/*.*'],
dest: '<%= yeoman.dist %>'
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
//rest of Gruntfile...
Hope this helps!
I'm using grunt and usemin with my angularjs project. Specifically my issue is concerned with usemin not revving image tags in any *.html file within a subdirectory of views.
My .html files are in the following structure
dist/
index.html
views/
profile.html
partials/
header.html
...
The grunt usemin:html task is processing everything in views/ but not within any of it's subfolders. ie. partials/*
Here is my grunt config:
...
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>'
}
},
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
...
What I've Tried
I tried adding these options to my usemin config:
options: {
basedir: '<%= yeoman.dist %>',
dirs: ['<%= yeoman.dist %>/**/*']
}
But still it doesn't process any subfolder of views.
Update
Thanks to jakerella's answer noa's comment I got the following to work:
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html', '<%= yeoman.dist %>/views/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
I think you're close, but I think you'll want to use the ** glob pattern in the html target of the usemin task:
usemin: {
html: ['<%= yeoman.dist %>/**/*.html'],
...
}
And you might need an expand: true in there as well (but not sure if the usemin task uses that option).