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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注