I have an angular app that I have scaffolded using yeoman.
When I am trying to build with grunt, no views directory is generated in dist/
This is how my GruntFile looks
htmlmin: {
dist: {
options: {
collapseWhitespace: false,
conservativeCollapse: false,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
ngtemplates: {
dist: {
options: {
module: 'tweetSearchApp',
htmlmin: '<%= htmlmin.dist.options %>',
usemin: 'scripts/scripts.js'
},
cwd: '<%= yeoman.app %>',
src: 'views/{,*/}*.html',
dest: '.tmp/templateCache.js'
}
},
And this is how my grunt logs look like
Running "ngtemplates:dist" (ngtemplates) task
File .tmp/templateCache.js created.
>> Usemin has not created uglify.generated yet!
And
Running "usemin:html" (usemin) task
Replaced 2 references to assets
Running "usemin:css" (usemin) task
Replaced 2 references to assets
Running "usemin:js" (usemin) task
Replaced 2 references to assets
Running "htmlmin:dist" (htmlmin) task
Minified 2 files
But I still cannot see any views folder generated in my dist/ folder
Please help me with the configuration
Please have a look to this link
https://www.npmjs.com/package/grunt-angular-templates
Grunt is caching your HTML templates with $templateCache. That means all your Html files were included in the script*.js file which was generated in dist/scripts/script*.js.
That is why the views directory is not being generated in dist/
Make change in your gruntfile.js
htmlmin. files.src: ['.html', '{,/}*.html']and
copy.dist.files.src:[
'.{ico,png,txt}',
'.htaccess',
'.html',
'{,/}.html',
'images/{,/}.{webp}',
'styles/fonts/{,/}.*'
]
In this way it is working for me.
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']]
}
}
}
I have generated a angular app with yeoman and now trying to minify my html files with grunt + htmlmin. The htmlmin bit looks like this:
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
conservativeCollapse: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
When I run this task then it responds that it has minified 2 files but I cant see them in the dist folder? There is no view folder created at all?
I don't use yeoman, but I do use Gruntjs.
Assuming it's not a yeoman config issue, you can do something similar to what I do. Here is the gist...
First I have a development process I've created that does not uglify, minify, or anything else... this helps speed up my dev process.
Then when I'm ready to publish I run it through a publish process that includes uglify, concats, minify, imagemin, etc...
You really only need to minify the html from the build (output) directory... and since you're publishing you might as well just overwrite the HTML files in the build directory with the htmlmin versions (there is really no sense in having both versions for publishing).
Here is my task to do that... for this case let's assume your output directory is named "_build". It's actually a very easy and clean task. Hope this helps...
htmlmin: {
site: {
options: {
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: false,
removeCommentsFromCDATA: false,
removeRedundantAttributes: false,
collapseBooleanAttributes: false
},
expand: true,
src: './_build/**/*.html',
}
}
You can't htmlmin something that doesn't exist yet. You have to build the output directory first and then run htmlmin on those files... I think your src will be more like the following as well...
files: [{
expand: true,
src: '<%= yeoman.dist %>/**/*.html'
}]
If this works for you, then please vote-up my answer and mark it as the correct answer.
With Yeoman, change your grunt file in both the 'htmlmin" and "copy" sections. This will allow for minification, more than one sub directory down.
Change this line:
src: ['*.html', 'views/{,*/}*.html'],
to this:
src: ['*.html', 'views/**/*.html'],
*Just be sure to change it in the 'htmlmin" and correspondingly in the "copy" section of your same grunt file.
I use ui-tinymce module in angular project. In one controller are called tinymce.execCommand('mceRemoveControl', true, 'ntContent'); and this works fine. But after grunt build command I get the following error: ReferenceError: tinymce is not defined. Can anyone help with this ?
I had the same problem with angular-ui-tinymce module, I fixed this by making sure that the file is included.
<script src="bower_components/tinymce-dist/tinymce.min.js"></script>
<script src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>
This scripts are inserted in the index.html file bower install angular-ui-tinymce and also the source code is downloaded and placed at the appropriate location.
Also when you run grunt build on the copy task it will not copy the files needed from the /tinymce-distfolder and a solution is to manually add to the copy task to copy the folders you need. I had to copy the /skins /themes /plugins folders directly into the dist/scripts folder by inserting the following code into the grunt.js file at the copy task:
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
...
}, {
...
}, {
expand: true,
cwd: 'bower_components/tinymce-dist/themes/modern/',
src: ['**'],
dest: '<%= yeoman.dist %>/scripts/themes/modern/'
}, {
expand: true,
cwd: 'bower_components/tinymce-dist/skins/',
src: ['**'],
dest: '<%= yeoman.dist %>/scripts/skins/'
}, {
expand: true,
cwd: 'bower_components/tinymce-dist/plugins/link/',
src: ['**'],
dest: '<%= yeoman.dist %>/scripts/plugins/link/'
}]
},
styles: {
...
}
}
This is not the best solution ever but it worked for me, hope it helps somebody.
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 read a lot about this issue but still did not find the solution.
I have an Angular application set up with Yeoman's generator whitout Sass. I tried to include fontawesome, so I used bower install components-font-awesome --save.
The problem is that when I grunt buildmy app, I have an error because fonts are not found in my dist folder :
GET http://myapp.com/bower_components/components-font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3 404 (Not Found)
So I tried to add this to Grunt copy task in order to copy the fonts to the right directory:
{
expand: true,
cwd: '<%= yeoman.app %>/bower_components/components-font-awesome/fonts/',
src: ['**'],
dest: '<%= yeoman.dist %>/bower_components/components-font-awesome/fonts/'
}
But I am still getting the same error...
EDIT
Fonts seem to be available at http://myapp.com/dist/bower_components/components-font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3
But not at the URI throwing the error (without /dist) ...
The only way I found to include icons in my Angular's application was to include glyphicons instead of fontawesome. The same problem is happening when grunt building my app with glyphicon, but the following copy task worked for me:
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'bower_components/**/*',
'images/{,*/}*.{webp}',
'fonts/*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},