GruntJS 是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作。你可以把它看成是JavaScript下的Make或者Ant。它可以完成诸如精简、编译、单元测试、lint检查等工作。由于越来越多的开发移到了客户端,帮助开发者更高效地工作的工具就更有用了。本文中,我将展示我如何使用GruntJS来精简javascript文件。我们也将使用GruntJS的markdown插件来将markdown文档转换为HTML5文档。让我们开始吧!

为什么开发者要关心GruntJS?

主要的原因是开发者经常寻找自动化日常任务的方法,这有助于将出错的几率降到最低。手工从事重复无聊的任务的时候,我们很容易犯错。

GruntJS依赖

GruntJS要求 NodeJS 0.8.0以上版本。我们将使用 npm 包管理器来安装 GruntJS 和它的插件。新版的NodeJS默认包含 NPM 包管理器。可从官网下载最新版的 NodeJS。

GruntJS起步

在开始之前,我们需要理解Grunt的三大主要组成部分:

1. GruntJS CLI

GruntJS提供了GruntJS命令行工具。下面会提到安装 GruntJS CLI 的命令。如果你在安装时遇到错误信息,那么你可能需要 sudo 权限来运行这个命令。

npm install grunt-cli -g

上面的命令将全局安装 grunt-cli 包,这样在任何目录下都可以调用grunt命令。GruntJS CLI不包括grunt task runner。要使用 grunt task runner,我们需要将其作为应用的开发依赖安装。gruntgrunt-cli的分离确保每个团队的成员使用同一版本的grunt task runner。

2. GruntJS Task Runner

grunk命令会调用Grunt task runner。我们需要将其作为应用的开发依赖安装。让我们先开一个目录,放置我们的博客应用示例。

mkdir blog
cd blog

上面已经提到,Grunt要作为应用的开发依赖安装。所以我们需要创建一个定义应用元信息的package.json文件。运行npm init命令,回答一些问题即可创建package.json文件

$ npm init
name: (blog)
version: (0.0.0)
description: My awesome blog
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (BSD-2-Clause)
About to write to /Users/shekhargulati/blog/package.json:
{
  "name": "blog",
  "version": "0.0.0",
  "description": "My awesome blog",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}
Is this ok? (yes)
Shekhars-MacBook-Pro:blog shekhargulati$

完成这一步之后,init命令会为我们创建 package.json 文件。由于我们不需要 mainscriptsauthorlicense这些项目,我们可以删掉它们。现在我们有了一个最简单的 package.json 文件。

{
  "name": "blog",
  "version": "0.0.0",
  "description": "My awesome blog"
}

运行下面的命令将Grunt安装到本地:

npm install grunt --save-dev

上面的命令将安装所需的依赖,同时也会更新 package.json

{
  "name": "blog",
  "version": "0.0.0",
  "description": "My awesome blog",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

3. Grunt Plugins

GruntJS有一个良好的插件体系,我们需要的大多数任务都有相应的插件加以处理。GruntJS的插件可以用npm安装。在这篇文章中,我们将使用两个插件——grunt-contrib-uglifygrunt-markdown。完整的插件列表在此

Gruntfile

现在我们该告诉 GruntJS 该做哪些任务了。如果我们在blog目录中运行grunt命令,我们会看到如下的错误信息:

$ grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

为了使用Grunt,我们需要创建一个名为Gruntfile.js的文件。Gruntfile指定grunt需要执行的任务。这个文件包含了构建脚本。

blog目录下创建一个新文件,起名为 Gruntfile.js,加入下列代码:

module.exports = function(grunt){

};

这是我们开始使用Gruntfile所需的样板。

接着我们需要配置grunt需要执行的任务。我们调用grunt的initConfig函数,将配置对象传递给它。目前,配置对象是空白的。

module.exports = function(grunt){
    grunt.initConfig({

    })
};

精简

我们要执行的第一项任务是精简应用中的javascript文件。在blog目录中创建一个js文件夹,然后创建一个名为app.js的新文件。

$ mkdir js
$ cd js
$ touch app.js

在文本编辑器中打开app.js,在其中加入如下内容。app.js文件有两个简单的方法hellobye

function hello(name){
    return "Hello, " + name;
}
function bye(name){
    return "Bye, " + name;
}

现在我们在grunt配置对象中添加uglify任务。

module.exports = function(grunt) {

  grunt.initConfig({
    uglify: {
      build: {
        src: ['js/app.js'],
        dest: 'js/app.min.js'
      }
    }

  });

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

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

上面的代码做了这些事:

  1. 我们配置了uglify任务,指定了源文件和目标文件。
  2. 接着我们加载了grunt-contrib-uglify插件。在运行grunt命令之前,确保插件已经安装。所有的grunt插件都可以通过npm安装。
  3. 最后,我们将这个uglify任务注册为我们的默认任务。当我们未指定任务名称而直接运行grunt命令的时候,Grunt将调用默认任务。

如果我们运行grunt命令,我们会碰到下面的信息:

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.

Aborted due to warnings.

运行下面的命令安装grunt-contrib-uglify插件。

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

然后再次运行grunt命令,这次我们将看到成功的信息。

$ grunt
Running "uglify:build" (uglify) task
File "js/app.min.js" created.

Done, without errors.

它成功地创建了app.min.js文件。app.min.js如下所示,所有的空格被删除了,函数的参数被重构为单一字母,整个文件被压缩成一行。

function hello(a){return"Hello, "+a}function bye(a){return"Bye, "+a}

今天是我的《30天学习30种新技术》挑战的第4天。目前为止我很享受,从周围的开发者那里也获得了很好的反响。整个系列的列表在此


最新文章

  1. iOS---iOS9搜索功能
  2. Why is HttpContext.Current null after await?
  3. c基础回顾
  4. Java基础知识学习(一)
  5. jq实现登陆页面的拖拽功能
  6. 悟透Javascript undefined,null,"",0这四个值转换为逻辑值时就是false &this关键字
  7. MFC中菜单栏使用
  8. 关于cocopads 不能正确安装的问题
  9. [LeetCode] 21. Merge Two Sorted Lists 解题思路
  10. Redis 入门之编译安装
  11. 读 Working with forms 一些心得
  12. SQL语句详细汇总
  13. 200行Py代码带你实现"打飞机"
  14. 【译】索引进阶(六):SQL SERVER索引书签
  15. c++入门之引用
  16. CentOS7 下面安装jdk1.8
  17. 题解-Codeforces710F String Set Queries
  18. JAVA二分搜索树
  19. Power Query Advanced Editor键盘快捷键
  20. python 批量替换文件名

热门文章

  1. jQuery入门(3)事件与事件对象
  2. 开发问题(C#)
  3. oracle删除数据恢复
  4. [转载]ODAC (odp.net) 开发到部署
  5. 【数论】UVa 10586 - Polynomial Remains
  6. wuzhi 五指 基本知识
  7. 在dotnet core web api中支持CORS(跨域访问)
  8. C语言程序设计(基础)- 第2周作业
  9. Linux知识要点大全(第四章)
  10. mysql 盲注二分法python脚本
  11. OPC协议解析-OPC客户端与服务器通讯解析
  12. Oracle获取当前年、月、日的方法
  13. C语言之标准源文件模板
  14. Paper | Contrast Limited Adaptive Histogram Equalization
  15. 【Tomcat】详解tomcat的连接数与线程池
  16. 在 OC 中调用 Swift 代码
  17. HDU4185(KB10-G 二分图最大匹配)
  18. C#/Net定时导出Excel并定时发送到邮箱
  19. Intel Edison学习笔记(二)—— 入门环境配置
  20. Xcode 7.3 cannot create __weak reference in file using manual reference counting