Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。老版本的 Node.js 被认为是不稳定的开发版。之前,在用grunt来合并文件时,老是报错,原因是node.js的版本太低了。

在安装grunt之前,你需要先将Grunt命令行(CLI)安装到全局环境中。

npm install -g grunt-cli

上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。

注意,安装了grunt-cli并不等于安装了 Grunt!

Grunt CLI的任务很简单:调用与Gruntfile文件在同一目录中的Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。这样就能让多个版本的 Grunt 同时安装在同一台机器上。

Grunt CLI的运行原理:每次运行grunt 时,Grunt CLI就利用node提供的require(),去系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt 。如果找到一份本地安装的 Grunt,CLI就将其加载,并传递Gruntfile中的配置信息,然后执行你所指定的任务。

如何打造一个 Grunt 项目?

一般需要在你的项目中添加两份文件:package.json 和 Gruntfile。

package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。

package.json应当放置于项目的根目录中,与Gruntfile在同一目录中,并且应该与项目的源代码一起被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。

下面列出了几种为你的项目创建package.json文件的方式:

大部分 grunt-init 模版都会自动创建特定于项目的package.json文件。
npm init命令会创建一个基本的package.json文件。
复制下面的例子,并根据需要做扩充。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

向已经存在的package.json 文件中,添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。此命令不光安装了<module>,还会自动将其添加到package.json 文件的devDependencies 配置段中。

例如,下面这条命令将安装Grunt最新版本到项目目录中,并将其添加到devDependencies内:

npm install grunt --save-dev
同样,grunt插件和其它node模块都可以按相同的方式安装。安装完成后一定要记得把被修改的package.json文件提交到源码管理器中。

Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件,应当放在你的项目根目录中,和package.json文件在同一目录层级,并和项目源码一起加入源码管理器。

Gruntfile由以下几部分构成:

(1)包装函数
(2)项目与任务配置
(3)加载grunt插件和任务
(4)自定义任务

举个例子:

module.exports = function(grunt) {
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});
// 加载包含 "uglify" 任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify']);
};

每一份 Gruntfile 都遵循同样的格式,你所书写的Grunt代码必须放在此包装函数内:

module.exports = function(grunt) {
  // Do grunt-related things in here
};

大部分的Grunt任务都依赖某些配置数据,这些数据被定义在一个json对象内,并传递给grunt.initConfig 方法中。

在上面的例子中,grunt.file.readJSON('package.json') 方法会把存储在package.json文件中的JSON元数据引入到grunt config中。

由于<% %>模板字符串可以引用任意的配置属性,因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据,从而减少一些重复的工作。

你可以在这个配置对象中(传递给initConfig()方法的对象)存储任意的数据,只要它不与你任务配置所需的属性冲突,否则会被忽略。

此外,由于这本身就是JavaScript代码,所以你不仅可以使用JSON对象,你也可以在这里使用任意有效的JS代码。如果有必要,你甚至可以以编程的方式生成配置。

与大多数task一样,grunt-contrib-uglify 插件中的uglify 任务要求它的配置被指定在一个同名属性中。

在这个例子中, 我们指定了一个banner选项(用于在文件顶部生成一个注释),紧接着是一个单一的名为build的uglify目标,用于将一个js文件压缩为一个目标文件。

像 concatenation、[minification]、grunt-contrib-uglify 和 linting这些常用的任务(task)都已经以grunt插件的形式被开发出来了。只要在 package.json 文件中被列为dependency(依赖)的包,并通过npm install安装之后,都可以在Gruntfile中以简单命令的形式使用:grunt.loadNpmTasks('grunt-contrib-uglify');

注意: grunt --help 命令将列出所有可用的任务。

通过定义 default 任务,可以让Grunt默认执行一个或多个任务。在上面的例子中,执行 grunt 命令时如果不指定一个任务的话,将会执行uglify任务。这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务(可以带参数)。grunt.registerTask('default', ['uglify']);

如果Grunt插件中的任务(task)不能满足你的项目需求,你还可以在Gruntfile中自定义任务(task)。例如,在下面的 Gruntfile 中自定义了一个default 任务,并且他甚至不依赖任务配置:

module.exports = function(grunt) {

  grunt.registerTask('default', 'Log some stuff.'  ,  function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

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

在上面列出的这个 Gruntfile 中,package.json文件中的项目元数据(metadata)被导入到 Grunt 配置中, grunt-contrib-uglify 插件中的uglify 任务(task)被配置为压缩源码文件,并依据上述元数据动态生成一个文件头注释。当在命令行中执行 grunt 命令时,uglify 任务将被默认执行。

加油!

grunt入门讲解1:grunt的基本概念和使用的更多相关文章

  1. grunt入门讲解2:如何使用 Gruntfile 配置任务

    Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的.此配置主要包括以任务名称命名的属性,和其他任意数据.一旦这些代表任意数据的属性与任务所需要的属性相 ...

  2. grunt入门讲解7:项目脚手架grunt-init

    grunt-init是一个用于自动创建项目脚手架的工具.它会基于当前工作环境和你给出的一些配置选项构建一个完整的目录结构.至于其所生成的具体文件和内容,依赖于你所选择的模版和构建过程中你对具体信息所给 ...

  3. grunt入门讲解4:如何创建task(任务)

    每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情. 如果你没有指定一个任务,并且你已经定义一个名为 "default" 的任务, ...

  4. grunt入门讲解6:grunt使用步骤和总结

    Grunt是啥? 很火的前端自动化小工具,基于任务的命令行构建工具. Grunt能帮我们干啥? 假设有这样一个场景: 编码完成后,你需要做以下工作 HTML去掉注析.换行符 - HtmlMin CSS ...

  5. grunt入门讲解3:实例讲解使用 Gruntfile 配置任务

    这个Gruntfile 实例使用到了5个 Grunt 插件: grunt-contrib-uglify      grunt-contrib-qunitgrunt-contrib-concatgrun ...

  6. grunt入门讲解5:创建插件,安装Grunt以及常见问题

    创建插件 创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.co ...

  7. AngularJS入门讲解1:angular基本概念

    AngularJS应用程序主要有三个组成部分: 模板(Templates) 模板是您用HTML和CSS编写的文件,展现应用的视图. 您可给HTML添加新的元素.属性标记,作为AngularJS编译器的 ...

  8. Grunt 入门

    转自:http://user.qzone.qq.com/174629171/blog/1404433906 Grunt被定义为:the javascript task runner. 什么算是Java ...

  9. Grunt入门学习之(1) -- 环境安装

    Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应 ...

随机推荐

  1. swift的类型推断

    类型推断的前提是有待定类型和上下文. 1.由定义推断实现的类型: 2.由赋值推断声明的类型: 3.由实现推断泛型的类型: Type inference refers to the automatic ...

  2. Algorithms: 二叉平衡树(AVL)

    二叉平衡树(AVL):   这个数据结构我在三月份学数据结构结构的时候遇到过.但当时没调通.也就没写下来.前几天要用的时候给调好了!详细AVL是什么,我就不介绍了,维基百科都有.  后面两月又要忙了. ...

  3. 【转】网络安全——一图看懂HTTPS建立过程

    阅读目录 准备工作(对应图中prepare1234) 发起链接 最后 关于网络安全加密的介绍可以看之前文章: 1. 网络安全——数据的加密与签名,RSA介绍2. Base64编码.MD5.SHA1-S ...

  4. shiro实战系列(十五)之Spring集成Shiro

    Shiro 的 JavaBean 兼容性使得它非常适合通过 Spring XML 或其他基于 Spring 的配置机制.Shiro 应用程序需要一个具 有单例 SecurityManager 实例的应 ...

  5. Kubernetes1.91(K8s)安装部署过程(七)--coredns安装

    为了是集群内的服务能使用dns进行服务解析,集群内需要使用dns服务器,可以按照kube官方dns,即kubedns或者其他的dns,比如coredns, 本例中按照的为coredns,按照简单,编辑 ...

  6. Tornado框架实现异步爬虫

    from urllib.parse import urljoin from bs4 import BeautifulSoup from tornado import gen, httpclient, ...

  7. python面试一:python2与python3的区别一

    1.默认编码方式不同:py3用的是utf-8,变量名更为广泛.2.去除<>改用!=3加入as 和with关键字4./除法默认数据类型不同 py2 5/3=1 py3 5//3=15.去掉了 ...

  8. windows/Linux动态加载链接库问题

    windows: LoadLibraryA 指定的可执行模块映射到调用进程的地址空间并返回该 DLL 的句柄 HMODULE LoadLibraryA( LPCTSTR lpLibFileName// ...

  9. JSON无限折叠菜单编写

    最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上 ...

  10. 20155331《网路对抗》Exp8 WEB基础实践

    20155331<网路对抗>Exp8 WEB基础实践 基础问题回答 什么是表单 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签,这里面包含了处理表单数据所用CGI ...