README

此项目不再受支持，请考虑使用 Cream 分支 代替。

Magento 2 前端工具

Magento 2 的前端工具集

要求

• 类 Unix 操作系统（请不要询问关于 Windows 支持）
• Node.js LTS 版本。我们建议使用 Volta。
• Magento 2 项目，例如具有基于 SASS 主题的项目 "Blank" 的 SASS 版本 或 Alpaca 主题

安装

1. 运行 composer require snowdog/frontools
2. 进入包目录 cd vendor/snowdog/frontools
3. 运行 yarn 或 npm install
4. 确定您想要保留配置文件的位置。您可以将它们存储在 Frontools config 目录中或在 dev/tools/frontools/config（推荐）。有一个 setup 任务，可以将所有示例配置文件从 config 复制到 dev/tools/frontools/config 并在项目根目录中创建方便的符号链接 tools。如果您想在 frontools config 目录中保留配置文件，您必须手动处理此操作。
5. 在 themes.json 中定义您的主题。

themes.json 结构

查看 config/themes.json.sample 以获取示例。

• src - 主题的完整路径
• dest - 完整路径到 pub/static/[theme_area]/[theme_vendor]/[theme_name]
• locale - 可用区域设置的数组
• parent - 父主题的名称
• stylesDir - （默认 styles）样式目录的路径。对于 theme-blank-sass 它是 styles。默认情况下，Magento 2 使用 web/css。
• disableSuffix - 使用 --prod 标志禁用添加 .min 后缀。
• postcss - （默认 ["autoprefixer({ overrideBrowserslist: browserslist })"]）PostCSS 插件配置。必须是一个数组。
• modules - 您想要映射到主题内的模块列表
• ignore - 忽略模式的数组

watcher.json 结构

查看 config/watcher.json.sample 以获取示例。

• usePolling - 将此设置为 true 以成功监视网络上的文件（例如 Docker 或 Vagrant）或当您的监视器工作不佳时。警告：启用此选项可能导致 CPU 利用率过高！chokidar 文档

sass-compiler.json 结构

您可以选择默认的、但已 弃用 的 node-sass 或更新、更快的 dart-sass。

由于 Dart Sass 不具备与 Node Sass 相同的功能集，目前我们将保留旧版本作为默认版本。

第三方插件的可选配置

您将在 vendor/snowdog/frontools/config 目录中找到这些插件的示例配置文件。

• 创建 browserSync 配置
• 创建 eslint 配置
• 创建 sass-lint 配置
• 创建 stylelint 配置
• 创建 svg-sprite 配置

任务列表

使用 yarn [任务名] 或 npm run [任务名] 来运行任务。

• babel - 运行 Babel，一个用于编写下一代 JavaScript 的编译器。
  • --theme name - 处理单个主题。
  • --prod - 生成生产输出 - 压缩并丑化代码。
• clean - 删除 /pub/static 目录内容。
• csslint - 运行基于 stylelint 的测试。
  • --theme name - 处理单个主题。
  • --ci - 启用错误抛出。在 CI/CD 管道中很有用。
• dev - 运行 browserSync 和 inheritance、babel、styles、watch 任务。
  • --theme name - 处理单个主题。
  • --disableLinting - 禁用 JS、SASS、CSS 检查。
  • --disableMaps - 禁用内联源映射生成。
• emailfix - 修复 Magento < 2.3.0 的电子邮件样式表。 相关问题
  • --prod - 生产输出 - 压缩样式并添加 .min 后缀。
• eslint - 对所有 JS 文件运行 eslint。
  • --theme name - 处理单个主题。
  • --fix - 自动修复错误
  • --ci - 启用错误抛出。在 CI/CD 管道中很有用。
• inheritance - 创建必要的符号链接以解决主题样式继承，并为样式处理创建基础。您必须在样式编译之前和添加新文件之后运行。
• magepackBundle - 运行 magepack 的 bundle 命令。
  • -c 或 --config - (必需) 之前生成的 Magepack 配置文件的路径。
  • --theme name - 处理单个主题。
• magepackGenerate - 运行 magepack 的 generate 命令。
  • --cms-url - (必需) 一个 CMS 页面（例如主页）的 URL。
  • --category-url - (必需) 一个分类页面的 URL。
  • --product-url - (必需) 一个产品页面的 URL。
  • -u 或 --auth-username - 基本认证的用户名。
  • -p 或 --auth-password - 基本认证的密码。
  • -d 或 --debug - 启用调试模式。
• sasslint - 运行基于 sass-lint 的测试。
  • --theme name - 处理单个主题。
  • --ci - 启用错误抛出。在 CI/CD 管道中很有用。
• setup - 如果不存在配置，则从 /tools 创建到 /vendor/snowdog/frontools 的便捷符号链接并复制所有示例文件。
  • --symlink name - 如果您不想使用 tools 作为符号链接，可以指定另一个名称。
• styles - 使用此任务手动触发样式处理流程。
  • --theme name - 处理单个主题。
  • --disableMaps - 禁用内联源映射生成。
  • --prod - 生产输出 - 压缩样式并添加 .min 后缀。
  • --ci - 启用错误抛出。在 CI/CD 管道中很有用。
• svg - 运行 svg-sprite 生成 SVG 图标。
  • --theme name - 处理单个主题。
• watch - 监视样式更改并运行处理任务。
  • --theme name - 处理单个主题。
  • --disableLinting - 禁用 JS、SASS、CSS 检查。
  • --disableMaps - 禁用内联源映射生成。