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
Related
I have a Angular project which is build with Yeoman and Grunt. Everytime if I run command:
sudo grunt serve
Is app normally launched but in index.html are deleted some linked libraries from bower_components directory.
FXP:
<script src="bower_components/spin.js/spin.js"></script>
So I must everytime revert changes in index.html file in git before I can continue in testing.
Is any possibility how can i solve this annoying problem?
Thanks for any help.
EDIT:
I tried following:
Installed:
npm install grunt-script-inject
GrunFile.js
// Automatically inject Bower components into the app
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: new RegExp('^<%= yeoman.app %>/|../')
},
scriptinject: {
dev: {
srcs: ['<%= yeoman.client %>/bower_components/path/to/src/plugin.js',
'<%= yeoman.client %>/bower_components/path/to/src/plugin2.js'] ,//order is important if this sciprt will be concated and minified
html: '<%= yeoman.client %>/index.html', //file that as the block comment to look for a place to insert the script tags
without: '<%= yeoman.client %>/' //this script will be used to remove this block of string of script tag file location
}
}
},
And
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'wiredep',
'scripinject',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});
But now, after the grunt serve i see following error:
Running "serve" task
Warning: Task "scripinject" not found. Use --force to continue.
Aborted due to warnings.
What is wrong?
I resolved using the --s in bower install command
So:
bower install --save angular-translate
Works fine.
Here is documentation:
http://bower.io/docs/api/#install
I had a similar problem.
In index.html I added the following code:
<script src="bower_components/highcharts-release/highcharts.js"></script>
<script src="bower_components/highcharts-release/modules/heatmap.js"></script>
and every time I ran grunt serve or grunt build commands, grunt rewrote it to:
<script src="bower_components/highcharts-release/highcharts.js"></script>
<script src="bower_components/highcharts-release/highcharts-more.js"></script>
<script src="bower_components/highcharts-release/modules/exporting.js"></script>
So I looked into bower_components/highcharts-release/bower.json file and saw:
{
"name": "highcharts",
"version": "v4.1.4",
"main": [
"highcharts.js",
"highcharts-more.js",
"modules/exporting.js"
]
}
I changed it to:
{
"name": "highcharts",
"version": "v4.1.4",
"main": [
"highcharts.js",
"modules/heatmap.js"
]
}
and everything is fine now. Hope it will help someone, even this is a quite late answer.
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 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,
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
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}}\','
}
}
}
}
}