在Magento 2正式推出近10个月后,Google已经收录了大量与创建主题、后备机制和LESS编译相关的文章,但是没有一篇关于如何创建自己的Grunt任务。

即使在官方的Magento 2文档中,也没有找到相关的内容。

 

那么,Grunt在哪里呢?

出于本文的目的,使用了最新的稳定Magento 2版本。

本文不会展示如何在您的项目/操作系统中设置Grunt,有很多关于如何操作的教程。首先要看的当然是Gruntfile.js文件,  其中一些代码值得注意。

在2.0.x版本中,它是以下代码段:

configDir = './dev/tools/grunt/configs',
taskDir = './dev/tools/grunt/tasks';
[
    taskDir + '/mage-minify',
    taskDir + '/deploy',
    taskDir + '/black-list-generator',
    taskDir + '/clean-black-list',
    taskDir + '/static',
    'time-grunt'
].forEach(function (task) {
    require(task)(grunt);
});

在2.1版本中(在写作时它是RC1),它是以下代码片段:

configDir = './dev/tools/grunt/configs',
tasks = grunt.file.expand('./dev/tools/grunt/tasks/*');
tasks = _.map(tasks, function(task){ return task.replace('.js', '') });

configDir变量指示可以找到某些JSON和JS文件的路径。另一方面,任务列表的加载方式不同:

  • 2.0.x版本静态加载它们作为硬编码任务(文件名)的数组。如果您当前的项目使用任何这些版本,则必须手动插入自定义任务名称(稍后将显示),
  • 2.1版本动态加载它们(使用globbing模式)

 

创建自定义任务

现在已经知道了应该去哪里,是时候创建自定义任务了。要做到这一点需要两个文件,magease.js(我们的自定义任务)和magease.json(自定义任务的配置):

magento2_root/dev/tools/grunt/tasks/magease.js
magento2_root/dev/tools/grunt/config/magease.json

注意:仅适用于2.0.x版本:必须手动附加自定义文件名,如下所示:

[
    ...
    taskDir + '/static',
    taskDir + '/magease',
    'time-grunt'
]

对于本文,将使用StackOverflow上找到的代码片段,它返回当前日期和时间的格式化字符串表示形式。magease.json文件中,将支持两种格式,克罗地亚语和英语(由于符号的不同),克罗地亚语是默认格式:

{
  "default": "hr_HR",
  "formats": {
    "hr_HR":  "HH:mm:ss dd.MM.yyyy.",
    "en_EN":  "h:mm:ss TT M/d/yyyy"
  }
}

考虑到这一点,现在是时候用magease.js写下实际的任务了

module.exports = function (grunt) {
    "use strict";
 
    function formatDate(date, format, utc) {
	/* actual code was removed from this article */
    }
 
    grunt.registerTask("now", function (arg_locale) {
        var formatting, initial_locale;
 
        if (arguments.length) {
            formatting = grunt.config.get("magease.formats." + arg_locale);
        } else {
            initial_locale = grunt.config.get("magease.default");
 
            if (initial_locale) {
                formatting = grunt.config.get("magease.formats." + initial_locale);
            } else {
                grunt.log.error("unknown locale: " + initial_locale);
            }
        }
 
        grunt.log.writeln(formatDate(new Date(), formatting));
    });
}

值得注意的是,JSON文件的名称必须与grunt.config.get()方法中字符串的第一部分相同(因此,如果您更改magease.json - > example.json,您必须使用grunt.config.get(“example”)并像往常一样使用你的密钥)。

现在可以安全地从终端运行以下命令:

  • grunt now   - 没有传递任何参数,任务将使用默认格式(hr_HR),这与现在运行 grunt相同hr_HR
  • grunt now:en_EN - 传递了一个有效的参数,该任务将使用英文格式
  • grunt now:en_US - 使用了无效参数,并且将引发错误以指定未定义的值

现在应该了解如何将自己的Grunt任务添加到Magento 2中,以及如何为您的任务设置基本配置。