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:计算任务执行的时间。

内网安装Grunt

尝试了半天终于在内网使用Grunt压缩文件成功了。前置条件,外网已安装好相应环境。记录一下过程:

一、将node.js安装包,发至内网进行安装。安装后可以使用:

node -v (查看nodejs版本号)
npm -v(npm版本号)

二、在外网机,文件夹选项中选择“显示所有文件和文件夹”。

1、打开C:\Documents and Settings\admin\Application Data,找到npm和npm-cache目录。
2、打开C:\Documents and Settings\admin,找到node_modules目录。
复制到内网机相应目录中。

三、比较关键的一步,内网机设置环境变量。

1、在桌面上,右键“我的电脑”,选择“高级”选项卡,找到点击“环境变量”按钮。
2、“新建”环境变量,变量名“NODE_PATH”,变量值“C:\Documents and Settings\admin\Application Data\npm\node_modules”
添加完成后,确保变量有NODE_PATH和PATH。其中PATH值为安装node.js时,自动创建。如果没有请添加,变量值“PATH”,变量值“C:\Documents and Settings\hanbingfeng\Application Data\npm”

四、这个时候在cmd命令下,输入命令,即可看到版本信息:

grunt -version

五、进到项目目录下使用grunt命令测试成功。

参考资料:
https://npmjs.org/doc/install.html

一步一步安装Grunt

Grunt安装过程:

1、安装nodejs,昨天重新装了一下,进入官网后(http://nodejs.org/),点击“INSTALL”按钮,就会下载然后安装就行了。觉得现在windows安装node,挺简单的,感觉稳定性也提升了不少。

2、安装grunt命令行工具,有一句话总结“就是安装完CLI,还要在项目安装Grunt。”

安装grunt-cli,进入window命令行模式,开始->运行->cmd->

npm install -g grunt-cli

安装grunt及其插件,进入到某项目根目录,在命令行模式下,例如文件在c盘testGrunt目录下,利用cd命令到testGrunt目录下后,使用命令: 

npm install grunt --save-dev

3、输入版本号验证安装是否成功,输入:

grunt -version

2013-04-09_175928

就证明安装成功了。

参考:
http://www.cnblogs.com/snandy/archive/2013/03/07/2946989.html
http://my.oschina.net/smeite/blog/119351

Grunt:用于JS项目基于任务的命令行构建工具

Grunt 是一个基于任务的命令行构建工具,是node.js的一个组件,本身还带有很多plug-in,用于javascript应用程序的构建管理及依赖管理,诸如lint, copy, concat, minify, unit test等,有点象Maven。它已经预置一些可以在你的项目中使用的任务包括:

  • 利用JSHint验证js文件
  • 利用concat合并js文件
  • 利用UglifyJS压缩js文件
  • 利用cssmin压缩合并css文件
  • 利用nodeunit运行单元测试等。

除了内置任务,你可创建自己的任务。如果不喜欢默认的任务还可以覆盖它。
Node.js被设计为支持开发高度并行,异步IO驱动的Web服务器,显然不是设计成一个命令行构建工具。但是,这些都不重要了,因为Grunt可以胜任这样的工作。 Grunt 可以作为一个NPM模块使用。
grunt

官网:http://gruntjs.com/
Grunt插件:http://gruntjs.com/plugins 官方维持的插件都标有一个星形图标。