Day 5: GruntJS——重复乏味的工作总会有人做(反正我不做)
来源:互联网 发布:sql语句怎么打印空格 编辑:程序博客网 时间:2024/03/29 06:45
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,我们需要将其作为应用的开发依赖安装。grunt
和grunt-cli
的分离确保每个团队的成员使用同一版本的grunt task runner。
2. GruntJS Task Runner
grunk
命令会调用Grunt task runner。我们需要将其作为应用的开发依赖安装。让我们先开一个目录,放置我们的博客应用示例。
mkdir blogcd blog
上面已经提到,Grunt要作为应用的开发依赖安装。所以我们需要创建一个定义应用元信息的package.json
文件。运行npm init
命令,回答一些问题即可创建package.json
文件
$ npm initname: (blog) version: (0.0.0) description: My awesome blogentry 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
文件。由于我们不需要 main
、scripts
、author
和license
这些项目,我们可以删掉它们。现在我们有了一个最简单的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-uglify
和grunt-markdown
。完整的插件列表在此。
Gruntfile
现在我们该告诉 GruntJS 该做哪些任务了。如果我们在blog
目录中运行grunt
命令,我们会看到如下的错误信息:
$ gruntA valid Gruntfile could not be found. Please see the getting started guide formore information on how to configure grunt: http://gruntjs.com/getting-startedFatal 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
文件有两个简单的方法hello
和bye
。
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']);};
上面的代码做了这些事:
- 我们配置了
uglify
任务,指定了源文件和目标文件。 - 接着我们加载了
grunt-contrib-uglify
插件。在运行grunt
命令之前,确保插件已经安装。所有的grunt插件都可以通过npm
安装。 - 最后,我们将这个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
命令,这次我们将看到成功的信息。
$ gruntRunning "uglify:build" (uglify) taskFile "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天。目前为止我很享受,从周围的开发者那里也获得了很好的反响。整个系列的列表在此。
原文 Day 5: GruntJS--Let Someone Else Do My Tedious Repetitive Tasks
翻译 SegmentFault
- Day 5: GruntJS——重复乏味的工作总会有人做(反正我不做)
- 直销你不做,他不做,总有人会做!在中国什么都缺、但往往不缺的就是人 !
- 【「反正你会帮我做!」—谈孩子的…
- 重复的工作用心做,我就会成为专家
- 你不做自然会有人替你做,你不努力自然有人在努力
- 为了工作的编程,我感到,真真切切的乏味.....
- 总有人给我突如其来的感动....
- 我们是不怕困难的,我相信有人会比我做得更好
- 英雄会“单词博弈”最快的解?(别信,反正我没得奖)
- 心得:如果有人工作做的不好
- 【读书笔记】有些事现在不做——一辈子也不会做了
- 计算Cell高度的注意事项(我总会出错)
- 我知道,没有人会在意我的一切
- 我知道,没有人会在意我的一切
- 我知道,没有人会在意我的一切
- 我知道,没有人会在意我的一切
- 我知道,没有人会在意我的一切
- 产品设计体会(三)——性价比:做不做?
- Android JNI开发之c语言调用java方法
- #if 和#ifdef的区别
- 拥抱高效、拥抱 Bugtags 之来自用户的声音 2
- android平台上开发定位器(SMS+GPS)
- SEO初级篇(关键字的使用)
- Day 5: GruntJS——重复乏味的工作总会有人做(反正我不做)
- js省市二级下拉联动
- 基于Android手机开发平台的移动数字图书馆服务系统研究
- Scala微服务架构
- 关于scanf、sscanf和sscanf_s
- 全球定位系统在移动上的应用
- Android Geocoder异常现象
- 插入排序 C++实现
- android应用登录模块访问mysql数据库小记