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.
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 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).
I'm using a yeoman web app template that runs an AngularJS app.
usemin is great, but AngularJS files must be pre-processed with ngmin to be annotated before being uglified and minified by usemin.
I can produce a single, concatenated file of annotated AngularJS controllers, directives, services, etc. using ngmin.
ngmin: {
build: {
src: ['<%= yeoman.app %>/js/one.js','<%= yeoman.app %>/js/two.js'],
dest: '<%= yeoman.dist %>/ng/annotated.js'
}
}
Basically I run a build that successfully created annotated.js.
What I want is declare annotated.js file in index.html to inform usemin to use that file only for distribution, not the ones I mention for development.
<!-- build:js js/app.min.js --> //annotated.js only must be processed instead of those 2 files.
<script src="js/one.js" type="text/javascript"></script>
<script src="js/two.js" type="text/javascript"></script>
<!-- endbuild -->
For reference, my usemin config:
useminPrepare: {
options: {
dest: '<%= yeoman.dist %>'
},
html: '<%= yeoman.app %>/index.html'
},
usemin: {
options: {
dirs: ['<%= yeoman.dist %>']
},
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/css/{,*/}*.css']
}
For reference, my build task:
grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
'concat',
'cssmin',
'ngmin',
'uglify',
'copy:dist',
'rev',
'usemin'
]);
How can I achieve it?
So, you used yo webapp to generator an application that you then plugged Angular in to? For future Angular apps you create (or if it's not too late for this one), there's a generator for that! https://github.com/yeoman/generator-angular
Here is a link and some code that shows how the ngmin task is pre-configured with the Angular generator:
https://github.com/yeoman/generator-angular/blob/v0.4.0/templates/common/Gruntfile.js#L326-335
ngmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.dist %>/scripts',
src: '*.js',
dest: '<%= yeoman.dist %>/scripts'
}]
}
}
Plug that in, tweak as necessary, and let me know if it works!
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/*'
]
}
},