Grunt快速入门

Grunt是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作。你可以把它看成是JavaScript下的Make或者Ant。它可以完成诸如精简、编译、单元测试、lint检查等工作。

Grunt的三大主要组成部分:

  • Grunt CLI
  • Grunt Task Runner
  • Grunt Plugins

Grunt CLI

安装:

npm install grunt-cli -g

上面的命令将全局安装 grunt-cli 包,这样在任何目录下都可以调用grunt命令。Grunt CLI不包括grunt task runner。

要使用 grunt task runner,我们需要将其作为应用的开发依赖安装。grunt和grunt-cli的分离确保每个团队的成员使用同一版本的grunt task runner。

Grunt Task Runner

grunt命令会调用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) 

完成这一步之后,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"
  }
}

Grunt Plugins

Grunt有一个良好的插件体系,我们需要的大多数任务都有相应的插件加以处理。Grunt的插件可以用npm安装。这里我们将使用插件——grunt-contrib-uglify。

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({

    })  
};
压缩JS

我们要执行的第一项任务是压缩应用中的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将调用默认任务。

特定项目的任务不必在Gruntfile中定义。他们可以定义在外部.js文件中,并通过grunt.loadTasks 方法加载。

如果我们运行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}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go语言的网络编程简介

本文通过 Go 语言写几个简单的通信示例,从 TCP 服务器过渡到 HTTP 开发,从而简单介绍 net 包的运用。 TCP 服务器 首先来看一个 TCP 服务...

37715
来自专栏CRPER折腾记

React 折腾记 - (5) 记录用React开发项目过程遇到的问题(Webpack4/React16/antd等)

技术栈: react@16.6.0/ react-router-dom@v4 / webpack^4.23.1(babel7+)

2352
来自专栏静默虚空的博客

JAVA 设计模式 命令模式

用途 命令模式 (Command) 将一个请求封装为一个对象,从而使你可以用不同的请求对客户进行参数化; 对请求排队或请求日志,以及支持可撤销的操作。 命令模...

2046
来自专栏Golang语言社区

Go语言的网络编程简介

本文通过 Go 语言写几个简单的通信示例,从 TCP 服务器过渡到 HTTP 开发,从而简单介绍 net 包的运用。 TCP 服务器 首先来看一个 TCP 服务...

4527
来自专栏Java3y

【Java】留下没有基础眼泪的面试题

使用多线程时,不是多线程能提升程序的执行速度,使用多线程是为了更好地利用CPU资源!

1682
来自专栏Golang语言社区

package http

要管理代理、TLS配置、keep-alive、压缩和其他设置,创建一个Transport:

2294
来自专栏Janti

基础巩固——长连接 、短连接、心跳机制与断线重连

本文将从长连接和短连接的概念切入,再到长连接与短连接的区别,以及应用场景,引出心跳机制和断线重连,给出代码实现。

4061
来自专栏python3

bs4爬虫实战二:获取双色球中奖信息

访问双色球网站:http://www.zhcw.com/ssq/kaijiangshuju/index.shtml?type=0

1172
来自专栏向前进

vue-cli脚手架npm相关文件解读(4)utils.js

系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

3286
来自专栏hotqin888的专栏

beego操作session

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1251

扫码关注云+社区

领取腾讯云代金券