一个Gruntfile文件来给静态内容提供服务-package文件

运行一个web服务器的方法是使用如Grunt的任务执行器。这可以进行客户端任务的自动化运行,并且其他人也可以直接使用。使用Grunt有点像刚才另外两种方式结合在一起,它需要一个像Connect这样的web服务模块,以及需要一个命令行工具。

在客户端项目中使用Grunt,你需要做三件事情:

1.安装grunt-cli模块。

2.创建一个package.json文件来管理你项目的依赖。

3.使用Grunt插件来运行一个web服务器。

第一步很简单,使用npm install-g grunt-cli来全局安装grunt-cli模块。现在你可以在任意使用grunt项目中输入grunt来运行Grunt任务了

下一步,为项目创建一个新的目录。在创建的目录下输入npm init,你可以直接按回车键使用每一项的默认值。现在你需要安装一个web服务模块,可以这样操作:npm install--save-dev grunt grunt-contrib-connect。

上边的命令同样把grunt作为依赖安装了。主要是为了把Grunt锁定为当前的版本,如果你打开package.json,可以看到"grunt":"~0.4.2",这意味着首次安装Grunt时版本为0.4.2,将来可以使用在0.4分支上更新的版本。一些类似Grunt的模块相当流行,这让npm不得不支持如同级依赖(peer dependencies)这些特性。同级依赖允许Grunt插件指定一个特定版本的Grunt作为依赖项,所以我们使用的Connect模块在它的package.json会有一个peerDependencies的配置项。这样的好处是你可以确定插件在Grunt版本变更时是否能够正常工作,否则,由于Grunt的API变化,插件可能不能正常运行,却没有明显的提示。

在这个书编写时,Grunt已经是Node中最流行的构建系统了。但是,新的替代品也出现了,并且在快速发展中。例如Gulp,它利用了Node Stream API的优势,并且拥有更加容易学习的轻量级语法。

如果这一切对你来说都是新鲜的,我们也准备了一个项目的截图来作为参考见下图所示

一个Gruntfile文件来给静态内容提供服务

现在我们创建了一个新的项目,最后一步是创建一个名为Gruntfile.js的文件。这个文件包括了grunt要执行的一系列任务。下面会为你展示使用grunt-contrib-connect模块的例子:

一个Gruntfile文件来给静态内容提供服务

①所有的Gruntfile都是对外暴露一个方法

②加载Connect插件

③静态文件的路径

④默认的命令在这里进行重命名

也可以创建一个public的目录,并且在里边存放一个index.html文件,内容可以随意。然后,在已经有了Gruntfile.js的目录中运行grunt connect,web服务便已经启动了。你也可以输入grunt来运行,因为我们已经把默认的任务设置为Connect:server。

Gruntfile使用Node标准的模块系统,接收一个grunt的对象来创建任务。插件是使用grunt.loadNpmTasks进行加载,引用npm安装的模块。大部分插件都有自己的配置选项,这些都在一个对象中设置后传递给grunt.initConfig,我们已经定义了服务端口和路径,你也可以修改base属性来进行调整。

推荐阅读