I am having this problem and unable to find any answer which fix the problem.
I have created small Angularjs code with grunt build system.
Bower.json
http://pastebin.com/8AScfd7d
Gruntfile.js
http://pastebin.com/e0d7QLGG
log.txt (grunt --force)
http://pastebin.com/MYk9iR53
index.html
http://pastebin.com/B48w0Z58
using grunt --force command to build.
When I run the build it does not show any errors in console and under netowek tab all script loads fine but nothing happens. If I replace the minified script tag (my custom code) with the source script it start working.
Running out of ideas what could be wrong.
Replaced ngMin with ngAnnotate in Gruntfile.js and also added 'ngAnnotate:dist' in grunt build task.
/*ngmin: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}]
}
},*/
ngAnnotate: {
dist: {
files: [
{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}
]
}
}
Related
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 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.
I am using grunt,bower and yeoman for my angularjs web applicaiton. My UI code is ready for deployment. I want to create a .WAR file for deployment.
I installed "grunt-war" dependency using bower and I configured following code in my registerGruntTask.js file
grunt.loadNpmTasks('grunt-war');
grunt.initConfig({
/*
* Build a WAR (web archive) without Maven or the JVM installed.
*/
war: {
target: {
options: {
war_dist_folder: '<%= target %>',
war_name: 'sm-ui',
webxml_welcome: 'index.html',
webxml_display_name: 'sm-ui',
webxml_mime_mapping: [
{
extension: 'woff',
mime_type: 'application/font-woff'
} ]
},
files: [
{
expand: true,
cwd: '<%= target %>',
src: ['**'],
dest: ''
}
]
}
}
});
Then, I entered "grunt build" and "grunt war" in my command line. But, Nothing is creating. Please help me out.
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.
When you run grunt to build the app, the vendor.css file created in the dist folder 'mis-links' the glyphicons as /app/bower_componenets/.../glyphicons-... instead of ../fonts/glyphicons-...
In Gruntfile.js comment out the following line to fix this issue:
cssmin: {
options: {
//root: '<%= yeoman.app %>'
}
}
Source: https://github.com/yeoman/generator-angular/issues/645