This is a reminder of how to get up and running with Bower.js. It is intended for people have used it before but just need a quick refresher.

Installing Bower
Step 1: Download node.js (you may likely have it installed already)

Step 2: Install it (globally preferred, locally if you must)
npm install bower -g

Step 3: Create bower.json file using bower itself:
bower init

Step 4 (Optional): Change where bower is stored from bower_component to anything you want. For example, to use js/lib:

1st: creat file called: “.bowerrc”
2nd: The file above should have content like:


{
"directory": "js/lib"
}

The only thing you change is “js/lib” if that is not where you want to store your packages

Maintaining packages
Updating a package and update the bower config file(e.g. lodash)
bower install lodash --save

Uninstall a package
bower uninstall lodash

To get specific version
bower install lodash#2.2.1

check for available versions
bower info lodash

update all packages
bower update


Here is a quick reminder on how to use LESS, one of the many CSS precompliers:

Variables: As they are in porgramming languages

@greenColor: #00FF00;
@font-family: Georgia

.makeItGreen {

background-color: @greenColor;
font-family: @font-family;
}

Mixin: For style sheet/rules reuse

@greenColor: #00FF00;
@font-family: Georgia

.makeItGreen {
background-color: @greenColor;
font-family: @font-family;
}
.greatGreenStyle {
.makeItGreen; // here is the reuse
}

Reusing rules from a different file

@import “element.less”

.makeItRound{
.round(1px);
}

Note: This has to be in the same location as the less file in question

Nesting

nav {
width: 200px;
height: 100px;
li {                                                      /* nested */
width: 100px;
background-color: green;
a {                                              /* second nested-level: nav li a */
color: lime;
}
}
}

Nesting with pseudo class

a {
font-family: Georgia;
&.hover {
color: green;
}
}

Note: & refers to the current rule
Arithmetic

@height: 200px

div {
height: @height * 2;
}

Note: Similar principle applies to other arithmetic operations


The CSS3 pseudo class “empty” considers a space and new line to be a characters. Here is a jsfiddle illustration:

http://jsfiddle.net/zoldello/u3kxegx4/


Quickly Getting up with Grunt.js (may not be very helpful for newbies)
This post will quickly show you how to get up and going with Grunt.js from a command prompt. It uses the JSHINT contrib as an example. The tutorial goes quickly, so it may not be the best way to learn if you are completely new to Grunt.js . A PluralSight video may be more helpful. For others, it can serve a reference just in case you forgot how to set it up and do not need a 101-tutorial.

It does NOT show you how to use it in Visual Studio. A post on that is forthcoming.

Why use Grunt.js?
Grunt.js is used to automate the running of task running; on node.js. Examples of task could be- Validate HTML, run JSHINT on JavaScript, compile LESS to CSS, compile TypeScript to JavaScript and many others task. It takes away the gruntwork of cutting and pasting a JavaScript file in jshint.com, linting in it, and then cutting and pasting it back into your solution.

How do I Get Started
Step 1: Go to node.js and install node.js. Note, it may already be installed for you if you are using Linux

Step 2: Open up a command prompt

Step 3: Install Grunt CLI globally via this command:
npm install -g grunt-cli

Step 4: In the folder where you want to run grunt, create a file name package.json and have this configuration (customize it to your needs)

{
"name": "AnAwesomeProject",
"description": "Some Awesome Project",
"version": "0.1.0-alpha",
"license": "MIT",
"author": "Kermit the Frog",
"contributors": [
{
"name": "Kermit the Frog",
"email": "fakeEmail@fakeEmail.com"
},
{
"name": "Michael Jackson",
"email": "ms@mjj5550.mjj"
}
],
"devDependencies": {
}
}

Step 5: Create a file called gruntfile.js and have this in it (customize to your liking):

'use strict';

module.exports = function(grunt) {
grunt.initConfig({
pkg: grun.file.readJSON(‘package.json’)
});

grunt.loadNpmTaks(”);
}

Step 6: install grunt itself locally with this command:
npm install grunt --save-dev

Step 7: At this point, you are ready to have task to run. Let’s start with a simple one. Run this command (note, -save-dev will update the package.json file for you):
npm install grunt-contrib-jshint --save-dev

Step 8: Update the gruntfile.js to be something like this:
'use strict';

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
jshint: {
options: {
},
files: [‘./Scripts/ *.js’]
}

});

grunt.loadNpmTasks(‘grunt-contrib-jshint’);

grunt.registerTask(‘default’, [‘jshint’]);
}

Step 9: Open the command prompt and this:
grunt

Step 10: Observe the message in the commmand prompt

Additional options for the package.json file can be found here: http://browsenpm.org/package.json
Additional node packages can be found at: http://gruntjs.com/plugins

A tutorial can be found at: http://gruntjs.com/ and PluralSight has a video on the topic.


I have neglected this blog for a long time and its due time it gets attention.

Follow

Get every new post delivered to your Inbox.

Join 40 other followers