Grunt学习笔记之开发环境的搭建与创建一个基本的项目

**开篇言**
Grunt需要在Nodejs的环境，Grunt和 Grunt 插件是通过 Nodejs的包管理器（npm） 安装并管理。
查看是否已经安装nodejs，如果已经安装nodejs，在安装Grunt之前确保nodejs是最新的版本，更新nodejs，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。
搭建Grunt的环境时，不会安装Grunt，而是安装grunt-cli，并安装到全局环境中，Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。
**nodejs安装：**
1、下载对系统的nodejs版本安装包。下载地址：[https://nodejs.org/en/download/](https://nodejs.org/en/download/)。
2、下载完成后直接执行相应的运行程序即可安装，windows：msi与exe
Mac Os：pkg
3、通过命令的方式来安装，MacOs：
curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*).pkg</a>.*|1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
其他的相关安装教程详见：[https://nodejs.org/en/download/package-manager/#windows](https://nodejs.org/en/download/package-manager/#windows)
**Grunt CLI安装**
安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令:
npm install -g grunt-cli
**Grunt CLI 工作原理**
每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。
如果找到一份本地安装的 Grunt，CLI就将其加载，并传递Gruntfile（之后会做讲解，这里只需要有这个东西即可）中的配置信息，然后执行你所指定的任务。想了解更多地Grunt CLI执行原理请阅读相关源代码。地址：[Grunt CLI源代码](https://github.com/gruntjs/grunt-cli/blob/master/bin/grunt)，到此为止就可以使用Grunt了。
**创建一个Grunt项目**
Grunt项目需要两份文件：package.json 和 Gruntfile。
package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件，文件名是 Gruntfile.js 或 Gruntfile.coffee。
步骤:
1、创建一个目录：如:/Volum/D/gruntProject
2、进入项目的根目录，创建一个package.json的文件（备注：这是一个json文件，遵循json格式的编写规范，相应地json规范请参见：[json官网](http://www.json.org/)），package.json应当放置于项目的根目录中，与Gruntfile在同一目录中，并且应该与项目的源代码一起被提交。
方式一:创建一个package.json的文件，添加如下内容（注意json文件中是不能有注释的）
{
"name": "my-project-name",
//项目的名称
"version": "0.1.0",
//项目的版本号
"devDependencies": {
//依赖的grunt插件
"grunt": "~0.4.5",
//采用grunt-cli安装的grunt到这里才安装了Grunt
"grunt-contrib-jshint": "~0.10.0", //项目中使用的grunt插件，根据需要添加
}
}
方式二:使用命令创建package.json文件
①、大部分 [grunt-init](http://www.gruntjs.net/project-scaffolding) 模版都会自动创建特定于项目的package.json文件。
②、[npm init](https://docs.npmjs.com/cli/init)命令会创建一个基本的package.json文件。
得到的package.json文件内容：
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
//这个会自动的安装最新grunt版本
"grunt-contrib-uglify": "~0.5.0"
}
}
4、在package.json所在目录下运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。这样就可以在Gruntfile中自己的编译程序了。
Grunt及插件的安装管理
方式一：在package.json包中的devDependencies 配置段中添加相应地插件：如
...
"devDependencies": {
"grunt": "~0.4.5",
//grunt会被安装
"grunt-contrib-jshint": "~0.10.0",
//grunt的插件会被安装
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
...
方式二：通过命令在安装，向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过*npm install <module(插件模块)> --save-dev*命令，使用该命令会再package.json的devDependencies段中添加最新的插件
如：
安装grunt，添加grunt的devDependencies命令：
npm install grunt --save-dev
安装JSHint 任务模块插件：
npm install grunt-contrib-jshint --save-dev
**Gruntfile**
Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件，应当放在你的项目根目录中，和package.json文件在同一目录层级，并和项目源码一起加入源码管理器。
Gruntfile由以下几部分构成：
"wrapper" 函数
项目与任务配置
加载grunt插件和任务
自定义任务
①、"wrapper" 函数
每一份 Gruntfile （和grunt插件）都遵循同样的格式，你所书写的Grunt代码必须放在此函数内：
module.exports = function(grunt) {
// Do grunt-related things in here
};
②、项目与任务配置
大部分的Grunt都依赖某些配置数据，这些数据被定义在一个对象内，并传递给grunt.initConfig()函数。也就是grunt.initConfig(Object o)函数接收一个Grunt的初始化配置数据对象来初始化Grunt。
这个配置数据对象<传递给initConfig()方法的对象>中可以存储任意的数据,只要它不与你任务配置所需的属性冲突，否则会被忽略。此外，由于这本身就是JavaScript，你不仅限于使用JSON；你可以在这里使用任意的有效的JS代码。如果有必要，你甚至可以以编程的方式生成配置。
grunt.file.readJSON('package.json') 将存储在package.json文件中的JSON元数据引入到grunt config中。
例：
grunt.initConfig({
//initConfig()中的{...}就是配置数据对象
pkg: grunt.file.readJSON('package.json'),
//加载package.json对象到grunt中，这样就可使使用pkg来应用package.json中的属性
uglify: {
//点一个任务 这使用的是压缩代码插件
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
//uglify任务的目标
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
③、加载 Grunt 插件和任务
只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：
// 加载能够提供"uglify"任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
④、自定义任务
通过定义 default 任务，可以让Grunt默认执行一个或多个任务。
// 注册一个默认的任务，此处是把uglify任务作为默认的任务。执行grunt uglify 或者 grunt default的效果一样
grunt.registerTask('default', ['uglify']);
如果grunt现有的插件不能满足开发的需求，可以在Gruntfile中自定义一个插件来进行相应地任务和目标。
module.exports = function(grunt) {
// A very basic default task.
grunt.registerTask('default', 'Log some stuff.', function() {
grunt.log.write('Logging some stuff...').ok();
});
};

最后

以上就是秀丽外套为你收集整理的Grunt学习笔记之开发环境的搭建与创建一个基本的项目的全部内容，希望文章能够帮你解决Grunt学习笔记之开发环境的搭建与创建一个基本的项目所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。