{ 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