NO END FOR LEARNING

Writing blog if you feel tired | 学海无涯 苦写博客

用Bower做JavaScript类库依赖管理

| Comments

使用Grunt做JavaScript的构建,npm为它解决了最大的问题,插件(提供各种各样的任务)。但是如果你是做前端的Web应用,那么就还需要很多东西,比如,MVX框架,JavaScript工具类库等,这些东西,我们在构建中称为依赖。而这时,我们就要借助另一个工具,Bower

Bower做的事情:

“Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for.” — Bower

而且,Bower针对前端应用做了优化。它拥有扁平的依赖关系树,对于每个包之请求一个版本,将页面加载的内容减到最低。

如何使用

安装

Bower处在NodeJs的生态圈里,它是Node的一个模块(包)。所以安装方法和普通node包安装方法一样。

1
npm install -g bower

其实,我也在纠结是安装在全局还是本地,网上众说风云。

命令工具

bower下载下来之后,你会发现它和grunt cli很像,除了模块部分,还有命令文件,因为它还是一个命令行工具。

使用bower install安装需要的依赖:

1
2
3
4
5
6
7
8
9
10
11
# registered package
$ bower install jquery

# GitHub shorthand
$ bower install desandro/masonry

# Git endpoint
$ bower install git://github.com/user/package.git

# URL
$ bower install http://example.com/script.js

bower.json

就和node一样,node有一个package.json来存储模块相关的信息,包括依赖。

bower也有自己的一个json文件,bower.json,通过命令bower init,可以在bower的提示下,完成对bower.json的填写。当运行bower init命令后,bower会询问你下面这些问题,来帮助你完成bower.json文件的初始化:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
? name: (hello_grunt)
? version: (0.0.0)
? description: hello
? main file:
? what types of modules does this package expose?: (Press <space> to select)
❯◯ amd
  es6
  globals
  node
  yui
? keywords: hello
? authors: (benweizhu <xxxx@gmail.com>)
? license: (MIT)
? homepage:
? set currently installed components as dependencies?: (Y/n)
? add commonly ignored files to ignore list?:
? would you like to mark this package as private which prevents it from being accidentally
published to the registry?: (y/N) Y

{
  name: 'hello_grunt',
  version: '0.0.0',
  authors: [
    'benweizhu <xxxx@gmail.com>'
  ],
  description: 'hello',
  moduleType: [
    'node'
  ],
  keywords: [
    'hello'
  ],
  license: 'MIT',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ],
  dependencies: {
    angularjs: '~1.3.8'
  }
}

? Looks good?: (Y/n)

bower.json中要填写的信息包括:

1.name (required): The name of your package; please see Register section for how to name your package.
2.version: A semantic version number (see semver).
3.main string or array: The primary acting files necessary to use your package.
4.ignore array: An array of paths not needed in production that you want Bower to ignore when installing your package.
5.keywords array of string: (recommended) helps make your package easier to discover.
6.dependencies hash: Packages your package depends upon in production. Note that you can specify ranges of versions for your dependencies.
7.devDependencies hash: Development dependencies.
8.private boolean: Set to true if you want to keep the package private and do not want to register the package in the future.

安装并存储到bower.json

就和Grunt一样,bower也允许你将依赖下载下来,并存储到bower.json文件中

1
bower install angularjs --save

bower中的有用命令

1
2
3
4
5
6
bower list        --列出本地的包和可能的更新
bower cache clean --清除bower的依赖缓存
bower cache list  --列出bower的依赖缓存
bower update      --根据bower.json的内容将安装的包升级到最新版本
bower install     --安装bower.json中定义的依赖包
bower uninstall   --卸载已安装的依赖包

更多内容,请查看:http://bower.io/docs/api/

将bower和grunt集成

目前,github上面有很多grunt的插件可以将bower集成到grunt中。你可以去 https://www.npmjs.com/ 上搜索bower和grunt的关键字。

我这里使用的是:grunt-bower-task

安装很简单:npm install grunt-bower-task –save-dev

1
2
3
4
5
6
7
8
9
10
11
12
{
    "name": "relations-front-end",
    "version": "0.0.1",
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-bower-task": "^0.4.0",
        "grunt-contrib-jshint": "~0.4.0"
    },
    "scripts": {
        "test": "grunt"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = function (grunt) {

    grunt.initConfig({
        jshint: {
            files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js', '!src/js/libs/**/*.js']
        },
        bower: {
            install: {
                options: {
                    targetDir: './src/js/libs'
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-bower-task');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    grunt.registerTask('default', ['bower:install', 'jshint']);

};

targetDir: ‘./src/js/libs’的作用是告诉task将bower下载的目标文件拷贝一份到哪个路径下

请参考:http://bower.io/docs/tools/

用Grunt做JavaScript的构建

| Comments

就像Grunt官方网站上说的“为何要用构建工具?”

”一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。”

在Java世界里面,自动化工具或者说构建工具,我们见得的不少,并且已经很成熟,比如,Ant,Maven,Gradle。而在JavaScript的世界,我们同样需要一个工具,来帮助我们做一些重复并且需要频繁做的事情,比如,压缩(minification)、编译、单元测试、linting。

对于Web开发来说,在Single Page的Web应用开始流行之前,我们使用Ant,Maven,Gradle,同样也可以做压缩(minification)、编译、单元测试、linting,因为官方和社区提供了各种各样的插件。

但如果你只是在开发JavaScript的类库,或者静态站点,又或者现在流行的Single Page的Web应用,那么一个纯粹的针对JavaScript而开发的构建工具就拥有了它的存在价值。

所以,才有了Grunt作为JavaScript世界的构建工具出现在我们的视野中。

Node

Grunt的第一版发布在2012年的3月,作者将它形容为“针对JavaScript项目的基于任务的命令行构建工具”

Grunt和Grunt插件是通过npm安装和管理的。那npm是什么?node的包管理器(a package manager for node)。那Node又是什么?

引入node.js官方的介绍:

“Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”

没错,它不是一个JavaScript的类库或者应用,node.js是一个基于Google Chrome V8 JavaScript引擎的JavaScript运行平台(环境)。

看到这里,我们大概可以明白,要开始使用Grunt,首先要安装node.js,然后明白如何使用npm,但是要学会使用Grunt,你并不需要了解node.js的全部知识。

所以,首先要来安装node.js,移步到官方网站 http://nodejs.org/ ,下载node.js,当前官网的最新版本是v0.10.35。安装完成之后,可以用node -v命令验证你是否安装成功。

node.js本身就自带npm,所以你不需要单独安装npm,运行命令npm -v就可以查看npm的版本。

Node的模块系统

在正式开始了解npm之前,我们需要了解一个关于node.js的技术知识:模块系统

node.js的模块系统是CommonJS标准的实现,它描述了一种简单的语法让JavaScript请求(导入)其他JavaScript程序进入到当前请求模块的上下文中。

而在node.js中,每一个JavaScript文件都可以被看做是独立的模块

理解几个关键概念(对象或者函数),就可以很快理解CommonJS如何被使用。

module – 一个代表模块自身的对象。该模块对象包含一个关键的exports对象。就node.js,它还包括一些元信息,比如id,parent,children。

exports – 一个纯粹的JavaScript对象,它可以被扩展来向其他模块暴露方法。该exports对象,将会作为require函数被调用后的返回结果。

require ­– 用来引入模块的函数,返回相关的exports对象。

math.js

1
2
3
4
5
6
7
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

increment.js

1
2
3
4
var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

当require(‘math’)执行,它会返回math.js模块对应的exports对象,于是就可以调用add方法。

program.js

1
2
3
4
5
var inc = require('increment').increment;
var a = 1;
inc(a); // 2

module.id == "program";

上面同理

更多关于CommonJS的内容,请移步 http://javascript.ruanyifeng.com/nodejs/commonjs.html

NPM

基本了解过Module系统的概念之后,我们再回过头来看npm。

对于npm而言,它并不是为构建而存在,它是node的包管理工具,只是它的存在恰恰是一个成功构建工具必须要解决的一个问题, 提供真正价值的插件。npm可以将node.js的包发布到npm的仓库里,同样的,仓库里的一个包,也可以被任何知道它名字的应用安装和使用。

NPM中包和模块的关系

接下来的问题是,怎么样才算是一个包呢,它可以被上传和下载?

“What is a package?

A package is:

a) a folder containing a program described by a package.json file

b) a gzipped tarball containing (a)

c) a url that resolves to (b)”

根据上面的解释,一个包存在三种表现形式。

我们再来看一下,node.js中一个模块是怎么定义的?怎么样它就是一个模块?

“What is a module?

A module is anything that can be loaded with require() in a Node.js program. The following things are all examples of things that can be loaded as modules:

a) A folder with a package.json file containing a main field.

b) A folder with an index.js file in it.

c) A JavaScript file.”

如果你仔细观察,两个解释中的定义a是非常相似的。一个包可以是一个含有package.json文件的文件夹,一个模块可以是一个含有package.json文件或者index.js文件的文件夹。所以,为了让别人在它的程序中使用你的包,它必须使用require函数来导入,顾名思义,你的包也必须是一个模块。

npm install

那么如何用npm来下载一个模块或者包呢?

npm intall命令,它的目的只有一个就是从npm仓库下载模块。

安装一个node模块时,有两种安装方式,一种是全局方式(global),一种是本地方式(local)。如果被下载模块是在另一个模块或者应用中使用,就应该下载到本地,如果这个模块是命令行工具(例如,grunt cli,这个之后会介绍),那么就可以放在全局。

全局方式,就跟全局函数一样,意味着这个模块在安装之后,在任何位置都可以使用它。

比如:

1
npm install -g grunt-cli

如果是mac系统,被下载的模块会放在usr/local/lib/node_modules 如果是Windows系统,则在C:\Users\AppData\Roaming\npm

你可以通过命令,修改存储的位置,毕竟你不会太希望缓存库放在用户文件夹下:

1
2
3
npm config set prefix C:\Dev\Software\npm-repository\npm --global

npm config set cache C:\Dev\Software\npm-repository\npm-cache --global

本地方式,顾名思义,是给指定模块或者应用使用,比如npm install grunt-contrib-uglify,那么uglify的存放路径到底在哪?它会存放在命令执行的工作路径上吗?不一定,它是有些规则的:

这个新下载的模块会被放置在它认为的当前node包的node_modules文件中,那它怎么决定哪个是当前的node包呢?

npm会从当前工作路径开始向上遍历,寻找模块描述文件package.json。如果找到了,则包含该描述文件的文件夹就会被当做包的根目录。如果向上遍历没有找到,它就会认为还没有package.json文件被创建,那么当前文件夹就会被当做包的根目录,并将模块下载到node_modules文件夹中。

这种判断在什么位置存放node_modules文件夹的模式是和node中模块系统的require函数寻找导入模块的策略是相匹配的。

当我们想要使用一个新安装的node模块时,我们通过require函数导入,传入的参数是模块的名字,而不是文件的名字。require函数会在当前路径寻找node_modules目录,如果没有找到,则会去它的父目录寻找。它会一直搜索,知道到达文件系统根目录。

Grunt

谈了这么多,还没有到今天的主题Grunt,那么Grunt和Node,npm是什么关系呢?答案是:Grunt是Node.js中的一个模块,可以通过npm下载并安装。

所以,如果你要安装Grunt,就和安装其他node模块一样,npm install grunt。

Grunt的插件与Node模块

在前面提到,npm为Grunt成为一个成功的构建系统做了很大的贡献,它是一个构建系统的插件仓库。

比如说,你希望构建的过程中,做JavaScript的CheckStyle。你需要安装:grunt-contrib-jshint插件(时刻记住,它就是node模块)

比如说,你希望构建的过程中,做JavaScript的文件压缩。你需要安装:grunt-contrib-uglify插件(node模块)

等等

难道手动的去一个个install吗?当然不是。

我们的项目,既是一个Grunt的工程,也是一个node模块,所以其中的package.json是有用的。

模块中所有的依赖模块(在grunt中,就是需要的插件),都可以在package.json中声明,而你只需要一个命令npm install,就可以全部下载并安装。

比如,在package.json中这么写:

1
2
3
4
5
6
7
8
9
10
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

然后,你运行npm install即可。

Grunt CLI

那么,为了看到Grunt跑起来,看到最后的build success字样,还差什么呢?构建脚本,Gruntfile.js,这个是当然。但,即便我不知道怎么写,我可以拷贝一个过来。可是,好像还是差点什么东西,Ant,Maven,Gradle都分别有对应运行脚本的命令ant,mvn和gradle(或者gradlew)。那么Grunt的是什么?

你可以打开当前工程的node_modules目录,看看里面grunt的文件夹,里面除了js文件就是json等描述性文件。好像这些都不是可以运行的命令文件。

还差点什么?

在前面,我们有引入一个命令npm install -g grunt-cli来安装grunt的命令行工具,你可以发现它是在全局范围内装了一个名字叫grunt-cli的模块。

没错,就是它了。Grunt在0.4版本以后,被分割为三部分:grunt、grunt-cli和grunt-init。

grunt-cli就是为了可以让你可以使用grunt命令,因此,当你在下载grunt-cli模块时,除了在全局的node_modules里面有grunt-cli模块,在npm文件夹下还有一个新下载的命令文件(例如,Windows是grunt.cmd),而且全局的node目录是放在系统path下的,因此你可以在任何位置使用这个命令。

那么,除了是为了提供grunt命令给你使用,它还有一个特别的意义。

Grunt CLI另一个很简单目的:运行离某个Gruntfile.js文件(Grunt里的build脚本)最近的某个版本的Grunt。换句话说,Grunt CLI就是类似Gradle中的Wrapper,是一个包装器。允许你在一台机器上给不同的应用使用不同的Grunt版本。

而Grunt CLI又是安装在全局下的,所以你在任何一个位置都可以运行grunt命令,它会去找里当前构建文件Gruntfile.js最近的Grunt。

我甚至怀疑它是不是就是借鉴的Gradle的包装器,只不过,Gradle的包装器在创建之前,需要创建的人先装一个支持包装器的Gradle版本,然后生成Gradlew,提交代码及对应的Gradlew命令,那么后面的人,就可以直接check out并运行,而不需要先安装Gradle,而这里,需要大家都安装Grunt CLI,它就是包装器,不需要某个人先创建。

最后一百米,如何完整的跑一次Grunt构建

有了它,剩下来的就是编写脚本文件Gruntfile.js,我个人觉得,它是整个Grunt生态系统中最容易理解的,因为它是配置。

看一个最简单的完整例子:

package.json

1
2
3
4
5
6
7
8
{
  "name": "hello-grunt",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.0"
  }
}

Gruntfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    jshint: {
      files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true,
          console: true,
          module: true
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');

  grunt.registerTask('default', ['jshint']);

};

files: [‘gruntfile.js’, ‘src//*.js’, ‘test//*.js’] 定义了所有需要做lint的的文件

options 用来配置JSHint(文档在这里http://www.jshint.com/docs/)

grunt.loadNpmTasks(‘grunt-contrib-jshint’) 用来加载包含 “jshint” 任务的插件。

grunt.registerTask(‘default’, [‘jshint’]) 定义默认被执行的任务列表,即直接运行grunt命令,默认的任务是什么。

现在你可以运行一下。

首先运行npm install,安装在package.json中的模块。

然后运行grunt命令,你也可以显示的指定运行某个任务 grunt jshint

运行结果:

1
2
3
4
Running "jshint:files" (jshint) task
>> 1 file lint free.

Done, without errors.

Grunt官方提供了许多插件来满足一般JavaScript项目或者Web项目前端部分需要的任务,比如jshint,less,sass等。

当你在grunt.initConfig中配置完对应的task之后,你就可以load和register对应的task到grunt中。

当然,你也可以写自己的task。下面摘自官方的首页例子:

1
2
3
4
5
6
7
8
module.exports = function(grunt) {

  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

本篇关于Grunt的文章到这里就结束了,目的已经达到,如果你对更多关于如何写package.json和Gruntfile.js。可以去nodejs和grunt官方网站查看更多文档。

总结,学习Grunt,本身不难,因为它是Cofiguation Over Code,这个的原则类似Maven。但是需要首先理解它的生态系统node.js。

PS:我知道,现在,越来越多的人也在讨论到底Gulp(一个新的JavaScript构建工具,同样基于Node.js,提倡Code Over Configuration)该不该替代Grunt,或者它们的优缺点。但这对于你去了解一个构建工具并不影响。

参考资料:

1.http://www.gruntjs.net/docs/getting-started/
2.Book: Getting started with Grunt: The JavaScript Task Runner