Bower — a package manager for the web.

“Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.”

Why Use Bower

Recently I have been working on some website development projects. I found that it was time consuming and error prone to manually manage third party packages like jQuery, Bootstrap, Moderniz, which generally means googling and downlaoding those packages. In the further, repeating process all over again might be needed for updating. I was pretty sure there is a way similar to how we manage Java dependency using Maven or Grandle. Therefore, I leart and used Bower to manage components of the front end. Bower is very handy to install the right versions of the packages you need and manage their dependencies.

To intall a package would like this: $ bower install jquery

To keep a package up to date would like this: $ bower update jquery

How simple it is! So let us go through some examples to learn how to handle third party packages matters using a few bower commands. By the way, Node’s NPM is an altertive you can choose to achieve the simplicity.

Install Bower

$ npm install -g bower 	// -g means globel   
$ bower --version 		// check if the installation is ok  
1.7.19  				// version number   

Getting Started

Create a Project.

$ mkdir bower-in-action
$ cd bower-in-action

Initialize the Project.

Bower keeps track of dependency using a file named “package.json” that contain information about a project and a list of packages it uses. create this file by intializae a project.

$ bower init   

You will be answering a list of questions and answers will form your “bower.json” file as following:

{    
  "name": "bb_boot",  
  "version": "0.0.1",  
  "authors": [  
    "james <james@qq.com>"  
  ],  
  "moduleType": [  
    "amd"  
  ],  
  "license": "MIT",  
  "ignore": [  
    "**/.*",  
    "node_modules",  
    "bower_components",  
    "js/lib",  
    "test",  
    "tests"  
  ],
  "dependencies": {  
  }
}

Install jQuery and Bootstrap packages

$ bower install jquery
$ bower install bootstrap

A directory named ower_components is created after the installation.The package files of jquery and bootstrap are downloaded and stored in this folder.

Search a package

Use this online Search Bower packages
or

$ bower search bootstrap  

Searching on the Bower’s page is more straightforward.

$ bower uninstall jquery

Install with Save

$ bower install jquery --save  

bower downloads the latest jquery to your js/lib folder –save write the configures to bower.json：

"dependencies": {  
  "jquery": "~2.1.4"  
}  

Pakage Info

if we would like to find the package version:

$ bower info jquery    

You can down grade the version by write version number into this bower.json like following:

"dependencies": {
   "jquery": "~1.11.3"
} and than  

$ bower update  

after that, jquery version has been changed to 1.11.3

Uninstall jQuery

$ bower uninstall jquery

{  
  "name": "jquery-in-action",  
  "version": "0.0.0",  
  "authors": [  
    "james <james@qq.com>"  
  ],  
  "description": "test bower using jquery & bootstrap",  
  "keywords": [  
    "jquery",  
    "bootstrap"  
  ],  
  "license": "MIT",  
  "dependencies": {  
    "bootstrap": "latest",  
    "font-awesome": "latest",  
    "animate.css": "latest",  
    "angular": "latest"      
  },
  "devDependencies": {
    "angular": "~1.3.8"
  }
}

To be aware there are to kinds of Dependencies. One is named “dependencies” and anther is named “devDependencies”. They are repereneting dependencies in Production Env and Development Env respectively. Those dependencies can be saved respectively like following:

  $ bower install jquery --save    // add to devDependencies  
  $ bower install angular --save-dev		//add to devDependencies  

Use Bower

In the following example we are add dependencies into a webpage managed by bower：

<!-- index.html -->  
<!doctype>  
<head>
  <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">  
  <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">  
  <link rel="stylesheet" href="libs/animate.css/animate.min.css">  

  <script src="libs/jquery/jquery.min.js"></script>  
  <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>  
  <script src="libs/angular/angular.min.js"></script>    
</head>    

.bowerrc file

.bowerrc is a JSON file for Bower configuration. It can be created after the root directory is created for the project. In this file we can spefiy bower packages installation directory, registry server info：

{  
  "directory": "bower_components",  
  "analytics": false,  
  "timeout": 120000,  
  "registry": {  
    "search": [  
      "http://localhost:8000",  
      "https://bower.herokuapp.com"  
    ]  
  }  
}  

To sum up, Bower makes it faster and easier for you to manage third party packages.

Go back

1 Default Console Output

When we use express framework and start a nodejs app, console will output some message like
“GET /xxx…/xxx 200 30ms”.

We can hard coding with console.log() function to output some message as below:

  console.log("This is an index page!");   

The output in the console are good enough in dev environment, but not for production. In production it is more likely that you want save those output into a file and debug with leveling. Express framework does not provide log functionality, so we introduce log4js package to accomplish that.

2 Install Log4js

$ npm install log4js  

3 Configuration in app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
     var log4js = require('log4js');
     log4js.configure({
       appenders: [
         { type: 'console' }, // console output
         {
           type: 'file', // file output
           filename: 'logs/access.log',
           maxLogSize: 1024,
           backups:3,
           category: 'normal'
         }
       ]
     });

     var logger = log4js.getLogger('normal');
     logger.setLevel('INFO');
     ...
     //app.use(...)
     //app.use(...)
     app.use(log4js.connectLogger(logger, {level:log4js.levels.INFO}));
    

In this example, we defined two types of output in “appenders”: one for the console, another for the file. There are more we can use to output logs : DateFile,

                                       SMTP, levelFilter and other appender.

“filename” specifies the path of the log file, when the file exceeds the maxLogSize, a new file will be generated.

In log4js.getLogger(‘normal’); ‘normal’ here is a category. You can get a logger instance by define different categories according the node package, therefore you know the source of a log.

To be aware, ”logs” folder has to be created manually.

9 levels of log:

{
  ALL: new Level(Number.MIN_VALUE, "ALL"),
  TRACE: new Level(5000, "TRACE"),
  DEBUG: new Level(10000, "DEBUG"),
  INFO: new Level(20000, "INFO"),
  WARN: new Level(30000, "WARN"),
  ERROR: new Level(40000, "ERROR"),
  FATAL: new Level(50000, "FATAL"),
  MARK: new Level(9007199254740992, "MARK"), // 2^53
  OFF: new Level(Number.MAX_VALUE, "OFF")
} All and OFF are not used in applications, others are functions we can invoke.

In production, we probebly care only about info and error and fatal level message. When the output level is set to INFO, trace and debug message will not be output, therefore reduces the amount of size for records.

4 Configure for projects

In previous section, we go through integration log4js with express. Normally we want to configure our log according to our project specific requirements other than use the default configuration.

1. Replace console.log()

add replaceConsole, let all messages go into a log file.

vi app.js
var log4js = require('log4js');
log4js.configure({
  appenders: [
    { type: 'console' },{
      type: 'file',
      filename: 'logs/access.log',
      maxLogSize: 1024,
      backups:4,
      category: 'normal'
    }
  ],
  replaceConsole: true  //this sends console output into the log output file
});

2. Format

 app.use(log4js.connectLogger(logger, {level: level:log4js.levels.INFO, format:':method :url'}));    This makes the output short and concise.

3. Set level to auto

Log level rules：

http responses 3xx, level = WARN http responses 4xx & 5xx, level = ERROR else, level = INFO

set level to auto
app.use(log4js.connectLogger(logger, {level: ‘auto’, format:’:method :url’}));

4. Define a logger.js as an API

In previous example, all configuration is in the app.js, which makes it unavailable for routes. Now let us export them out and make it a separated file to for other js file.

Code of logger.js

  var log4js = require("log4js");
  log4js.configure({
      appenders:[
          {
              type:"console"// for console output
          },
          {
              type:"file",// for file output
              filename:'logs/access.log',
              maxLogSize:1024,  
              backups:3,
              category:'normal'
          }
      ],
      replaceConsole:true    
  });
  exports.logger = function(category,level){
      var logger = log4js.getLogger(category);
      logger.setLevel(level);
      return logger;
  }

  exports.connectLogger = function(logger,options){
      return log4js.connectLogger(logger,options);
  }

Use logger.js in index.js

var express = require('express');
var router = express.Router();

var log4js = require('../logger')
var logger = log4js.logger('normal','INFO');

/* GET home page. */
router.get('/', function(req, res, next) {
  console.log("This is an index page!");
  logger.info("This is an index page! -- log4js");
  logger.trace("Entering cheese testing");
  logger.debug("Got cheese.");
  logger.warn("Cheese is quite smelly.");
  logger.error("Cheese is too ripe!");
  logger.fatal("Cheese was breeding ground for listeria.");

  res.render('index', { title: 'Express' });
});
module.exports = router;

So far we are all set for logging in a production environment.

Go back

其实Jekyll本身的结构并不复杂， 如下：

• _config.yml
• _includes
• _layouts
• —–default.html
• —–post.html
• _posts
• —–2007-10-29-why-every-programmer-should-play-nethack.textile
• —–2009-04-26-barcamp-boston-4-roundup.textile
• _site
• —–index.html

简单介绍一下他们的作用：

_config.yml

配置文件，参考这里进行设置，设置之后就不用关心了。

_includes

存放一些小的可复用的模块，比如header footer 每个页面都会引入的，方便通过{ % include file.ext % }（去掉前两个{中或者{与%中的空格，下同）灵活的调用。这条命令会调用_includes/file.ext文件。

_layouts

这是模板文件存放的位置。模板通过YAML front matter来定义， 设置的话参考这里。

_posts

看名字就知道是你的博客正文存放的文件夹。命名规定，必须是YYYY-MM-DD-artical-title.MARKUP这样的形式，MARKUP是你所使用标记语言的文件后缀名，一般直接就是md, 也可以根据_config.yml中设定的链接规则灵活调整。 文章的日期和标记语言后缀与文章的标题的独立的。

_site

这个是Jekyll生成的最终的文档，不用去关心。有高人建议放到.gitignore文件中忽略它。

Go back