前端软技能之一——自动化构建工具Yeoman

Yeoman是一个帮助我们构建前段项目的工具,提高我们的工作效率,规范我们的架构和我们的代码,你甚至可以用某些yo上已存在的前端项目结构来衡量前端开发的质量。

那Yeoman是什么?

Yeoman出现的目的是想通过GRUNTBOWER的包装来创建一个易用的工作流,YO就是集合这两个的一个工具。

  • YO:Yeoman核心工具
  • GRUNT:就像Java有Ant和Maven、Python有pip、Ruby有gem一样,js领域也有一个项目构建工具
  • BOWER:作为js依赖管理的工具,借助了 npm 的一些思想提供包管理方式。

GRUNT

Grunt是一个自动化的构建工具,他可以帮助你执行代码压缩、编译、单元测试、自动刷新、打包发布等任务。我们只需要配置好GRunt就可以了。

Grunt和Grunt插件都是通过npm来安装的,使用grunt我们需要以下条件:

  • 安装node
  • npm,npm install
  • grunt-cli:管理本地各个项目的grunt,让命令行可以直接执行grunt命令。npm install -g grunt-cli
  • grunt:npm install -g grunt
  • 当前项目目录还必须有package.json(npm项目配置文件,需要哪些grunt插件)和Gruntfile.js(配置grunt的配置文件)

gruntjs里有介绍,如果想使用其他功能可以在grunt的grunt插件添加相应的grunt插件。下载后,再建立 Gruntfile.js 文件来配置Grunt的工作流程,一般在插件的github项目目录,README.md上都会有相关的配置代码,我就不继续一个个介绍过去了。

Gruntfile.js通配符匹配文件

  • ?匹配单个字符,但不匹配/
  • *匹配任意数量的字符,但不匹配/
  • **匹配任意数量的字符,包括/,只要它是路径中唯一的一部分
  • {}允许使用一个逗号分割的列表或者表达式,可以给一个插件定义多个任务。
  • !在模式的开头用于否定一个匹配模式(即排除与模式匹配的信息)

ps:*.js匹配所有.js结尾文件,**/*js匹配该目录以及其子目录中所有.js结尾文件。

自己使用途中出现的错误:

  • 可能因为grunt使用了sass插件,而sass插件使用成功必须新建一个用户变量里 PATH , 值: C:\Ruby200-x64\bin;C:\Users\guwei\AppData\Roaming\npm;C:\Program Files\node\;C:\Program Files (x86)\Git\bin\;
  • 使用compass的话那必须得先安装过 compass

BOWER

Bower是一款包管理工具,类似于npm包管理,但是Bower主要针对前端,并且直接从github查找并下载相应的库。

使用Bower需要以下条件:

  • 安装node
  • 安装gitHub
  • npm,npm install
  • bower npm install bower -g

安装后就可以使用bower这个命令了,command prompt 输入 bower,出现如下:

D:\workspace\javascript>bower
Usage:
   bower <command> [<args>] [<options>]
Commands:
    cache                   Manage bower cache
    help                    Display help information about Bower
    home                    Opens a package homepage into your favorite browser
    info                    Info of a particular package
    init                    Interactively create a bower.json file
    install                 Install a package locally
    link                    Symlink a package folder
    list                    List local packages
    lookup                  Look up a package URL by name
    prune                   Removes local extraneous packages
    register                Register a package
    search                  Search for a package by name
    update                  Update a local package
    uninstall               Remove a local package
Options:
    -f, --force             Makes various commands more forceful
    -j, --json              Output consumable JSON
    -l, --log-level         What level of logs to report
    -o, --offline           Do not hit the network
    -q, --quiet             Only output important information
    -s, --silent            Do not output anything, besides errors
    -V, --verbose           Makes output more verbose
    --allow-root            Allows running commands as root
See 'bower help ' for more information on a specific command.
	

Commands,列出了bower支持的各种命令。

  • cache:bower缓存管理
  • help:显示Bower命令的帮助信息
  • home:通过浏览器打开一个包的github发布页
  • info:查看包的信息
  • init:创建bower.json文件
  • install:安装包到项目
  • link:在本地bower库建立一个项目链接
  • list:列出项目已安装的包
  • lookup:根据包名查询包的URL
  • prune:删除项目无关的包
  • register:注册一个包
  • search:搜索包
  • update:更新项目的包
  • uninstall:删除项目的包

使用 bower init 命令就可以生成bower.json文件,后在其中写入需要的包及其版本即可

{
  "name": "my_project",
  "version": "0.1.0",
  "main": [js/js.js, css/css.css],
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "": "",
    "": "",
    "": ""
  },
  "devDependencies": {
    "": ""
  }
}
	

可以在.bowerrc下载库存放的路径。

点击bower官网了解更多

Yo

Yo是一个项目初始化工具,可以生成项目必须的文件。

Yo已经构建好了项目的目录,完成了grunt以及Bower相关配置。

我们只需要再在 command prompt 输入npm install -g yo,或者你可以全部一起安装npm install -g grunt-cli bower,安装完毕之后:

npm install -g generator-webapp // 全局安装 webapp
yo webapp // 安装 webapp 脚手架
bower install underscore  // bower 下载underscore
grunt // 执行grunt default 任务
	

所以使用了Yoman,你可以直接开始coding,不用想其他的事。但是 generator上的的generator只是你启动项目的开启,之后开发肯定要更具项目需求进行删减。

由此,项目开发中的大部分人工工作都交由程序了,Yo可以快速的启动一个项目,Bower可以配置需要的包,Grunt在开发中可以自动化的持续完成编码中重复性的工作以及自动化检查和测试代码以提高质量。

本文源链接:http://www.html5jscss.com/yo-grunt-bower.html

转载请注明《前端软技能之一——自动化构建工具Yeoman》| html5jscss

评论关闭了.