Yeoman构建webapp生成的package.json注解

前文最后使用Yeoman构建生成webapp项目骨架,还包括了很多的配置文件.gitignore,bower.json,Gruntfile.js,package.json,favicon.ico, robots.txt, .htaccess等。

看到Gruntfile.js、package.json你肯定不会陌生,早些时候在使用“Grunt进行js、css压缩合并”中已经用到了,但是看到这些插件及其功能后,我惊呆了,涉及了所有我知道的和不知道的。所能想到的功能这里都有了。

回顾一下:package.json放在项目根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,插件等。

{
  "name": "yo",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-uglify": "~0.2.0",
    "grunt-contrib-compass": "~0.7.0",
    "grunt-contrib-jshint": "~0.7.0",
    "grunt-contrib-cssmin": "~0.7.0",
    "grunt-contrib-connect": "~0.5.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-htmlmin": "~0.1.3",
    "grunt-bower-install": "~0.7.0",
    "grunt-contrib-imagemin": "~0.2.0",
    "grunt-contrib-watch": "~0.5.2",
    "grunt-rev": "~0.1.0",
    "grunt-autoprefixer": "~0.5.0",
    "grunt-usemin": "~2.0.0",
    "grunt-mocha": "~0.4.0",
    "grunt-modernizr": "~0.4.0",
    "grunt-newer": "~0.6.0",
    "grunt-svgmin": "~0.2.0",
    "grunt-concurrent": "~0.4.0",
    "load-grunt-tasks": "~0.2.0",
    "time-grunt": "~0.2.0",
    "jshint-stylish": "~0.1.3"
  },
  "engines": {
    "node": ">=0.8.0"
  }
}

下面开始简要介绍这些插件的作用:
grunt-contrib-copy: 插件实现复制一些文件到dist/ 文件夹。
grunt-contrib-concat:合并文件,它不仅可以合并JavaScript文件,还可以合并CSS文件,减少HTTP请求。
grunt-contrib-uglify:压缩js代码,减小文件体积。
grunt-contrib-cssmin:用于压缩CSS文件。
grunt-contrib-jshint:用来检查js语法错误,比如分号的使用是否正确、有没有忘记写括号等等。
grunt-contrib-connect:该模块用于在本机运行一个Web Server。为文件建立站点,实现通过浏览器访问文件的功能。
grunt-contrib-clean: 用于清理指定文件(夹),一般是构建之前或之后进行。
grunt-contrib-htmlmin:Minify HTML 压缩html。
grunt-bower-install:用来将bower.json中需要的组件动态的放置到html的响应位置,省去了手动导入link和script的过程。
grunt-contrib-imagemin:封装 jpegtran/OptiPNG 功能,可以批量、无损压缩图片大小。
grunt-contrib-watch:自动刷新,监视磁盘文件,一旦更改就会重新运行指定的任务,例如使http服务器重新加载源文件。
grunt-rev:为你的应用程序的静态文件缓存清除。这使他们能够永远被浏览器缓存。
grunt-autoprefixer:Autoprefixer是Stylus尤物移人编译成CSS后,给CSS3属性添加前缀插件。他是一个强大的库,正如Nib和Compass。
grunt-usemin:usemin组件能够自动更新Gruntfile中诸如concat、uglify、requirejs的配置文件
grunt-mocha:插件能够使用Mocha和PhantomJS进行测试。
grunt-svgmin:处理svg压缩。
load-grunt-tasks:有了这个你就不用手动加载Grunt任务了。
time-grunt:计算任务执行的时间。

Yeoman构建 Js项目注解总结版

在前文Yeoman自动构建 Angularjs 项目中,介绍了Yeoman是什么?安装、创建项目、并发布项目。
今天又建立了一个web项目,通过标准化的Yeoman来构建一个企业级应用的项目基础。再做个总结。

yo插件都是通过npm, Node.js包管理器安装和管理的。看一下yo命令行操作:
命令行模式下进入项目所在目录,执行

yo --help

General options(常规选项):
Print generator’s options and usage (显示生成器的选择和使用)
Overwrite files that already exist (覆盖已经存在的文件)

Please choose a generator below.(请选择一个生成器)
下面列出了我的系统中,已经安装的generator的库,例:Angular,Karma,Mocha,Webapp

查询yo的支持库:

yo

使用上个箭头键进行选择,此时可以到各个库的版本信息。
选择 Update your generators (更新已安装的库),进行更新。
选择 Install a generator,系统继续提示,我们要查找的包,我们输入web,yo列出了,所有在官方已经注册的,web关键字相关的包,我们可以选择后进行安装。(ps:我是用不到了)
选择 get me out of here(让我离开这里),在退出时会看到:

Bye from us! Chat soon.
            Addy Osmani
          Sindre Sorhus
        Brian Ford
     Eric Bidelman
              Paul Irish
     Mickael Daniel
          Pasca1 Hartig
      Stephen S.wchuk
    Frederick R0s

上面的退出的文字是开发者的名字,很有意思一点是,竖着看最中间一行的文字排列是,yeoman1.0,也就是yeoman这个项目的得名了。

并构建webapp工程,在命令行模式进入所在目录下执行:yo webapp

What more would you like? Press "space" to select 
Sass with Compass
Bootstrap
Modernizr

默认都是选中状态,使用上下箭头加空格键进行功能项取消。完成后按回车键,就开始安装了。
下面是安装完成后,可以进行的一些操作。

1). 使用bower命令查看项目依赖:

bower list

发现生成的webapp中,有4个依赖库,jquery,modernizr,requirejs。

2). 使用grunt命令执行单元测试

grunt test

3). 使用grunt命令启动一个node服务器

grunt server

后台日志显示了“watch”的task,说明代码文件被监控着,如有修改网页会自动更新。
浏览器被自动打开,http://localhost:9000/

4). 通过bower增加库jquery-pjax

bower install jquery-pjax

5). 通过grunt生成用于部署的目录dist。

grunt --force

参考:http://blog.fens.me/nodejs-yeoman-intro/

Yeoman自动构建 Angularjs 项目

Yeoman是什么?

Yeoman按照官方说法,它不只是一个工具,还是一个工作流。它其实包括了三个部分yo、grunt、bower,分别用于项目的启动、文件操作、包管理。

Yo: Yo是一个项目初始化工具,可以生成一套启动某类项目必需的项目文件。

Bower: 一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

GruntJS: GruntJS是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作。

安装

基于nodejs,需要先安装node,安装时要确保 Add to PATH 被安装进去,然后安装依赖的包。
–安装git,http://git-scm.com/downloads,我是windows版本,安装的时候需要注意勾选Run git from the Windows Command prompt (从Windows命令提示符下运行git)项。
–安装gruntjs,参考之前的文章:一步一步安装Grunt
–Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。安装bower:
npm install -g bower

安装完成后执行:
npm install -g yo grunt-cli bower
其中 -g 代表要把 yo , grunt-cli , bower 这三个套件安装到全域 (global)

创建项目:
在命名行下,进入相应的目录后,输入:
npm install -g generator-angular
等执行完成后,输入:
yo angular
会出现由符号拼成的Yeoman的标志人物,及一些选择项。
根据需要进行选择操作,yo 会在最后开始完成所有的安装工作。这个命令执行要2分钟左右,会自动下载很多的依赖包。

AngularJS项目结构(Yeoman)
.tmp:临时目录
app:开发的源代码的目录
dist:生成用于发布的项目
node_modules:nodejs依赖包
test:测试文件的目录
.bowerrc:bower属性
.editooconfig:对开发工具的属性配置
.gitattributes:git属性的配置
.gitignore:git管理文件的配置
.jshintr:JSHint配置
.travis.yml:travis-ci持续集成的配置
bower.json:bower依赖管理
Gruntfile.js:grunt开发过程管理
karma.conf.js:karma自动化测试
karma-e2e.conf.js:karma端到端自动化测试
package.json:项目依赖文件

启动项目:
grunt server

好吧,遇到问题了,提示”unable to find local grunt”,原因大概是grunt需要安装在项目目录中。输入:
npm install grunt –save-dev
将安装包放在 ./node_modules 下(运行npm时所在的目录)

再次执行grunt server,就会发现浏览器被自动打开:http://localhost:9000/#/

执行:

grunt --force

生成用于部署的目录dist。

至此结束,还有一些问题。但总算是跑起来了~

参考资料:
http://blog.miniasp.com/post/2013/08/11/Yeoman-1-0-Installation-and-Usage-on-Windows.aspx 较为全面,从node.js for Windows安装开始~ 包括:Git for Windows安装~ ruby执行环境安装~ 等。
http://blog.fens.me/angularjs-yeoman-project/ 介绍构建AngularJS项目的三种方式。