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 -->
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 -->
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.
On my Site.master file, I have the following in my <head>:
<!-- jQuery library (served from Google) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- easing Javascript file -->
<script type="text/javascript" src="http://bxslider.com/lib/plugins/jquery.easing.1.3.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="lib/jquery.bxslider.css" rel="stylesheet" />
<script>
jQuery(document).ready(function ( $ ) {
$('.slider').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
auto: true,
autoStart: true,
autoDirection: 'next',
autoHover: true,
pause: 3000,
autoControls: false,
pager: true,
pagerType: 'full',
controls: true,
captions: true,
speed: 500
});
});
</script>
What happens is, the little bullets that represent each slide as well as the "prev" and "next" arrows are not using the images they are supposed to. If I change the CSS reference to "http://bxslider.com/lib/jquery.bxslider.css" instead of my own copy, it works FINE. I have all the images and folders in the correctly reference locations.
The issue here is, I want to change some of the CSS, but I can't if I use the external file.
Apparently it needs to be pointed like this:
<!-- jQuery library (served from Google) -->
<script type="text/javascript" src=".//Scripts/jquery-1.10.2.min.js"></script>
<!-- easing Javascript file -->
<script type="text/javascript" src=".//plugins/jquery.easing.1.3.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src=".//js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href=".//lib/jquery.bxslider.css" rel="stylesheet" />
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".