好文推荐系列--------(2)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}
好文推荐系列--------(2)GruntJS——重复乏味的工作总会有人做(反正我不做)的更多相关文章
- 好文推荐系列--------(3)GruntJS 在线重载 提升生产率至新境界
好文原文地址:http://segmentfault.com/a/1190000000354555 本文将首先介绍grunt-markdown插件如何配合HTML模板使用,接着我将介绍如何使用grun ...
- 好文推荐系列---------(4)使用Yeoman自动构建Ember项目
好文原文地址:http://segmentfault.com/a/1190000000368881 我决定学习前端开发的效率工具Yeoman.本文将首先介绍Yeoman的基本情况,接着我们会使用Yeo ...
- 好文推荐系列--------(1)bower---管理你的客户端依赖
好文原文地址:http://segmentfault.com/a/1190000000349555 编者注:我们发现了比较有趣的系列文章<30天学习30种新技术>,准备翻译,一天一篇更新, ...
- 好文推荐系列-------(5)js模块化编程
本文主要来源于阮一峰的<Javascript模块化编程>系列文章整合,原文地址:http://www.ruanyifeng.com/blog/2012/10/javascript_modu ...
- 好文推荐系列---------JS模板引擎
这篇文章写的很清晰,不再赘述,直接上链接:http://www.tuicool.com/articles/aiaqMn
- SAE Python使用经验 好文推荐
SAE Python使用经验 好文推荐 SAE Python使用经验 好文推荐
- noip推荐系列:遥控车[字符串+高精+二分答案]
[问题描述] 平平带着韵韵来到了游乐园,看到了n辆漂亮的遥控车,每辆车上都有一个唯一的名字name[i].韵韵早就迫不及待地想玩名字是s的遥控车.可是韵韵毕竟还小,她想象的名字可能是一辆车名字的前缀( ...
- 【好文推荐】黑莓OS手册是如何详细阐述底层的进程和线程模型的?
「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...
- 【FICO系列】SAP FICO折旧记账时出现错误:没有找到与所做选择一致的数据
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP FICO折旧记账时出现错 ...
随机推荐
- 26-算法训练 Torry的困惑(基本型) 素数打表
算法训练 Torry的困惑(基本型) 时间限制:1.0s 内存限制:512.0MB 问题描述 Torry从小喜爱数学.一天,老师告诉他,像2.3.5.7……这样的数叫做质数.To ...
- 工作中用Git对项目进行管理
前言 之前一直是用svn来管理代码的,今天第一次用git来管理代码,从安装.上传代码过程中遇到了很多问题,Github中建的repository之前还是https协议,最后不知道怎么又变成了git协议 ...
- mysql备份数据库出错mysqldump: [ERROR] unknown option '--no-beep'
公司数据库前一版本是部署在windows上面的,由于业务需要,迁移到linux,之前一段脚本在windows下使用定时任务执行正常. mysqldump -uzzz -pxxxx --opt --de ...
- pyton random 模块
import random print(random.random())#(0,1)----float 大于0且小于1之间的小数 print(random.randint(1,3)) #[1,3] 大 ...
- Linux移植之配置过程分析
在Linux移植之移植步骤中已经将Linux移植的过程罗列出来了,现在分析一下Linux的配置过程,将分析以下两个配置过程: 1.make s3c2410_defconfig分析 2.make men ...
- c# 运行大运算程序主窗体卡掉的解决
写了一个运算过滤大文本的程序, 其中方法里边使用了多线程,并行线程等方法. 但主窗体控件直接使用此方法时,页面卡顿.所以主线程被堵塞. 代码如下, splitfile 这个方法运行时页面卡顿,阻塞了 ...
- 分析入口文件main.php
在分析之前,需要了解php cli模式下的编程 1.了解getopt函数,php手册地址:http://php.net/manual/zh/function.getopt.php static pri ...
- linux查看文件被哪个进程占用?
1> 如果文件是端口号 netstat -ntlp | grep portNum [root@localhost root]# netstat -ntlp Active Internet con ...
- invalid END header解决方法
我在Windows上的eclipse开发了一个java web项目,然后压缩成war包,通过ftp发送到Linux服务器上,Tomcat先shutdown,再startup.按理说,会在webapps ...
- 如何用xx-net上youtube
1.下载https://github.com/XX-net/XX-Net/blob/master/code/default/download.md 里面的稳定版本 2.下载chrome.百度chr ...