README

Magento 2 Frontools

基于 Gulp.js 的 Magento 2 前端工具集

问题

如果您对这个项目有任何问题，请前往官方 Magento 论坛 - Less to Sass Community Project

要求

• 类 Unix 操作系统（请勿询问关于 Windows 支持的问题）
• Node.js LTS 版本（目前为 v6 分支）。我们建议使用 avn 来自动切换版本。所需的配置已作为 .node-version 文件添加到存储库中。
• Gulp CLI 全局包 - yarn global add gulp-cli 或 npm install -g gulp-cli
• 基于 SASS 的 Magento 2 项目主题，例如 "Blank" 的 SASS 版本

安装

1. 运行 composer require snowdog/frontools
2. 进入包目录 cd vendor/snowdog/frontools
3. 运行 yarn 或 npm install
4. 决定您想保留配置文件的位置。您可以将它们存储在 Frontools 的 config 目录中或在 dev/tools/frontools/config 中。有一个 gulp 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 - (默认 ["plugins.autoprefixer()"]) PostCSS 插件配置。必须是数组。
• modules - 您想映射到主题内的模块列表
• ignore - 忽略模式数组

watcher.json 结构

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

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

第三方插件的可选配置

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

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

任务列表

• babel - 运行 Babel，下一代 JavaScript 编译器。
  • --theme name - 处理单个主题。
  • --prod - 生产输出 - 压缩和丑化代码。
• clean - 删除 /pub/static 目录内容。
• csslint - 运行基于 stylelint 的测试。
  • --theme name - 处理单个主题。
  • --ci - 启用抛出错误。在 CI/CD 管道中非常有用。
• default - 输入 gulp 查看控制台中的此说明。
• dev - 运行 browserSync 以及 inheritance、babel、styles、watch 任务。
  • --theme name - 处理单个主题。
  • --disableLinting - 禁用 SASS 和 CSS 代码检查。
  • --disableMaps - 切换源映射生成。
• eslint - 监视并运行指定 JS 文件的 eslint。
  • --file fileName - 您必须指定要检查的文件，fileName 无需 .js 扩展名。
• inheritance - 创建必要的符号链接以解决主题样式继承并作为样式处理的基础。您必须在样式编译之前以及添加新文件之后运行。
• 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 - 禁用 SASS 和 CSS 代码检查。
  • --disableMaps - 启用内联源映射生成。