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
Related
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'
}
]
}
}
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 build a Angular App with Yo angular-genertor,
I was building the app with Grunt Build fine, then I added Bootstrap 3 and also npm install grunt-bower-install
I added these lines to the Grunt file
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
//ADDED THIS LINE
grunt.loadNpmTasks('grunt-bower-install');
grunt.initConfig({
yeoman: {
// configurable paths
app: require('./bower.json').appPath || 'app',
dist: 'dist'
},
//ADDED THESE LINES
'bower-install': {
target: {
src: [
'app/index.html'
],
}
},
I have removed these line however!
Now Grunt Build is throwing this error
Running "bowerInstall:app" (bowerInstall) task
Warning: Cannot read property 'main' of undefined Use --force to continue.
Aborted due to warnings.
I do know what to do or even where to start?
In my yeoman generated project this task looks like:
'bower-install': {
app: {
html: '<%= yeoman.app %>/index.html',
ignorePath: '<%= yeoman.app %>/'
}
},
In newer version instead of html uses src:
'bowerInstall': {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: '<%= yeoman.app %>/'
}
},
Maybe you adapt it to your case. Though i think it should work without changes.
But you have almost the same, so maybe the problem in another place.
I found the answer,
I simply needed to run Bower Install,
I've been using a modified version of the gruntfile that comes with the Yeoman.io base angularjs generator, and the grunt-bower-install command is kind of handy for keeping my base index.html file up-to-date with bower dependencies.
However, when I do a bower install (package) --save and then grunt bower-install, my index.html updates, but my karma.conf.js does not update, meaning I need to manually add the new file to the list of files to load when karma runs the test suite (otherwise the injector fails trying to inject a nonexistent package).
Is there any easy-peasy way to add this to my grunt workflow? It's not the end of the world, but it is one of those easy-to-forget things.
I actually came up with a solution for just this problem. Check out https://github.com/stephenplusplus/grunt-bower-install/issues/35#issuecomment-32084805
'bower-install': {
app: {
src: '<%= yeoman.app %>/index.html',
ignorePath: '<%= yeoman.app %>/'
},
test: {
src: 'karma.conf.js',
fileTypes: {
js: {
block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
detect: {
js: /'.*\.js'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
}
}
Starting a new Angular project via Yeoman asks if you want to include Twitter Bootstrap (I'm using Sass flavor). Doing so includes both the styles and scripts. However, I want to use UI Bootstrap instead of Bootstrap's scripts (which depend on jQuery).
So, is it possible to install only Bootstrap's styles (preferably in Sass) with Bower? Or do I just need to download and include the Bootstrap styles manually?
I know one CSS-only Bootstrap packages in Bower: bootstrap-css-only; However it comes with precompiled CSS but not SASS.
just add exclude option in grunt bowerInstall task, and bowerInstall task will not inject the excluded file in the html file
bowerInstall: {
app: {
src: ['<%= yeoman.app %>/index.html'],
exclude: ['bower_components/bootstrap/dist/js/bootstrap.js'],
ignorePath: '<%= yeoman.app %>/'
}
},
Based on this answer, you could add this to .bowerrc to delete the Bootstrap JS files:
{
"directory": "bower_components",
"scripts": {
"postinstall": "rm -rf bower_components/bootstrap-sass-official/assets/javascripts"
}
}
if you don't have a bowerInstall task in your gruntfile as mentioned in the accepted answer, this also works in the wiredep task.
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
exclude: ['bower_components/bootstrap/dist/js/bootstrap.js'],
ignorePath: /\.\.\//
},
You can execute:
bower install bootstrap-css-only