projecs by owner
(
Magento 2 Frontools
Set of front-end tools for Magento 2, based on Gulp.js
Questions
If you want to know more about this project, let's join Magento Community Engineering Slack and ask questions on #magefront channel.
Requirements
- Unix-like OS (please, do not ask about Windows support)
- Node.js LTS version. We recommend to use avn to automate version switching. Required configuration is already added to repository as
.node-versionfile. - (optional) Gulp CLI installed globally -
yarn global add gulp-cliornpm install -g gulp-cli - Magento 2 project with SASS based theme for example SASS version of "Blank" or Alpaca Theme
Installation
- Run
composer require snowdog/frontools - Go to package directory
cd vendor/snowdog/frontools - Run
yarnornpm install - Decide where you want to keep your config files.
You can store them in Frontoolsconfigdirectory or indev/tools/frontools/config.
There is asetuptask to copy all sample config files from theconfigtodev/tools/frontools/configand create a convenient symlinktoolsin the project root.
If you want to keep config files inside frontoolsconfigdir, you have to handle this manually. - Define your themes in
themes.json.
themes.json structure
Check config/themes.json.sample to get samples.
src- full path to themedest- full path topub/static/[theme_area]/[theme_vendor]/[theme_name]locale- array of available localesparent- name of parent themestylesDir- (defaultstyles) path to styles directory. Fortheme-blank-sassit'sstyles. By default Magento 2 useweb/css.disableSuffix- disable adding.minsuffix using--prodflag.postcss- (deafult["autoprefixer({ overrideBrowserslist: browserslist })"]) PostCSS plugins config. Have to be an array.modules- list of modules witch you want to map inside your themeignore- array of ignore patterns
watcher.json structure
Check config/watcher.json.sample to get samples.
usePolling- set this totrueto successfully watch files over a network (i.e. Docker or Vagrant) or when your watcher dosen't work well. Warining, enabling this option may lead to high CPU utilization! chokidar docs
Optional configurations for 3rd party plugins
You will find sample config files for theses plugins in vendor/snowdog/frontools/config directory.
- Create browserSync configuration
- Create eslint configuration
- Create sass-lint configuration
- Create stylelint configuration
- Create svg-sprite configuration
Tasks list
Please use yarn [taskName] or npm run [taskName] to avoid necessity of installing gulp-cli globally.
babel- Run Babel, a compiler for writing next generation JavaScript.--theme name- Process single theme.--prod- Production output - minifies and uglyfy code.
clean- Removes/pub/staticdirectory content.csslint- Run stylelint based tests.--theme name- Process single theme.--ci- Enable throwing errors. Useful in CI/CD pipelines.
default- typegulpto see this readme in console.dev- Runs browserSync andinheritance,babel,styles,watchtasks.--theme name- Process single theme.--disableLinting- Disable SASS and 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.minsufix.
eslint- Watch and run eslint on specified JS file.--file fileName- You have to specify what file you want to lint, fileName without .js.
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.sasslint- Run sass-lint based tests.--theme name- Process single theme.--ci- Enable throwing errors. Useful in CI/CD pipelines.
setup- Creates a convenient symlink from/toolsto/vendor/snowdog/frontoolsand copies all sample files if no configuration exists.--symlink name- If you don't want to usetoolsas 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.minsufix.--ci- Enable throwing errors. Useful in CI/CD pipelines.
svg- Run svg-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 SASS and CSS linting.--disableMaps- Disable inline source maps generation.