Twitter Bootstrap 3.0.1 changes the "main" attribute of their bower.json to look like this:
"main": ["./dist/js/bootstrap.js", "./dist/css/bootstrap.css", "./dist/fonts/*"],
They added the "./dist/fonts/*" item in 3.0.1 - it was not there in 3.0.0.
Now, when I run bower:install from my Gruntfile, I get this error:
Running "bower:install" (bower) task
bower cached https://github.com/twbs/bootstrap.git#3.0.1
bower validate 3.0.1 against https://github.com/twbs/bootstrap.git#>= 3.0.0
bower cached https://github.com/components/jquery.git#2.0.3
bower validate 2.0.3 against https://github.com/components/jquery.git#>= 2.0.0
bower cached https://github.com/components/jquery.git#2.0.3
bower validate 2.0.3 against https://github.com/components/jquery.git#>= 1.9.0
bower install jquery#2.0.3
bower install bootstrap#3.0.1
>> Installed bower packages
grunt-bower copying bower_components/bootstrap/dist/js/bootstrap.js -> public/bootstrap/bootstrap.js
grunt-bower copying bower_components/bootstrap/dist/css/bootstrap.css -> public/bootstrap/bootstrap.css
/Users/hoytk/git/titanium_ui/node_modules/grunt-bower-task/node_modules/bower/node_modules/tmp/lib/tmp.js:261
throw err;
^
Error: ENOENT, no such file or directory 'bower_components/bootstrap/dist/fonts/*'
It seems grunt-bower-task can't handle ./dist/fonts/*, but I assume there's something simple I'm missing. Here is my Gruntfile.js:
module.exports = function(grunt) {
// Project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
bower: {
install: {
options: {
targetDir: './public',
verbose: true
}
}
}
});
// Load bower task plugin
grunt.loadNpmTasks('grunt-bower-task');
// The default task - install the bower dependencies
grunt.registerTask('default', ['bower:install']);
}
Bower does not support * in their main file definition (which is how this task knows which files to copy over, etc).
I believe they are aware at it over at Bootstrap, but it will still a glob in 3.0.2. They were also trying to get Bower (or maybe it's the fault of the specific task?) to support globs.
Until then, there is no good solution. Either update Bootstrap's bower.json (to list each font explicitly) (note that bower.json will probably get overwritten next time there's an update) or copy the files manually :-(
(Note that you may have to change .bower.json in Bootstrap if you go that path (a hidden file))
Related
Most packages nowadays are available in both NPM and Bower. I have to have NPM around, but I'd like cut Bower out of the loop on my project.
I'm currently relying on grunt-wiredep to create <script> includes in my index.html. This tool looks at all of the Bower configs to pull all the necessary js and css files into my index.html for me.
Is there a tool that will do the same for NPM dependencies?
You would be able to do that using a module bundler like Browserify or Webpack.
For getting started with Browserify , you will need to first install it via NPM globally
npm install -g browserify
Then in your project , get the frontend library you want to include , like for example the angular library
npm install --save angular
Now you will need to use require() to make Browserify aware of the dependencies that it needs to fetch for the project to work (In case of Angular app, where you define the main module , add this first line)
var angular = require('angular');
angular
.module('autocompleteDemo', [])
.controller('DemoCtrl', DemoCtrl);
For setting up the grunt-browserify task , first install it in the project
npm install grunt-browserify --save-dev
and configure the task as follows
browserify: {
main: {
src: 'entry.js',
dest: 'bundle.js'
}
}
Lastly in your index.html , you will need to add markup for the bundle.js script
<script src="bundle.js"></script>
Example code can be found at https://github.com/pra85/grunt-browserify-example
I've tried to configure uncss using grunt
I've installed
npm install grunt-uncss --save-dev
npm install grunt-processhtml --save-dev
Configuration
uncss: {
dist: {
files: { 'dist/css/clean.css': ['index.php'] }
}
}
at the end I load them in and register a default task like this :
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-processhtml');
grunt.registerTask('default', ['uncss', 'processhtml']);
Result
When I run grunt
at the end I keep seeing :
Running "uncss:dist" (uncss) task
Fatal error: PhantomJS: Cannot open about:blank
Update
I added :
processhtml: {
dist: {
files: {
'index.php': ['index.php']
}
}
}
Still get the same error after running grunt
If this is all of your code, you are not referencing any stylesheets to remove code from. All you are doing is telling grunt where the cleaner file should go, and to remove any unused css from index.php. However, it doesn't know where the styles for index.php live, so it has nothing to do... You need to actually configure your processhtml and tell uncss which stylesheets you would like to clean up.
Read the directions friend:
grunt-uncss github readme.md
I have that problem with my project and the solution is here:
You need update the uncss module, remember grunt-uncss is only a way to use uncss node package. In my case my version of that was in 0.12.1 and updating that package the problem was fixed. Let me know if this help you.
I'm using Bower, and already installed Font Awesome with it, but now I'm wondering if I can install a custom font (to be more specific: Raleway and Montserrat) using Bower. Can I do that?
I did some research but I didn't find any solution! If it is possible, please tell me how.
The best solution I found with Bower was the Google Fonts Bower Proxy (source on Github). You will have to first get the query string by going to Google fonts.
<link href='http://fonts.googleapis.com/css**?family=fontname:size**' rel='stylesheet' type='text/css'>
Then using Bower:
bower install --save https://google-fonts.azurewebsites.net/googleFonts/yourPackageName?family=fontname:size
Depending on the requirement, it may be actually easier to simply import the font to your CSS or SASS instead of going for the bower based solution.
There is also a google fonts bower package which includes all fonts.
Raleway is included in the bower package TypoPRO.
Install it with
bower install --save typopro
As you are new to bower, here some further tips:
As the bower_components directory is usually excluded from version control, you can copy the files you need to another directory with a grunt task.
Add a exportsOverride section to bower.json:
{
(…)
"dependencies": {
"typopro": …
},
"exportsOverride": {
"typopro": {
"fonts": "web/TypoPRO-Raleway/*"
}
}
(…)
}
Install grunt
$ npm install -g grunt-cli
$ npm install --save-dev grunt
$ npm install --save-dev grunt-bower-task
and create Gruntfile.js:
module.exports = function(grunt) {
var path = require('path');
grunt.initConfig({
bower: {
install: {
options: {
targetDir: 'vendor',
cleanTargetDir: true,
layout: function(type, component, source) {
return type;
}
}
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-bower-task');
// Default task.
grunt.registerTask('default', ['bower:install']);
};
The grunt task bower:install will run bower install and copy all files from web/TypoPRO-Raleway to vendor/fonts (vendor from targetDir in Gruntfile.js and fonts from exportsOverride in bower.json). You can execute the task with
$ grunt bower:install
As bower:install is registered as a default task, you can also use the short cut:
$ grunt
What you could do, instead of managing it with bower, is add in google code directly into your CSS or SCSS #import url(http://fonts.googleapis.com/css?family=Raleway) or manually add the font by first downloading the font then adding the relative path into your css.
You can download raleway here http://www.google.com/fonts#UsePlace:use/Collection:Raleway, clicking on the down arrow on the top right of the page, unzipping and add the fonts to your site.
Another solution would be to use grunt instead of bower to manage your fonts. I found two grunt plugins which download fonts from Google for you.
grunt-local-googlefont and grunt-goog-webfont-dl. You can install them via npm.
There are lots of different plugins to download fonts from other sources. Just search for font at grunt's plugin search.
I'm using grunt + bower + grunt-bower-task plugin to manage javascript library dependencies.
Say I have installed jquery with bower:
bower install jquery --save
and with grunt-bower-task:
bower: {
install: {
options: {
targetDir: './public/lib',
layout: 'byComponent',
install: true,
verbose: true,
cleanTargetDir: true,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
After running grunt bower, jquery will be copied to:
/public/lib/jquery/jquery.js
So the client will fetch jquery with url:
http://somedomain.com/public/lib/jquery/jquery.js
But I have question, what if I changed the jquery version?
Say I used another query version with bower, but it will still be copied to the same location and user will fetch it with the same url. If I have add cache-headers for it, user won't fetch new jquery.js code from server before expired.
How to fix this problem?
I think if we can add the version to the file name when running grunt bower, that will fix it, e.g.
http://somedomain.com/public/lib/jquery/jquery-1.8.js
But I can't find such functions in grunt-bower-task.
I would handle library versioning in the bower.json file. Yours should have the versions to be installed whenever you call the bower install command.. something like this
"dependencies": {
"angular": "~1.2.21",
"jquery": ">=2.1.1"
},
"resolutions": {
"jquery": ">=2.1.1"
}
But now they're all jquery.js regardless of the version. So now what you'd want to do is add some type of cache busting strategy which will force the browser to download the newest version of your scripts. There's tons of resource on cache busting javascript online, so I won't reiterate those here, but there are grunt tasks that can help you like this one
One slightly off topic suggestion I would make is to concat and minify your externals scripts into one js file and maybe another for your application scripts. As one or more of your external library change, the cache busting technique will force the browser to grab the latest version of your dependent scripts.
I used the following as pre-build event in Visual Studio 2013 to compile Bootstrap 3.0 with recess according to this answer and it worked
recess "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"
Now this doesn't work for Bootstrap 3.1.1 and they say Grunt will do it. I've tried:
grunt-contrib-less "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"
But can't get it to work. Any ideas how to get Grunt to work with VS 2013.
Note: I've Installed Node.js and recess earlier, then > npm install grunt-contrib-less then to be sure >npm update grunt-contrib-less.
I've got this working in a slightly different way:
Ensure you've got grunt-cli installed globally (npm install -g grunt-cli)
Create a Gruntfile.js in your project or solution, and define a target to do whatever less compiling you want (e.g. less)
Add call grunt less to your pre-build event (if you don't specify CALL, then the process doesn't return after grunt)
You can add different targets to the development and production build processes if you like. You can also set up more targets for other tasks - I have one so I can run grunt watch to automatically recompile my CSS if I edit less files.
Step-by-step guide to converting the VS2013 sample project to use less and Grunt:
Remove bootstrap and install bootstrap less:
Uninstall-Package bootstrap
Install-Package Twitter.Bootstrap.less
Open a command prompt and cd to your project directory
Ensure grunt-cli is installed globally:
npm install -g grunt-cli
Create a package.json file:
npm init
Install grunt and grunt-contrib-less locally:
npm install grunt grunt-contrib-less`
Create a file in your project called Gruntfile.js with the following contents:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
dev: {
options: {
sourceMap: true,
dumpLineNumbers: 'comments',
relativeUrls: true
},
files: {
'Content/bootstrap.debug.css': 'Content/bootstrap/bootstrap.less',
}
},
production: {
options: {
cleancss: true,
compress: true,
relativeUrls: true
},
files: {
'Content/bootstrap.css': 'Content/bootstrap/bootstrap.less',
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-less');
// Default task(s).
grunt.registerTask('default', ['less']);
grunt.registerTask('production', ['less:production']);
grunt.registerTask('dev', ['less:dev']);
};
Edit your Visual Studio pre-build event to include:
cd $(ProjectDir)
call grunt --no-color
(--no-color removes some of the control characters from the Visual Studio build output)
Build your project, then enable show all files, and incldue the two compiled css files in your project (so that web deploy picks them up).