Set of front-end tools for Magento 2, based on Gulp.js
If you have any questions about this project let's go to offical Magento forum - Less to Sass Community Project
LESS support was droped in version 1.0.0. Feel free to use older version (0.11.4 and lower) or create fork and customize newer versions to fit your needs.
Up from version 1.0.0 we are supporting both Node.js packages managers. If you want to keep modules in safe versions all the time, use Yarn, yarn.lock
is already added to repository.
- Node.js LTS version (v6 branch). We recommend to use avn to automate version switching. Required configuration is already added to repository as
.node-version
file. - Gulp CLI global package -
npm install -g gulp-cli
oryarn global add gulp-cli
- Magento 2 project with SASS based theme i.e. SASS version of "Blank"
- Run
composer require snowdog/frontools
- Go to package directory
/vendor/snowdog/frontools
- Run
npm install
oryarn
- Decide where you want to keep your config files.
You can store them in frontools
config
dir or/dev/tools/frontools/config
. There is agulp setup
task to copy all sample config files from theconfig
to/dev/tools/frontools/config
and create a convenient symlink in project root. If you want to keep config files inside frontoolsconfig
dir, you have to handle this manually. - Define your themes in
themes.json
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 localeslocaleOverwrites
- (defaultfalse
) set totrue
if you want to overwrite some styles for specifilc language. You can follow default Magento 2 docs or just rememer that path to overwriting file has to be same as base file after removing/i18n/{lang_code}
.parent
- name of parent themestylesDir
- (defaultstyles
) path to styles directory. Fortheme-blank-sass
it'sstyles
. By default Magento 2 useweb/css
.postcss
- (deafult["plugins.autoprefixer()"]
) PostCSS plugins config. Have to be an array.modules
- list of modules with stylee files, both "root" files and partials (you can use selected partials from module as if they will be inside theme)
- Create browserSync configuration
- Create eslint configuration
- Create sass-lint configuration
- Create stylelint configuration
browser-sync
- run browserSync- do not run this task separately, it's just a part ofdev
taskclean
- Removes/pub/static
foldercsslint
- Run stylelint based tests--theme name
- Process single theme--ci - Enable throwing errors, useful in CI/CD pipelines
default
- typegulp
to see this readme in consoledeploy
- Resolve theme inheritance of static assets (i.e. fonts, images) symlinking them topub
dir.--theme name
- Deploy single theme--prod
- Copy files instead of making symlinks
dev
- Runsbrowser-sync
,inheritance
andwatch
tasks--theme name
- Process single theme--disableLinting
- Disable SASS and CSS linting--disableMaps
- Toggles source maps generation--prod
- Production output - minifies styles and add.min
sufix
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 base for styles processing. You have to run in before sytles compilation and after adding new files.release
- Cleanpub/static
, deploy all necessary files and compiles everything with--prod
flag. Makes code production ready.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/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
- Toggles source maps generation--prod
- Production output - minifies styles and add.min
sufix
watch
- Watch for style changes and run processing tasks--theme name
- Process single theme--disableLinting
- Disable SASS and CSS linting--disableMaps
- Enable inline source maps generation--prod
- Production output - minifies styles and add.min
sufix