Web的自动化开发---grunt介绍

简单grunt

  • Grunt 是一个 JavaScript 化任务处理工具,是一个工具框架,有很多插件展它的功能当我们需要做大量的重复工作时,比如:压缩/缩小/单元测试等,Grunt能够自动化automation)地帮我们完成这些工作。
  • Grunt 基于Node.jsGrunt及它的插件都作一个包,可以用NPM安装行管理,所以,NPM生成的package.json目文件,记录当前目中用到的 Grunt 插件。
  • GruntGruntfile.js文件,解析里面的任行相操作,需要安装Grunt-cli,也就是命令行的 Grunt,当然 Grunt-cli安装的并不是Grunt 

安装及配置

1. 安装nodejs

官网下载 node-v4.2.2.pkg,按照后,同时安装了node 和npm,它将在你的机器上安装 Node.js npm (node package manager)

2. 安装grunt-cli

 “CLI被翻译为命令行。要想使用grunt,首先必grunt-cli安装到全局境中,使用nodejs“npminstall…”行安装。打开控制台(注意:windows使用管理员权限打开),入:npm install -g grunt-cli,注意mac os、部分linux中,在的前面加上sudo ”指令。安装完成后,这时候要验证一下grunt-cli是否安装完成并生效,你只需要继续在命令行中“grunt”命令即可。如果生效,会出以下果:

Web的自动化开发---grunt介绍_第1张图片

你不要管果是什么意思,之出现这些提示,明你的grunt-cli安装成功了。注意:我们可以在机器上同时安装多个不同版本的Gruntpackage.json)。Grunt CLI用来运行配置Gruntfile.jsGrunt

3.  

Grunt用于实际目的,所以我得有一个简单测试网站来演示grunt的安装、使用。首先,我在Documents下面建了一个“grunt_test”文件,里面建了三个空文件、两个空文档,名称如下。(注意 Gruntfile.js 文件的首字母大写!)

行如下命令:

Web的自动化开发---grunt介绍_第2张图片

录结构如下:

Web的自动化开发---grunt介绍_第3张图片

其他的西先不要管,先把package.json个文件写一些西。住,既然文件后名叫“json”,那么文件中的格式肯定是格的json格式。package.json内容如下所示,否,无法将grunt及插件信息写入package.json中的“devDependencies”package.json可以使用npm init命令来创建,过程中需要回答一些配置问题。

Web的自动化开发---grunt介绍_第4张图片

4. 安装grunt

接下来我会有一系列插件的安装,他的安装程和grunt。但是他行都是基于grunt的,因此才能把grunt叫做一个构建工具Grunt没有具体的作用,但是它能把有具体作用的一个一个插件合起来,形成一个整体效

注意里安装grunt不再是全局安装了,需要你在控制台入到网站或系的具体目下。里我们进grunt_test。然后入以下命令,npm install grunt --save-dev,执行成功,如下所示,解的是,“—save-dev”的意思是,在当前目安装grunt的同便把grunt保存为这个目的开赖项,即写入package.json中的“devDependencies”

Web的自动化开发---grunt介绍_第5张图片

在第一打开package.json去看看,那里的“devDependencies”有什么化。我里的化如下,看看你的是不是和我的一

Web的自动化开发---grunt介绍_第6张图片

然后你再看看文档目中的文件或者文件有什么里多了一个“node_modules”文件,其中有一个“grunt”文件,其中有若干文档。里就是存grunt源文件的地方。

Web的自动化开发---grunt介绍_第7张图片

在命令行运行grunt,如下所示,表示grunt个目下成功安装。

Web的自动化开发---grunt介绍_第8张图片

那么,何我grunt候会有Warning提示呢?根据提示,我得知的信息是:Task “default” not found ,如何搞定问题——我们继续往下看啊。

注意区别devDependencies和dependencies,如果你不想用devDependencies,安装的时候使用npm install –production,更多区别可以查看http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies

5. 配置gruntfile.js

Gruntfile配置文件包含4部分:

  • 一个包装(wrapper)函数
  • 项目和任务配置(grunt .initConfig)
  • 加载grunt插件及任务
  • 自定义任务

根据需要,首先将gruntfile.js如下格式:

Web的自动化开发---grunt介绍_第9张图片

,再运行grunt示如下所示,表示配置成功,但是我们并没有引入插件,继续往下行。

6. grunt插件介

grunt官网的插件列表 http://www.gruntjs.net/plugins ,我能看到grunt到目前位置的所有插件。在里面有6179个插件,个数量每天都在增加。

插件分。第一grunt队贡献的插件,些插件的名字前面都“contrib-”,而且在插件列表中有星号注。第二是第三方提供的插件,不两个特征。

Web的自动化开发---grunt介绍_第10张图片

主要用到以下插件:

  • Contrib-jshint——javascript语错误检
  • Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
  • Contrib-clean——清空文件、文件夹;
  • Contrib-uglify——压缩javascript代码
  • Contrib-copy——复制文件、文件夹
  • Contrib-concat——合并多个文件的代到一个文件中
  • karma——前端自测试工具

7. uglify插件介

Uglify插件的功能就是压缩javascript。至于javascript码压缩的必要和意里就不用在述了吧几乎每一个javascript或者框架都有一个 **.min.js 压缩版。

要安装一个插件,首先要进个插件在grunt官网的明文档面。我grunt官网插件列表面,找到“contrib-uglify”击进入。你要看里面的明,然后根据行安装。里我重点。

安装uglify插件的方式,和安装grunt是一的。如下:npm install grunt-contrib-uglify --save-dev

里又出了熟悉的“—save-dev”,具体的作用在上文安装grunt说过了,不再述。运行句命令。安装完成之后,你会看到package.json“devDependencies”点的化,以及“node_modules”文件里的化。现在还不能用,还需要在Gruntfile.js做配置。我们既然要使用uglify来压缩javascript代码,当然得创建一个js文件来做实验。我们在现有的“src”文件夹中新建一个文件夹“lib”和“utility”,分别存放“angular.js”和“test.js” 。

Web的自动化开发---grunt介绍_第11张图片

测试文件建立好了。我接下来就要把两个js文件压缩。当然,要压缩谁?往哪里压缩些都需要配置,在Gruntfile.js中配置。分三步:

第一步,在grunt.initConfig方法中配置 uglify的配置参数。如下

Web的自动化开发---grunt介绍_第12张图片

中,uglify的配置有两

  • options”中规定允许生成的压缩文件带banner,即在生成的压缩文件第一行加一句话说明。注意,其中使用到了pkg获取package.json的内容。
  • target”中配置了源文件和目标文件,即规定了压缩谁?压缩之后会生成谁?

    这里只是对“options”和“target”的基本应用,还有许多使用方式,可以去官网查阅http://gruntjs.com/configuring-tasks
    第二步,在grunt.initConfig 方法之后,要让grunt去加载这个插件。只配置,不加载,如何用那?
    Web的自动化开发---grunt介绍_第13张图片
  • 第三步,在grunt命令执行时,要不要立即执行uglify插件?如果要,就写上,否则不写。
    Web的自动化开发---grunt介绍_第14张图片
    以上说的这三步已经OK了,接下来我们去试试。在控制台中运行grunt命令,看得到什么结果。控制台将输入如下信息:
         Web的自动化开发---grunt介绍_第15张图片

再去看看,是否生成了2压缩后的js文件?angular.min.js,如下所示:

 test.min.js,如下所示:

果然。根据package.json中的nameversion生成了文件名。而且,压缩后的代banner也是符合Gruntfile.js中的配置要求的。

以上就是uglify插件的详细安装、配置明。Javascript使用uglify压缩css可使用cssmin插件压缩。安装、配置方法一的,不再述。

8. 使用watch插件(真正化)

你可能一直有一个疑,上面的插件中,每次行插件功能,都得行一遍“grunt”命令,的操作非常繁好的呢?着急,接下来就解决问题——watch插件解决问题

首先安装watch插件,如果安装不再述了。接下来要配置watch插件,配置分三个步,不再详细描述了,只贴图说明。

第一步。配置watch控哪些文件的化,以及些文件一旦化,要立即行哪些插件功能。如下watchsrc文件下所有js文件的化,一旦化,立即uglify个插件功能。

Web的自动化开发---grunt介绍_第16张图片

第二步,

第三步,

三步行完了,即watch插件配置完成。运行grunt命令,控制台提示watch开始听。此要想停止,按ctrl + c即可。

Web的自动化开发---grunt介绍_第17张图片

既然在听,我们试听有没有效。我 test.js 码进行修改,示,watch到了test.js文件的化,并重新压缩test.js

Web的自动化开发---grunt介绍_第18张图片

                        

 

你可能感兴趣的:(grunt)