I have created an AngularJS application using Yeoman. It also uses the cdnify task that shoud transform bower_components/angular/angular.js into //ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js. The generated index.html contains the following code:
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
There is also a task that combines, minifies and uglifies all the scripts, so these scripts are combined into a single vendor.js file. To avoid jquery.js and angular.js to be included in this process, I changed it into:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
When I run grunt serve:dist the cdnify task is ran and generates the following output:
Running "cdnify:dist" (cdnify) task
Going through dist/404.html, dist/index.html to update script refs
My bower.json looks like this:
{
"name": "myAmazingAngularApp",
"version": "0.0.0",
"dependencies": {
"jquery": "~1.11.0",
"angular": "1.2.x",
"bootstrap": "~3.1.1",
"angular-bootstrap": "~0.10.0"
}
}
Does anyone know what I am doing wrong? I would think it should work out-of-the-box, so I suspect it's a bug...
There is also a .bowerrc file that has the following content:
{
"directory": "app/bower_components"
}
I tried changing this setting to "directory: bower_components" when running grunt cdnify, but it doesn't help.
Related
I have implemented below Grunt configuration for concating two css files into a single css file(common_tfn_bsa.min.css ) in my jsp file.
<!-- build:css ./assets/css/common_tfn_bsa.min.css -->
<link href="./${theme}/css/style.css" rel="stylesheet">
<link href="./${theme}/css/component.css" rel="stylesheet">
<!-- endbuild -->
But while running Grunt task above code is generated as :
concat:
{ generated:
{ files:
[ { dest: '.tmp\\concat\\assets\\css\\common_bom.min.css',
src:
[ '.\\app\\${theme}\\css\\style.css',
'.\\app\\${theme}\\css\\component.css' ] }
]
}
}
What I need is ,the value of ${theme} in generated file so that it can pick the css files from correct location for concat.
Try this:
<!-- build:css(./<%= theme %>) ./assets/css/common_tfn_bsa.min.css -->
<link href="/css/style.css" rel="stylesheet">
<link href="/css/component.css" rel="stylesheet">
<!-- endbuild -->
I have the need to just concat certain 'vendor' JS files. My users won't always have access to the internet and I need to concat already minified JS files.
I have this index.html:
<!-- build:js vendor.min.js -->
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore.min.js"></script>
...
<!-- endbuild -->
<!-- build:js app.min.js -->
<script type="text/javascript" src="app/app.js"></script>
...
<!-- endbuild -->
I just want to concat the first group of files. Reason being is that some are already minified and some are not. The vendor files that are not minified cannot be minified.
Is there a way to run usemin to just concat the first group into a vendor.js file and concat and uglify the second group into an app.min.js file?
You should use flow option to define your custom workflow.
For example, if you need to only concat a group of files, add this to the useminPrepare:
useminPrepare: {
html: 'index.html',
options: {
flow: {
html: {
steps: {
onlyconcat: ['concat']
},
post: {}
}
}
}
}
In your index.html, change this:
<!-- build:onlyconcat vendor.min.js -->
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore.min.js"></script>
...
<!-- endbuild -->
yo angular install bootstrap files all fine. The index.html file looks like this at the moment:
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
This doesn't include bootstrap.theme.css file.
What is the recommended way of adding this? Do I manually go in there and add it?
The correct way to do it is override you bower.json file to load bootstrap dependencies, and then run grunt wiredep
The bower.json would look like this:
{
"name": "frontend",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"json3": "^3.3.0",
"es5-shim": "^4.0.0",
"bootstrap": "^3.2.0",
"angular-cookies": "^1.3.0",
"angular-route": "^1.3.0",
"angular-local-storage": "~0.1.5",
"raty": "~2.7.0",
"kineticjs": "~5.1.0"
},
"devDependencies": {
"angular-mocks": "~1.3.0",
"angular-scenario": "~1.3.0"
},
"appPath": "app",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/css/bootstrap-theme.css",
"dist/js/bootstrap.js",
"dist/fonts/glyphicons-halflings-regular.eot",
"dist/fonts/glyphicons-halflings-regular.svg",
"dist/fonts/glyphicons-halflings-regular.ttf",
"dist/fonts/glyphicons-halflings-regular.woff"
]
}
}
}
Source: https://github.com/yeoman/generator-angular/issues/965#issuecomment-68548259
Do the following
bower install bootstrap-css --save
Add it manually below the other .css include if it's locally available on your system (e.g. in bower_components/).
If the file is not locally available I'd add it right above the <!-- Place favicon.ico ... --> otherwise it might break your grunt build and/or grunt serve because of bower trying to minify the file.
The same goes with Google Font imports, place them above the <!-- Place favicon.ico ... --> otherwise bower will try to minify it (under htmlmin options in Gruntfile.js).
Here you can read some more about the subject.
so i'm using bower for my packages and grunt serve is as far as i've gone with grunt, what i want to know is, just to save me the time.
how do i get grunt/bower to include what i need either from the command line (would be best for workflow) or using the .json file in the initial index.html file?
so in this case i've ran,
yo webapp(or mobile)
bower install topcoat --save
bower install jplayer --save
bower update
grunt serve
heres my json file
{
"name": "imtoolbox",
"version": "0.0.0",
"dependencies": {
"topcoat": "~0.8.0",
"requirejs": "~2.1.4",
"modernizr": "~2.6.2",
"jquery": "~1.9.1",
"jplayer": "~2.5.5"
},
"devDependencies": {}
}
my head
<link rel="stylesheet" href="styles/main.css">
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
<!-- build:css styles/vendor/topcoat/css/topcoat-mobile-light.min.css -->
<link rel="stylesheet" href="styles/vendor/topcoat/css/topcoat-mobile-light.min.css">
<!-- endbuild -->
my scripts
<!-- build:js scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->
<!-- build:js scripts/async-local-storage.js -->
<script src="scripts/async.localStorage.js"></script>
<script src="scripts/async.localStorage.examples.js"></script>
<!-- endbuild -->
<!-- build:js scripts/fullscreensnippet.js -->
<script src="scripts/fullscreensnippet.js"></script>
<!-- endbuild -->
<!-- build:js scripts/fastclick.js -->
<script src="scripts/fastclick.js"></script>
<script src="scripts/fastclick.example.js"></script>
<!-- endbuild -->
any help on this would be great it seams theres a lot of different answers online and having something that works would be sweet!
I think you're missing bower's wiring
<!-- build:js scripts/myscripts.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
I am using grunt-usemin to build an app project
css are linked with absolute paths:
<!-- build:css(.) /app/css/libs.css -->
<link rel="stylesheet" href="/app-dev/lib/css/style.css"/>
<link rel="stylesheet" href="/app-dev/lib/css/another.css">
<!-- endbuild -->
javascript files are linked with relative paths:
<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<!-- endbuild -->
the grunt config:
useminPrepare: {
html: 'app-dev/index.html',
options: {
dest: 'app'
}
},
usemin: {
html: ['app/{,*/}*.html'],
css: ['app/css/{,*/}*.css'],
options: {
assetsDirs: ['app']
}
}
The problem is there is one spare subfolder level in the css output:
app
- app
- - css
- - - libs.css
- js
- - app.js
- etc
while the reference in the outputed html file is correct
<link rel="stylesheet" href="/app/css/libs.css">
How to output the css to the correct folder hierarchy?
Try removing the / in front of your build path
<!-- build:css app/css/libs.css -->
<link rel="stylesheet" href="/app-dev/lib/css/style.css"/>
<link rel="stylesheet" href="/app-dev/lib/css/another.css">
<!-- endbuild -->
The HTML file should be under "app" folder as well, so you can remove "/app-dev".