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
structureFirst of all check config/themes.json.sample
- src
- full path to theme
- dest
- full path to pub/static/[theme_area]/[theme_vendor]/[theme_name]
- parent
- name of parent theme
- locale
- array of available locales
- localeOverwrites
- set to true
only if your theme have per locale customizations
- lang
- define styles lang want to use for processing, should be same as files extension. Out of the box Frontools supports only scss
- postcss
- (optional) PostCSS plugins config - have to be an array
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 styleseslint
- 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 styleswatch
- 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