README

Magento 2 Frontools

Magento 2前端工具集，基于Gulp.js开发

问题

如果您想了解更多关于此项目的信息，请加入Magento Community Engineering Slack并在#magefront频道提问。

要求

• 类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 - 禁用内联源映射生成。
• email-fix - 修复 Magento < 2.3.0 的电子邮件样式表。 相关问题
  • --prod - 生产输出 - 压缩样式并添加 .min 后缀。
• 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 - 禁用内联源映射生成。