{ Hello Magento 2 }

解决 Magento 2 应用问题，更注重深度挖掘。(ง •̀_•́)ง

0%

Magento 2 使用 Grunt 编译 Less

发表于 分类于

Magento 2 前端使用 Less ，官方推荐的前端工具是 Grunt 。本文将介绍如何安装 Grunt ，使用流程和遇到的问题。

安装 node.js

由于没有找到 Magento 2 官方对 node.js 的版本要求说明，加上安装过程中遇到了一些奇怪的问题，所以博主尝试了 node.js 不同的安装方式和不同的版本。虽然最终问题解决了，但是博主也还是不能确定 Magento 2 使用 Grunt ，对 Node.js 的版本有没有要求。所以以下仅是个人实验的记录，仅供参考。

通过 nvm 来安装 node.js

1
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh  bash

然后

1
# command -v nvm

如果输出 nvm: command not found 那么关掉终端，然后重新链接并再次输入上面的命令，如果输出 nvm 那么说明 nvm 已经安装好了。

1
nvm list-remote

可以列出所有的版本

要安装某个版本使用

1
nvm install v0.10.30

查看已经安装的版本使用：

1
nvm list

切换版本，使用：

1
2
nvm use v0.10.30
Now using node v0.10.30

设置某个版本为默认的版本：

1
2
nvm alias default v0.10.30
default -> v0.10.30

博主使用的版本是 8.9.1

1
2
# node --version
v8.9.1

安装 Grunt

全局安装 Grunt CLI 工具

1
npm install -g grunt-cli

安装项目依赖

1
2
3
cd <your_Magento_instance_directory>
npm install
npm update

记一次错误

错误代码类似

1
2
3
4
...
Phantom installation failed { [Error: Command failed: tar jxf /tmp/phantomjs/phantomjs-1.9.8-linux-x86_64.tar.bz2
tar (child): bzip2: Cannot exec: No such file or directory
...

这是由于缺少 bzip2

1
2
yum update
yum install bzip2

把自己的主题添加到 Grunt 配置中

以 2.2 版本为例
在安装目录下，找到 grunt-config.json 文件，打开：

1
2
3
{
    "themes": "dev/tools/grunt/configs/local-themes/themes"
}

那么配置文件的地址就是 dev/tools/grunt/configs/local-themes/themes.js 而默认的配置文件地址是 dev/tools/grunt/configs/themes.js ，打开该文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

'use strict';

/**
 * Define Themes
 *
 * area: area, one of (frontendadminhtmldoc),
 * name: theme name in format Vendor/theme-name,
 * locale: locale,
 * files: [
 * 'css/styles-m',
 * 'css/styles-l'
 * ],
 * dsl: dynamic stylesheet language (lesssass)
 *
 */
module.exports = {
    blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },
    backend: {
        area: 'adminhtml',
        name: 'Magento/backend',
        locale: 'en_US',
        files: [
            'css/styles-old',
            'css/styles'
        ],
        dsl: 'less'
    }
};

我们拷贝该文件到 dev/tools/grunt/configs/local-themes/themes.js 并且添加上我们的主题。
比如说像这样，我添加了一个前端主题 Tigertek

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

'use strict';

/**
 * Define Themes
 *
 * area: area, one of (frontendadminhtmldoc),
 * name: theme name in format Vendor/theme-name,
 * locale: locale,
 * files: [
 * 'css/styles-m',
 * 'css/styles-l'
 * ],
 * dsl: dynamic stylesheet language (lesssass)
 *
 */
module.exports = {
    blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },
    Tigertek: {
        area: 'frontend',
        name: 'ThankIT/Tigertek',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },
    backend: {
        area: 'adminhtml',
        name: 'Magento/backend',
        locale: 'en_US',
        files: [
            'css/styles-old',
            'css/styles'
        ],
        dsl: 'less'
    }
};

如何创建主题，请参考 如何创建 Magneto 2 前端主题

使用

首先将 Magento 2 设置成 developer 模式（虽然 2.2 的参考文档中说 default 模式也行，但是 default 模式是混合模式，对调试不友好）

然后可以使用以下命令了

Clean static files and caches:

1
grunt clean

Collect resources and generate static files for our theme:

1
grunt exec:<grunt theme name>

比如：

1
grunt exec:Tigertek

Initialise the preprocessing:

1
grunt less:<grunt theme name>

下面就是注意浏览器缓存和 CSS source maps

更多关于 grunt watch 请参考官方文档 Compile LESS with Grunt

参考文档

How To Install Node.js on a CentOS 7 server
Step by Step: Setting Up a Frontend Workflow for Magento 2