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

这个Gruntfile 实例使用到了5个 Grunt 插件:

grunt-contrib-uglify

grunt-contrib-qunit

grunt-contrib-concat

grunt-contrib-jshint

grunt-contrib-watch

上面的uglify,concat,watch这三个插件用的最多,第一个插件是用来压缩文件的,第二个插件是用来合并文件的,第三个插件用来监听文件内容的,如果文件内容改变了,就会触发回调方法进行相应的处理。

我们一步一步来讲解这个 Gruntfile 实例。

首先是 "wrapper" 函数,它包含了整个Grunt配置信息。

module.exports = function(grunt) { }

在这个函数中,我们可以初始化 configuration 对象:

grunt.initConfig({ });

接下来从package.json 文件读入项目配置信息,并存入pkg 属性内。这样我们就可以访问到package.json文件中列出的属性了,如下:

pkg: grunt.file.readJSON(‘package.json‘)

到目前为止我们就可以看到如下配置:

module.exports = function(grunt) {

  grunt.initConfig({

    pkg: grunt.file.readJSON(‘package.json‘)

  });

};

接下来我们就可以为我们的每个任务来定义相应的配置了,每个任务的配置对象作为Grunt配置对象的属性,并且这个属性名称与任务名相同。因此"concat"任务就是我们的配置对象中的"concat"属性。下面便是我的"concat"任务的配置对象。

concat: {

  options: {

    // 定义一个用于插入合并输出文件之间的字符

    separator: ‘;‘

  },

  dist: {

    // 将要被合并的文件

    src: [‘src/**/*.js‘],

    // 合并后的JS文件的存放位置

    dest: ‘dist/<%= pkg.name %>.js‘

  }

}

这里使用了pkg.name来访问我们刚才引入并存储在pkg属性中的package.json文件信息,它会被解析为一个JavaScript对象。Grunt自带的有一个简单的模板引擎用于输出配置对象(这里是指package.json中的配置对象),这里我让concat任务将所有存在于src/目录下以.js结尾的文件合并起来,然后存储在dist目录中,并以项目名来命名。

现在我们来配置uglify插件,它的作用是压缩JavaScript文件:

uglify: {

  options: {

    // 此处定义的banner注释将插入到输出文件的顶部

    banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n‘

  },

  dist: {

    files: {

      ‘dist/<%= pkg.name %>.min.js‘: [‘<%= concat.dist.dest %>‘]

    }

  }

}

这里我们让uglify在dist/目录中创建了一个包含压缩结果的JavaScript文件。注意这里我使用了<%= concat.dist.dest>,因此uglify会自动压缩concat任务中生成的文件。

QUnit插件的设置非常简单,你只需要给它提供用于测试运行的文件的位置,注意这里的QUnit是运行在HTML文件上的。

qunit: {

  files: [‘test/**/*.html‘]

},

时间: 2024-08-11 03:46:08

grunt入门讲解3:实例讲解使用 Gruntfile 配置任务的相关文章

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

Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的.此配置主要包括以任务名称命名的属性,和其他任意数据.一旦这些代表任意数据的属性与任务所需要的属性相冲突,就将被忽略. 举个例子: grunt.initConfig({ concat: { // 这里是concat任务的配置信息. }, uglify: { // 这里是uglify任务的配置信息 }, // 任意数据. my_property: 'whatever', my_src_files:

[转帖]linux常用命令大全(linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习)

https://www.cnblogs.com/caozy/p/9261224.html 总结的挺好的 我之前想总结 一直懒 这次国庆加班 也本来计划来着 感冒了 作罢 .. 作者:蓝藻(罗蓝国度) 创建时间:2018.7.3编辑时间:2019.7.16 前言 本文特点 授之以渔:了解命令学习方法.用途:不再死记硬背,拒绝漫无目的: 准确无误:所有命令执行通过(环境为centos7),拒绝复制粘贴: 实用性高:命令多为实际工作中用到的,实例讲解,拒绝纯理论: 条理清晰:分类归纳,快速找到想要的命

Java入门系列:实例讲解ArrayList用法

本文通过实例讲解Java中如何使用ArrayList类. Java.util.ArrayList类是一个动态数组类型,也就是说,ArrayList对象既有数组的特征,也有链表的特征.可以随时从链表中添加或删除一个元素.ArrayList实现了List接口. 大家知道,数组是静态的,数组被初始化之后,数组长度就不能再改变了.ArrayList是可以动态改变大小的.那么,什么时候使用Array(数组),什么时候使用ArrayList?答案是:当我们不知道到底有多少个数据元素的时候,就可使用Array

Express入门介绍vs实例讲解

下午在团队内部分享了express相关介绍,以及基于express的实例.内容提纲如下. 什么是Express 为什么要用Express 路由规则 一切皆中间件 实例:Combo Application ppt已经上传到slider share,地址传送:http://www.slideshare.net/chyingp/express-47368889 原来需要200字, 原来需要200字, 原来需要200字, 原来需要200字, 原来需要200字, 原来需要200字, 原来需要200字, 原

Dubbo入门基础与实例讲解(转)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点.Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 一.Dubbo简介 1.1.Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用

Dubbo入门基础与实例讲解

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点.Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 一.Dubbo简介 1.1.Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用

OSGI入门实例讲解(一)

开放服务网关倡议(OSGi)定义了开发和部署模块应用程序和库的体系结构.作为介绍OSGi的第一篇文章,本文旨在让你了解OSGi开发的一些概念,并向你展示了如何使用Eclipse的OSGi容器(Equinox)实现建立一个简单的Hello World应用.此外还简要介绍了使用OSGi构建面向服务的应用程序以及OSGi的servicefactory和servicetracker类. OSGI(Open Services Gateway Initiative),也叫JAVA动态模块系统,定义了一套模块

TCP入门与实例讲解

内容简介 TCP是TCP/IP协议栈的核心组成之一,对开发者来说,学习.掌握TCP非常重要. 本文主要内容包括:什么是TCP,为什么要学习TCP,TCP协议格式,通过实例讲解TCP的生命周期(建立连接.传输数据.断开连接) TCP简介 传输层控制协议(Transport Control Protocol),TCP/IP协议栈的核心之一.位于应用层与网络层之间,提供面向连接的.可靠的字节流服务. 记住关键词"面向连接"."可靠"."字节流",这是学

【智能算法】粒子群算法(Particle Swarm Optimization)超详细解析+入门代码实例讲解

喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 01 算法起源 粒子群优化算法(PSO)是一种进化计算技术(evolutionary computation),1995 年由Eberhart 博士和kennedy 博士提出,源于对鸟群捕食的行为研究 .该算法最初是受到飞鸟集群活动的规律性启发,进而利用群体智能建立的一个简化模型.粒子群算法在对动物集群活动行为观察基础上,利用群体中的个体对信息的共享使整个群体的运动在问题求解空间中产生从无序到有序的演化过程,从而获得最优解.

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

每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情. 如果你没有指定一个任务,并且你已经定义一个名为 "default" 的任务,那么该任务将会默认被执行. 任务别名 如果指定了一个任务列表taskList,新任务名taskName将是这一个或多个指定任务的别名.当运行此 "任务别名" 时,在taskList 中指定的每个任务都会按照其出现的顺序依次执行.taskList参数必须是一个任务数组.grunt.regis