前端开发利器:Yeoman

Yeoman介绍

Yeoman是一套针对Web应用开发流程进行管理的工具集,包括三个部分:

  • grunt:构建工具,主要用来运行各种任务,比如文件压缩、合并、打包等。生成、预览和自动化测试项目。
  • bower:包管理器,主要用来做前端资源依赖管理,跟npm很像,区别在于:npm管理的是node模块的依赖,bower管理的是前端资源的依赖,如css、javascript文件等。
  • yo:脚手架工具,主要作用是创建项目骨架(跟grunt-init有点像)。快速生成一个新的应用,包括配置好Grunt任务及有可能用到的Bower依赖。

在用到Yeoman的项目中,工作流程一般是:

  • 创建项目骨架:运行yo工具,通过各种yeoman-generator(模板)创建项目骨架
  • 下载前端资源:运行bower install,下载项目中依赖的前端资源,比如jQuery、bootstrap、angularjs等(非必要)
  • 运行构建任务:运行grunt跑自动化构建任务(非必要)

Yeoman

下面分别介绍三者的安装和使用。

Grunt的安装和使用

安装

Grunt和Grunt插件都是通过NodeJS自带的npm工具进行安装和管理的,因此,要确保系统已安装好了NodeJS。

执行以下命令,全局安装

1
npm install -g grunt-cli

使用

Grunt的使用需要依赖两个文件:

  • package.json:npm项目配置文件,包含了应用的相关元数据。在该文件中需要通过 devDependencies 来声明对 Grunt 及其他插件的依赖。
  • Gruntfile.js:grunt的配置文件,配置应用中所需要执行的任务。

下面以js代码的压缩为例来说明如何使用Grunt。

添加插件依赖

压缩代码需要使用Uglify插件,可以直接编辑package.json, 在devDependencies中增加grunt-contrib-uglify的依赖库,也可以执行以下命令

1
npm install grunt-contrib-uglify --save-dev

配置Grunt任务

编辑Gruntfile.js,添加uglify任务

1
2
3
4
5
6
7
8
9
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});

加载插件

为了能够运行uglify任务,需要在Gruntfile.js中加载前面添加的插件依赖

1
grunt.loadNpmTasks('grunt-contrib-uglify');

设置默认任务

可以将自己定义的任务添加到default任务数组中

1
grunt.registerTask('default', ['uglify']);

名为 default 的任务在执行时,会依次执行任务数组中的任务。当运行 grunt 命令时,如果没有指定任务名称,会尝试运行名为 default 的任务。

运行

可以直接运行某个Grunt任务,这样就不需要前面一步将任务设置为默认任务

1
grunt uglify

也可以只运行grunt命令,这样default中的所有任务都会运行

1
grunt

Bower的安装和使用

安装

Bower依赖于Git、NodeJS和npm,如果前面已经完成了Grunt的安装,那么此处需要确保安装了Git并且添加到环境变量中,如果使用代理上网,需要设置Proxy,具体可参考此文。

执行以下命令,全局安装

1
npm install -g bower

使用

Bower 本身的配置可以通过 .bowerrc 文件来完成,该文件以 JSON 格式来进行配置。比如通过 directory 定义了 Bower 下载库的目录。

1
2
3
{
"directory": "app/bower_components"
}

可以在 bower.json 文件中定义所依赖的库,然后运行 bower install 命令来安装所有的这些库。bower.json 文件的作用类似于 NodeJS 中 package.json 。可以直接创建该文件,也可以通过 bower init 命令以交互的方式创建。

下面以bootstrap库的安装为例来说明如何使用Bower。

搜索库

安装一个库,一般的做法是首先通过 bower search 命令先搜索需要使用的库

1
bower search bootstrap

安装库

执行 bower install 命令可以完成一个库的安装,并自动安装其依赖库

1
bower install bootstrap

因为bootstrap库依赖于jQuery库,安装完成后可以看到下载库的目录中同时有bootstrap和jQuery。

在安装时也可以指定库的版本

1
bower install bootstrap#2.0.0

升级库

需要升级一个库时,可以使用 bower update 命令

1
bower update bootstrap

删除库

不需要一个库时,可以使用 bower uninstall 命令移除

1
bower uninstall bootstrap

查看库信息

使用 bower list 命令可以列出来当前应用中已经安装的所有库的信息,包括库之间依赖关系以及可用更新。

1
bower list

Yo的安装和使用

安装

Yo的安装和使用也依赖于Git和NodeJS,某些生成器可能还需要安装Ruby和Compass。

执行以下命令,全局安装

1
npm install -g yo

使用

下面以创建一个Angular项目来说明如何使用Yo。

安装生成器

为创建Angular项目,需要安装Angular生成器

1
npm install -g generator-angular

创建项目骨架

在项目目录运行生成器

1
yo angular

在回答完一些交互问题后,Yo开始创建应用程序,生成项目骨架,包括Grunt和Bower所需的配置文件。在这些步骤中,它会调用 npm installbower install 确保所有依赖已经存在,这样便可立即进行开发。

组合使用

在 Yo 生成的 Web 应用中包含了一些常用的 Grunt 任务。这些任务可以帮助快速的进行开发。这些任务包括:

  • grunt server:启动支持 Live Reload 技术的服务器。当本地的文件有修改时,所打开的页面会自动刷新来反映最新的改动。这免去了每次手动刷新的麻烦,使得开发过程变得更加方便快捷。
  • grunt test:运行基于 Mocha 的自动化测试。
  • grunt build:构建整个 Web 应用。其中所执行的任务包括 JavaScript 和 CSS 文件的合并、压缩和混淆等操作,以及添加版本号等。

小结

面对复杂的 Web 应用的开发,良好的流程和工具支持是必不可少的,可以让日常的开发工作更加顺畅。Yeoman 作为一个流行的工具集,在整合了 Yo、Grunt 和 Bower 等工具的基础上,定义了一个更加完备和清晰的工作流程。通过把一些最佳实践引入到 Web 应用中,有助于创建高质量和可维护的应用。

参考资料

  1. Yeoman:Web 应用开发流程与工具
  2. Yeoman官方教程:用Yeoman和AngularJS做Web应用
  3. Grunt一辈子的好基友:yeoman
  4. grunt让Nodejs规范起来
  5. bower解决js的依赖管理
  6. Yeoman自动构建js项目
坚持原创技术分享,您的支持将鼓励我继续创作!