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 dropped in version 1.0.0. Feel free to use an older version (0.11.4 and lower) or create a 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 the repository.
.node-version
file.npm install -g gulp-cli
or yarn global add gulp-cli
composer require snowdog/frontools
/vendor/snowdog/frontools
yarn
or npm install
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 the 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. Remember 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 witch you want to map inside your theme
- ignore
- array of ignore patterns
babel
- Run Babel, a compiler for writing next generation JavaScript.
--theme name
- Process single theme.--prod
- Production output - minifies and uglyfy code.browser-sync
- Run browserSync.clean
- Removes /pub/static
directory content.csslint
- 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 console.deploy
- Symlink or copy all static assets to pub/static
. Runs clean
and inheritance
tasks.
--theme name
- Specify theme to deploy.--prod
- Copy files instead of making symlinks.dev
- Runs browser-sync
, inheritance
and watch
tasks.
--theme name
- Process single theme.--disableLinting
- Disable SASS and CSS linting.--disableMaps
- Toggles source maps generation.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 /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 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.--ci
- Enable throwing errors. Useful in CI/CD pipelines.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.