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
然后
如果输出 nvm: command not found
那么关掉终端,然后重新链接并再次输入上面的命令,如果输出 nvm
那么说明 nvm 已经安装好了。
可以列出所有的版本
要安装某个版本使用
查看已经安装的版本使用:
切换版本,使用:
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
安装 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:
Collect resources and generate static files for our theme:
1 grunt exec:<grunt theme name>
比如:
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