Day 5: GruntJS——重复乏味的工作总会有人做(反正我不做)
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 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
文件。由于我们不需要 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
命令,我们会看到如下的错误信息:
$ 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
文件有两个简单的方法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
命令,这次我们将看到成功的信息。
$ 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天。目前为止我很享受,从周围的开发者那里也获得了很好的反响。整个系列的列表在此。
原文 Day 5: GruntJS--Let Someone Else Do My Tedious Repetitive Tasks
翻译 SegmentFault
Day 5: GruntJS——重复乏味的工作总会有人做(反正我不做)相关推荐
- 第六十五期:央行万字工作论文:区块链能做什么、不能做什么?
本文从经济学角度研究了区块链的功能.首先,在给出区块链技术的经济学解释的基础上,归纳出目前主流区块链系统采取的"Token 范式",厘清与区块链有关的共识和信任这两个基础概念,并梳 ...
- 学历低,无法胜任工作,大佬告诉你应该怎么做
微信上收到一位读者小涛的留言,大致的意思是自己只有高中学历,经过培训后找到了一份工作,但很难胜任,考虑要不要辞职找一份他能力可以胜任的实习工作.下面是他留言的一部分内容: 二哥,我是 2016 年高中 ...
- 央行工作论文:区块链能做什么、不能做什么?
央行网站公布最近工作论文,徐忠和邹传伟在论文中表示,目前真正落地并产生社会效益的区块链项目很少,除了区块链物理性能不高以外,区块链经济功能的短板也是重要原因. 不要夸大或迷信区块链的功能,区块链应用要 ...
- 市政管网检测机器人收费标准_管道无损CCTV检测:复杂的地下管网工作,其实可以交给机器人来做...
积极引进先进设备推动发展生产力.城市地下管道的"手术修复"专家,管道无损CCTV内窥检测:复杂的地下管网工作,其实可以交给机器人来做 复杂的地下管网工作,其实可以交给机器人来做 C ...
- 困难时拉你一把的图片_在你遇到的困难时,总会有人拉你一把、你命中有这样的贵人吗?...
人在坎坷不平的一生中.总会遇到一些难办的事.难以逾越的坎,却有些人遇到难事就会有人帮,在危难时总会有人拉他一把.这就是命运中所说的贵人.贵人.驿马.桃花.羊刃等神煞.为用神生旺的吉.弱而受制的凶. 1 ...
- 爬取《政府工作报告》词云展示并做词频统计
爬取<政府工作报告>词云展示并做词频统计 爬取<政府工作报告内容代码: from requests import * from bs4 import BeautifulSoup r= ...
- 百度/谷歌/360/搜狗等大型搜索引擎提交入口,做完网站必须做的工作
百度/谷歌/360/搜狗等大型搜索引擎提交入口,做完网站必须做的工作 百度搜索网站登录口:http://www.baidu.com/search/url_submit.htm 百度单个网页提交入口:h ...
- 大环境不好难找工作?三面阿里,幸好做足了准备,已拿offer
大环境不好难找工作?三面阿里,幸好做足了准备,已拿offer 三面大概九十分钟,问的东西很全面,需要做充足准备,就是除了概念以外问的有点懵逼了(呜呜呜).回来之后把这些题目做了一个分类并整理出答案(强 ...
- elasticsearch 根据条件去除重复值_Excel工作表中的条件格式,不只是查找重复值,还有7种典型用法...
Excel工作表中的[条件格式],对于大部分亲来说并不陌生,用的最多的应该是标识"重复值"或"唯一值",其实还有数据可视化等多种功能-- 一.Excel条件格式 ...
最新文章
- 如何写新的C++ OP
- 【java基础】POJO和JavaBean的区别
- 3月28日云栖精选夜读:小程序,会是下一个创业风口吗?
- 如何在软件中实现多camera模组的兼容
- 通过随机数生成兑换码和概率生成随机数
- Highcharts隐藏网格线
- 867. 分解质因数
- 一线数分师天天被喷不值钱,数据分析师如何“刷存在感”?
- 高光谱地物识别练习-从ENVI标准波普库中选择端元进行物质识别
- 面试官:MyBatis的SQL执行流程说这么详细,网上抄的吧!
- JDBC作用接口和创建的步骤详细解析
- hikaricp mysql_HikariCP数据库连接池
- 百度网盘python客户端——筑梦之路
- 如何从任意页开始设置页码
- 选择第K大元素(快排、快选以及k-选取比较)
- 记一些Linux/centos的基础运维命令
- 企业研发人员配备比例_如何理解高新技术企业认定对研发人员比例的要求
- 使用luckysheet实现excel导入导出
- 火狐浏览器firefox检测不到U盾证书
- 【大学生数学竞赛】公式大全(补充中)
热门文章
- 极大似然估计的朴素理解
- java 自定义validate_Golang-03 自定义validator,实现java注解功能-Go语言中文社区
- SpringBoot - 子模块下spring-boot-configuration-processor不生效问题
- Apache Kafka-生产消费基础篇
- 4.通过三个交换机实现VLAN间通信
- python编程16章_Python核心编程——Chapter16
- Java实现按名称、日期、大小对文件进行排序
- spark 不同模式用途_Spark中那些常用的特征处理操作
- vue中 .sync 修饰符 个人理解
- c语言数码管编写程序,跪求单片机0~99数码管显示用C语言编写的程序