Repository files navigation

Set of front-end tools for Magento 2

• Unix-like OS (please, do not ask about Windows support)
• Node.jsLTS version. We recommend usingVolta.
• Magento 2 project with SASS based theme for exampleSASS version of "Blank" orAlpaca Theme

1. Runcomposer require snowdog/frontools
2. Go to package directorycd vendor/snowdog/frontools
3. Runyarn ornpm install
4. Decide where you want to keep your config files.You can store them in Frontoolsconfig directory or indev/tools/frontools/config (recommended).There is asetup task to copy all sample config files from theconfig todev/tools/frontools/config and create a convenient symlinktools in the project root.If you want to keep config files inside frontoolsconfig dir, you have to handle this manually.
5. Define your themes inthemes.json.

Checkconfig/themes.json.sample to get samples.

• src - full path to theme
• dest - full path topub/static/[theme_area]/[theme_vendor]/[theme_name]
• locale - array of available locales
• parent - name of parent theme
• stylesDir - (defaultstyles) path to styles directory. Fortheme-blank-sass it'sstyles. By default Magento 2 useweb/css.
• disableSuffix - disable adding.min suffix using--prod flag.
• postcss - (default["autoprefixer({ overrideBrowserslist: browserslist })"]) PostCSS plugins config. Have to be an array.
• modules - list of modules witch you want to map inside your theme
• ignore - array of ignore patterns

Checkconfig/watcher.json.sample to get samples.

• usePolling - set this totrue to successfully watch files over a network (i.e. Docker or Vagrant) or when your watcher dosen't work well. Warning, enabling this option may lead to high CPU utilization!chokidar docs

You can choose Sass compiler between the default, butalready deprecated,node-sass or a newer and fasterdart-sass.

Since the Dart Sass does not have the same set of features as Node Sass, for now we will keep the older version as default.

You will find sample config files for theses plugins invendor/snowdog/frontools/config directory.

• CreatebrowserSync configuration
• Createeslint configuration
• Createsass-lint configuration
• Createstylelint configuration
• Createsvg-sprite configuration

Useyarn [taskName] ornpm run [taskName] to run the task.

• babel - RunBabel, a compiler for writing next generation JavaScript.
  • --theme name - Process single theme.
  • --prod - Production output - minifies and uglyfy code.
• clean - Removes/pub/static directory content.
• csslint - Runstylelint based tests.
  • --theme name - Process single theme.
  • --ci - Enable throwing errors. Useful in CI/CD pipelines.
• dev - RunsbrowserSync andinheritance,babel,styles,watch tasks.
  • --theme name - Process single theme.
  • --disableLinting - Disable JS, SASS, CSS linting.
  • --disableMaps - Disable inline source maps generation.
• emailfix - Fixes email stylesheet for Magento < 2.3.0.Related issue
  • --prod - Production output - minifies styles and add.min sufix.
• eslint - Runeslint against all JS files.
  • --theme name - Process single theme.
  • --fix - Autofix errors
  • --ci - Enable throwing errors. Useful in CI/CD pipelines.
• inheritance - Create necessary symlinks to resolve theme styles inheritance and make the base for styles processing. You have to run in before styles compilation and after adding new files.
• magepackBundle - Runmagepackbundle command.
  • -c or--config - (required) Path to previously generated Magepack config file.
  • --theme name - Process single theme.
• magepackGenerate - Runmagepackgenerate command.
  • --cms-url - (required) URL to one of CMS pages (e.g. homepage).
  • --category-url - (required) URL to one of category pages.
  • --product-url - (required) URL to one of product pages.
  • -u or--auth-username - Username for Basic Auth.
  • -p or--auth-password - Passoword for Basic Auth.
  • -d or--debug - Turn on debugging mode.
• sasslint - Runsass-lint based tests.
  • --theme name - Process single theme.
  • --ci - Enable throwing errors. Useful in CI/CD pipelines.
• setup - Creates a convenient symlink from/tools to/vendor/snowdog/frontools and copies all sample files if no configuration exists.
  • --symlink name - If you don't want to usetools as the symlink you can specify another name.
• styles - Use this task to manually trigger styles processing pipeline.
  • --theme name - Process single theme.
  • --disableMaps - Disable inline source maps generation.
  • --prod - Production output - minifies styles and add.min suffix.
  • --ci - Enable throwing errors. Useful in CI/CD pipelines.
• svg - Runsvg-sprite to generate SVG sprite.
  • --theme name - Process single theme.
• watch - Watch for style changes and run processing tasks.
  • --theme name - Process single theme.
  • --disableLinting - Disable JS, SASS, CSS linting.
  • --disableMaps - Disable inline source maps generation.