青岛澄润国际贸易有限公司

现在的位置: 主页 > 新闻中心 > 文章列表

文章正文

剖析Grunt任务配置

作者:青岛澄润国际贸易有限公司 来源:wwww.usabcc.com 发布时间:2017-09-06 13:13:12
剖析Grunt任务配置

A. 通过npm init在项目根目录下生成package.json;

B. 通过npm install grunt --save-dev 安装grunt依赖;

C. 项目根目录下手动创建文件夹Gruntfile.js

Gruntfile由以下几部分构成:

① “wrapper” 函数

② 项目与任务配置

③ 加载grunt插件和任务

④ 自定义任务

1. Wrapper函数

每一个Gruntfile文件遵循同样的格式,所有代码必须包裹在下述函数中:

module.exports = function(grunt){ // grunt相关其他信息 };

2. 项目与任务配置

Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的。

grunt.initConfig({ copy: {} });

3. 加载Grunt插件和任务

只要在 package.json 文件中被列为dependency(依赖)的包,并通过npm install安装之后,都可以在Gruntfile中以简单命令的形式使用:

// 加载能够提供"copy"任务的插件。 grunt.loadNpmTasks('grunt-contrib-copy');

可以通过“load-grunt-tasks”进行一次性载入所有插件,无需依依引入。

require('load-grunt-tasks')(grunt);

4. 自定义任务

(1)自定义任务

grunt.registerTask(taskName, [description, ] taskList) grunt.registerMultiTask(taskName, [description, ] taskFunction)

示例:

grunt.registerTask('cunstom-copy', ['copy:js']); grunt.registerMultiTask('default', ['clean', 'copy']);

注意:但是其自定义name(“cunstom-copy”)不能为上述“原子”任务名称,否则会造成死循环!导致“Maximum call stack size exceeded”问题!

(2)基本任务

执行指定的任务函数,并传递任何使用冒号分割的参数作为函数的参数。

grunt.registerTask(taskName, [description, ] taskFunction)

示例:

grunt.registerTask('foo', 'A sample task that logs stuff.', function(arg1, arg2) { grunt.log.writeln(arg1 + "," + arg2); // 内部通过run执行其他任务 grunt.task.run('bar', 'baz'); });

二、配置任务

grunt.initConfig方法中指定任务配置,主要是以任务名称命名的属性,也可以包含其他任意数据。在grunt.initConfig({})中不针对任何Task的属性,Grunt会将作为常量进行储存,以备后续通过<%= %>引用。

module.exports = function(grunt){ var config = { app: 'app', // 源文件目录 dest: 'dest' // 目标文件目录 }; grunt.initConfig({ config: config, pkg: grunt.file.readJSON('package.json'), copy: { js: { expand: true, cwd: '<%= config.app %>/', src: ['js/**/*.js'], dest: '<%= config.dest %>/dest/' } } }); // 加载插件 grunt.loadNpmTasks('grunt-contrib-copy') };

config和pkg为常量,其中config在文件开头处定义方便统一,便于后续修改。

copy为Task,加载“grunt-contrib-copy”插件

copy中的js为Target,可以通过grunt copy:js执行

通配符说明:

*匹配任意数量的字符,但不匹配 /

?匹配单个字符,但不匹配 /

**匹配任意数量的字符,包括 /,只要它是路径中唯一的一部分

{}允许使用一个逗号分割的“或”表达式列表

!在模式的开头用于排除一个匹配模式所匹配的任何文件

A. foo/*.js将匹配位于foo/目录下的所有的.js结尾的文件;

B. foo/**/*js将匹配foo/目录以及其子目录中所有以.js结尾的文件。

模板说明:

使用<%= %>分隔符指定的模板会在任务从它们的配置中读取相应的数据时将自动扩展扫描。在模板中使用grunt以及它的方法都是有效的,例如:<%= grunt.template.today('yyyy-mm-dd') %>

1. 任务配置和目标

当运行一个任务时,Grunt会自动查找配置对象中的同名属性。

grunt copy会自动匹配initConfig()方法中的copy属性,在不指定target情况下,默认将遍历所有目标(target)并依次处理。也可以同时指定任务(task)和目标(target),grunt copy:js 将只会处理指定目标(target)的配置。

2. options属性

在一个任务配置中,options属性可以用来指定覆盖内置属性的默认值。此外,每一个目标(target)中还可以拥有一个专门针对此目标(target)的options属性。注意,options对象是可选的,如果不需要,可以忽略。

grunt.initConfig({ concat: { options: { // 这里是任务级的Options,覆盖默认值 }, foo: { options: { // "foo" target options may go here, overriding task-level options. }, }, bar: { // No options specified; this target will use task-level options. }, }, });

3. 文件

由于大多的任务都是执行文件操作,Grunt有一个强大的抽象层用于声明任务应该操作哪些文件。

(1)简洁格式

每个目标对应一个src-dest文件映射

copy: { js: { src: ['<%= config.app %>/js/**/*.js'], dest: '<%= config.dest %>/' }, html: { src: '<%= config.app %>/html/**/*.html', dest: '<%= config.dest %>/' } }

(2)文件对象格式

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网络推广 https://www.feimao666.com

COPYRIGHT © 2015 青岛澄润国际贸易有限公司 ALL RIGHTS RESERVED.

网站地图 技术支持:肥猫科技
精彩专题:网站建设
购买本站友情链接、项目合作请联系客服QQ:2500-38-100