Magento 2 前端使用 Less ，官方推荐的前端工具是 Grunt 。本文将介绍如何安装 Grunt ，使用流程和遇到的问题。
安装 node.js
由于没有找到 Magento 2 官方对 node.js 的版本要求说明，加上安装过程中遇到了一些奇怪的问题，所以博主尝试了 node.js 不同的安装方式和不同的版本。虽然最终问题解决了，但是博主也还是不能确定 Magento 2 使用 Grunt ，对 Node.js 的版本有没有要求。所以以下仅是个人实验的记录，仅供参考。
通过 nvm 来安装 node.js
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
然后
# command -v nvm
如果输出 nvm: command not found 那么关掉终端，然后重新链接并再次输入上面的命令，如果输出 nvm 那么说明 nvm 已经安装好了。
nvm list-remote
可以列出所有的版本
要安装某个版本使用
nvm install v0.10.30
查看已经安装的版本使用：
nvm list
切换版本，使用：
nvm use v0.10.30
Now using node v0.10.30
设置某个版本为默认的版本：
nvm alias default v0.10.30
default -> v0.10.30
博主使用的版本是 8.9.1
# node --version
v8.9.1
安装 Grunt
全局安装 Grunt CLI 工具
npm install -g grunt-cli
安装项目依赖
cd <your_Magento_instance_directory>
npm install
npm update
记一次错误
错误代码类似
...
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
yum update
yum install bzip2
把自己的主题添加到 Grunt 配置中
以 2.2 版本为例
在安装目录下，找到 grunt-config.json 文件，打开：
{
"themes": "dev/tools/grunt/configs/local-themes/themes"
}
那么配置文件的地址就是 dev/tools/grunt/configs/local-themes/themes.js 而默认的配置文件地址是 dev/tools/grunt/configs/themes.js ，打开该文件，内容如下：
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
'use strict';
/**
* Define Themes
*
* area: area, one of (frontend|adminhtml|doc),
* name: theme name in format Vendor/theme-name,
* locale: locale,
* files: [
* 'css/styles-m',
* 'css/styles-l'
* ],
* dsl: dynamic stylesheet language (less|sass)
*
*/
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
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
'use strict';
/**
* Define Themes
*
* area: area, one of (frontend|adminhtml|doc),
* name: theme name in format Vendor/theme-name,
* locale: locale,
* files: [
* 'css/styles-m',
* 'css/styles-l'
* ],
* dsl: dynamic stylesheet language (less|sass)
*
*/
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:
grunt clean
Collect resources and generate static files for our theme:
grunt exec:<grunt theme name>
比如：
grunt exec:Tigertek
Initialise the preprocessing:
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
