今天开始学习使用Grunt,我把自己的学习过程记录下来(windows平台),一方面是自己的总结,另一方面希望对别人能有点帮助。

Grunt简单介绍

Grunt是一个任务运行器(The JavaScript Task Runner),可以让前端开发过程中的很多重复工作实现自动化,只需使用一个快捷键就能完成平常需要几个步骤才能完成的工作。比如:压缩js/css代码、优化图片等。

Grunt安装环境准备

Grunt和Grunt 插件都是通过npm安装和管理的。npm是Node.js的包管理工具。也就是说使用Grunt之前先要安装Node.js。

安装Node.js和npm我就不说了,网上有很多教程。好吧,我知道你很懒,链接奉上:Node.js安装及环境配置(windows系统)Node.js&NPM的安装和配置。有一点需要注意,一定要把Node.js的安装路径添加到PATH环境变量中去。这样才能在所有文件夹下都能使用node命令。否则就只能在Node.js的安装目录中使用node命令。

安装CLI

CLI即Command Line Interface,根据官网的介绍,安装Grunt's command line interface有两个用处,一是能把grunt命令添加到系统的PATH环境目录下,这样所有目录都能使用grunt命令。二是运行安装在紧邻Gruntfile的Grunt,这就允许不同版本的Grunt能够同时安装在一台机器上了。(注:不同版本的Grunt我还没有用过,这里只充当翻译人员)。

安装Grunt

并不是在一台电脑上安装了Grunt就行了,而是要在所有用到Grunt的项目中都安装。典型的安装将会增加两个文件到项目文件中:package.json和Gruntfile。

  • package.json 在这个文件中将列出项目所依赖的grunt和grunt 插件。产生这个文件有三种方式:
  • 大多数grunt-init模板将自动创建一个package.json文件。(注:我没用过)
  • 使用npm init命令行创建一个package.json文件。
  • 直接创建一个叫package.json的文件。文件配置格式要求如下:
    {
    "name":"project-name",
    "version":"1.0",
    "devDependencies":{
    "grunt":"~0.4.5",
    "grunt-contrib-uglify":"~0.5.0"
    }
    }
  • Gruntfile 用来配置或者定义任务,以及加载grunt插件。直接创建文件

现在我建立了一个空项目,命名为project。我将实际演示在project项目中如何安装grunt。

进入project文件夹,打开命令行工具(由于我安装了git,所以我直接使用git Bash了,你也可以在cmd命令行下进入project文件夹然后进行如下操作),输入npm init,回车,如下图:

grunt

注意到没,使用这种方式其实是把package.json里的各种配置一项一项手动输入进去。按照指示先后输入name、version、description、entry point、test command、git repository、keywords、author、license。完成之后如图:

grunt

注意:有些配置项是由默认值的。我就使用了默认值。

提示: Is this ok?yes

然后我们打开project文件夹。会发现里面多了一个package.json。

grunt

打开该文件 ,如图:

grunt

ok,package.json文件搞定了,接下里,进入项目文件夹,启动命令行。输入npm install grunt --save-dev.回车,等待。如图

grunt

然后你会发现project文件夹里产生了一个node_modules的文件夹。

接下来只剩下Gruntfile文件了。自己创建吧。不过要放在根目录下。和package.json同一级。

Gruntfile文件中所有的代码必须包含在一个函数里:

module.exports = function(grunt){
//do grunt-related thing in here
}

好了,关于Grunt的安装配置已经完了,具体的使用我就不细说了,如果大家能把以上的做好,具体使用就是小问题了。

参考文章:Grunt-Getting started