建设一个网站项目建设gruntjs

可能有以下步骤

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

1。新项目bejs

源代码是放在SRC，它有两个JS文件，selector.js和ajax.js.the编译后的代码放在桌子，这呼噜声会自动生成。



两。新的package.json

package.json放在根目录，其中包含了一些项目的元数据信息，如项目名称、描述、版本号和依赖包，应当提交SVN或Git作为源代码。该项目现在的结构如下



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

复制代码代码如下所示：
{
名字：bejs
版本：0.1.0
devdependencies ：{
咕噜：~ 0.4.0
咕噜jshint ~ 0.1.1
咕噜丑化：~ 0.1.2
咕噜连接：~ 0.1.1
}
}


在devdependencies步兵已经安装在前一个，和咕噜咕噜有贡献jshint / /咕噜丑化未安装有连接。三三个任务（任务）

咕噜jshint js语法检查
咕噜有丑化的压缩，使用uglifyjs
咕噜的contrib concat合并文件

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








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



三。新的文件gruntfile.js

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



gruntfile.js由以下内容

包装的功能，结构如下，这是Node.js典型的写作方法，利用出口开放API

复制代码代码如下所示：
module.exports =功能（咕噜）{
在这里咕哝一些相关的事情
}；


项目和任务配置
加载咕噜插件和任务
自定义执行任务

此示例完成以下任务

文件（阿贾克斯。js /选择器。JS）合并src下domop.js
压缩domop.js是domop.min.js
这两个文件都放在目标目录下

最后gruntfile.js如下

复制代码代码如下所示：
module.exports =功能（咕噜）{
配置
Grunt.initConfig（{
包装：grunt.file.readjson（'package JSON。），
康凯：{
Domop：{
SRC：{ 'src / AJAX，JS，'src /选择器。JS}，
目的：'dest / domop JS。
}
}，
丑化：{
选项：{
横幅*：！
}，
建造：{
SRC：'dest / domop JS，
目的：'dest / domop版。
}
}
}）；
/ /负载的连接和丑化插件，分别为固结和压缩
grunt.loadnpmtasks（'grunt-contrib-concat）；
grunt.loadnpmtasks（'grunt-contrib-uglify）；
注册任务
grunt.registertask（'default，{ 'concat '，'uglify}）；
}；


四。执行繁重的任务

打开命令行，输入项目根，叩击



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



好的，2个普通任务介绍，连接和丑化，jshint等等，都没有了。Gruntfile.js的代码没有被一个接一个，和有兴趣的同学可以在gruntjs官方文档中找到。