Type
magento2-component
Set of front-end tools for Magento 2, based on Gulp.js
magento2-component
MIT
None
None
None
None
None
None
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-version
file.npm install -g gulp-cli
or yarn global add gulp-cli
composer require snowdog/frontools
/vendor/snowdog/frontools
npm install
or yarn
config
dir or /dev/tools/frontools/config
.
There is a gulp setup
task to copy all sample config files from the config
to /dev/tools/frontools/config
and create a convenient symlink in project root.
If you want to keep config files inside frontools config
dir, you have to handle this manually.themes.json
themes.json
structureCheck config/themes.json.sample
to get samples
- src
- full path to theme
- dest
- full path to pub/static/[theme_area]/[theme_vendor]/[theme_name]
- locale
- array of available locales
- localeOverwrites
- (default false
) set to true
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 theme
- stylesDir
- (default styles
) path to styles directory. For theme-blank-sass
it's styles
. By default Magento 2 use web/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)
browser-sync
- run browserSync- do not run this task separately, it's just a part of dev
taskclean
- Removes /pub/static
foldercsslint
- Run stylelint based tests
--theme name
- Process single theme--ci - Enable throwing errors, useful in CI/CD pipelines
default
- type gulp
to see this readme in consoledeploy
- Resolve theme inheritance of static assets (i.e. fonts, images) symlinking them to pub
dir.
--theme name
- Deploy single theme--prod
- Copy files instead of making symlinksdev
- Runs browser-sync
, inheritance
and watch
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
sufixeslint
- Watch and run eslint on specified JS file
--file fileName
- You have to specify what file you want to lint, fileName without .jsinheritance
- 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
- Clean pub/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 use tools
as the symlink you can specify another namestyles
- 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
sufixwatch
- 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