Grunt安装教程详解

上一篇我们已经通过自己勤劳的双手和智慧的大脑把node给装上了，这一篇我们就来学一下如何安装grunt

当然，grunt安全前提是得先装node，废话不多说，还是简洁明了的傻瓜式教程奉上

Grunt是啥？

Grunt是一个带有内建的常用任务的基于任务的构建工具

这么说可能你会有点晕+_+

我们来通俗的说一下，平常我们的项目中，可能需要不停的做一些重复的任务，例如压缩（minification）、编译、单元测试、查错（linting）等，如果我们有一款工具可以自动帮我们做这些，是不是就很爽了？Grunt就是这么生出来的

Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那你也可以自己动手创造一个Grunt插件

安装Grunt

【前提】：安装好了node

这是前提，没得商量，没装好的可以查看我的博客：node安装教程详解

【第一步】：安装grunt-CLI

这又是什么玩意？

“CLI”被翻译为“命令行”。要想使用grunt，首先必须将grunt-cli安装到全局环境中。

同时按下键盘win+R键，打开控制台窗口（注意：windows系统下请使用管理员权限打开）



在窗口中输入“cmd”,按“回车键（Enter）”或点击“确定”,出现运行黑色窗口，在窗口中输入以下命令

npm install -g grunt-cli

注：mac os 系统、部分linux系统中，在这句话的前面加上“sudo ”指令。

回车，命令行会出现一个转动的小横线，表示正在联网加载。加载的时间看你网速的快慢，不过这个软件比较小，一般加载时间不会很长，稍一会儿，就加载完了。你会看到以下界面



这时候要验证一下grunt-cli是否安装完成并生效，你只需要继续在命令行中输入“grunt”命令即可。如果生效，则会出现以下结果



注：安装grunt-cli并不等于安装了 Grunt！

Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。

这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。这样就能让多个版本的 Grunt 同时安装在同一台机器上。

【第二步】：用express来创建项目

因为grunt要安装在本地，而不是全局中去，所以我们先用express来创建个项目

先在node中安装express

npm install -g express

这个时候，我们来查看一下express是否安装成功

express -V

注：这个“V”是大写！

发现他报错了！真是吓死宝宝了~



别急，这是因为express在4.0以后把命令工具单独分出来了，所以安装完express后，还得再安装express-generator

得，您是大爷，我们来安装express-generator

npm install -g express-generator

安装完毕后我们来执行查看版本的代码

express -V

OK，总算是装好了

那么接下来，我们用express来创建一个项目

我们先切换到我们的项目所在的目录下，然后建立一个新的项目，在这里，我是建在了F盘的Project文件夹下，项目名字叫renrenlab

cd /d F:\Project

express -e renrenlab

我们看到了，他需要我们装一些依赖包，OK，我们按照系统提示走

cd renrenlab && npm install

好了，项目创建完毕，我们来启动一下模版项目

node app.js

这里要说明一下，我们看到，我们按照之前的写法“node app.js”启动项目，已经毫无反应了，这是因为在express4.0版本已经废弃了这种写法，我们可以按照下面的写法来启动

npm start

或者

node bin/www

此时，大功告成，我们在浏览器中输入“localhost:3000”回车



这时候还不算完美，因为如果我们修改代码的话，刷新并没有改变，就得我们不停的重启，但是如果我们安装一个工具之后，它就可以自动重启了

npm install -g supervisor

这个时候，我们再修改的话，浏览器只要刷新就能看到我们修改后的样式了

supervisor bin/www

注：退出监听的方法，ctrl+c

扯远了，囧 Orz…

言归正传，我们来安装grunt

【第三步】：安装grunt

在我们的项目路径下

npm install grunt --save-dev

不一会就装好了

注：“—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。

我们打开项目目录下的package.json，可以看到，“devDependencies”多了一行“grunt”及其版本



下面，我们需要在项目目录下创建一个Gruntfile.js文件，文件内容如下

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});

// 默认被执行的任务列表。
grunt.registerTask('default', []);

};

保存之后，我们先来用grunt安装第一个插件uglify，这个插件的作用是压缩js文件

npm install grunt-contrib-uglify --save-dev

接下来，我们要在Gruntfile做一些配置，以便我们添加的插件可以为我们所用



其中第一部分的代码

uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}

“options”中规定允许生成的压缩文件带banner，即在生成的压缩文件第一行加一句话说明。注意，其中使用到了pkg获取package.json的内容。

“build”中配置了源文件和目标文件。即规定了要压缩谁？压缩之后会生成谁？注意，我们这里将目标文件的文件名通过pkg的name和version来命名。

这样的好处是：例如，对文件版本的管理，你只需要在package.json中修改即可，grunt会自动根据最新的版本号生成相应版本的文件，你不用手动去修改文件的文件名。

第二部分的代码

grunt.loadNpmTasks('grunt-contrib-uglify');

用处是在 grunt.initConfig 方法之后，要让grunt去加载这一个插件，插件只有加载了，才能使用

第三部分代码

grunt.registerTask('default', ['uglify']);

用处是当你在终端输入“grunt”时执行的操作是什么。上面缩写的就是要去给我执行uglify插件，将我的js文件进行压缩，如果输入grunt时不想让其操作，那就在中括号里去掉即可，注意里面包含的各种插件是有顺序的。

接下来我们再安装一个插件jshint，这个插件的作用是检测js语法错误

安装过程不在赘述，跟上面一样

npm install grunt-contrib-jshint --save-dev

我们需要在Gruntfile做如下配置



并且要建立一个名为“.jshintrc”的文件来说明检测规则



其他插件不再一一赘述，下面再讲一个真正实现监听自动化的插件watch

安装代码

npm install grunt-contrib-watch --save-dev

在Gruntfile里面需要的配置如下



其他插件都是类似安装，grunt的安装就介绍到这里，快去尝试你的第一个grunt项目吧~~