使用gruntjs建立一个综合网络计划压缩

有以下步骤：

1。新项目bejs
2。新的文件package.json
三.新的文件gruntfile.js
4。命令行执行咕哝任务。

1。新项目bejs
源代码是放在SRC，它有两个目录，资产和JS.JS放下selector.js和个ajax.js，这在上一篇文章已经告诉如何合并和压缩。本文仅侧重于资产目录，并有资源目录中的一些图片和CSS文件。不一会儿，两CSS资源，reset.css和style.css，合并压缩到dest /资产目录。一个all.css组合版，压缩版all-min.css。

两。新的package.json
package.json放在根目录中，已介绍了它的意义。该项目现在的结构如下

的package.json内容需要符合JSON的语法规范，如下

复制代码代码如下所示：
{
名字：bejs
版本：0.1.0
devdependencies ：{
咕噜：~ 0.4.0
咕噜连接：~ 0.1.1
咕噜CSS ：> 0.0.0
}
}

在咕噜贡献concat上一篇文章已经介绍，做简单的CSS使用插件。

在这一点上，打开命令行工具在项目根目录下，把下面的命令安装：新公共管理

看看根目录，找到一些node_modules目录，包括四个子目录。

三。新的文件gruntfile.js
gruntfile.js也放在项目的根目录。几乎所有的任务都在文件中定义。它是一种常见的js文件，可以写任意JS代码而不是JSON。像package.json，必须提交SVN、Git以及源代码。

源代码如下所示
复制代码代码如下所示：
module.exports =功能（咕噜）{
配置
Grunt.initConfig（{
包装：grunt.file.readjson（'package JSON。），
康凯：{
CSS：{
SRC：{ 'src / / *资产。CSS}，
目的：'dest / / CSS的所有资产。
}
}，
Cssmin：{
{ CSS：
SRC：'dest / / CSS的所有资产，
目的：'dest / / all-min.css资产
}
}
}）；
/ /负载的连接和CSS插件，分别为固结和压缩
grunt.loadnpmtasks（'grunt-contrib-concat）；
grunt.loadnpmtasks（'grunt-css）；
默认任务
grunt.registertask（'default，{ 'concat '，'cssmin}）；
}；

四。执行繁重的任务
打开命令行，输入项目根，叩击

dest目录和预期的文件从打印信息的产生，和项目目录dest，如下

此时，CSS合并被压缩。