From abf69d3700aa9a64c5701649f8767b53c2421c44 Mon Sep 17 00:00:00 2001
From: makao <m.makalowski@gmail.com>
Date: Wed, 3 Apr 2019 01:50:54 +0200
Subject: [PATCH] Updated readme

---
 Readme.md | 68 +++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 59 insertions(+), 9 deletions(-)

diff --git a/Readme.md b/Readme.md
index 39579c7..760791f 100644
--- a/Readme.md
+++ b/Readme.md
@@ -11,26 +11,76 @@ Module for Sass processing during static content deployment with additional Gulp
 2. Register module `php bin/magento setup:upgrade`
 3. Compile Sass theme using `php bin/magento setup:static-content:deploy -f`
 
-## Compatibility
+## Example theme
+* [clawrock/magento2-theme-blank-sass](https://github.com/clawrock/magento2-theme-blank-sass)
+
+## Works with
+#### Preprocessor
 * Magento 2.2 - 2.3
 * PHP 7.0 - 7.2
-* Gulp 3.9
-* Node.js v8 or later
+#### Gulp
+* Node.js 10+
 
-## Gulp workflow
+## Gulp
 1. Install Node.js
 2. Install Gulp configuration `php bin/magento dev:gulp:install`
 3. Install Gulp and required dependencies `npm install`
 4. Define theme configuration `php bin/magento dev:gulp:theme`
 5. Symlink theme to pub/static folder `gulp exec:[theme_key]`
-6. Compile Scss `gulp scss:[theme_key]`
+6. Compile SCSS `gulp scss:[theme_key]`
 7. Watch for changes `gulp watch:[theme_key]`
 
-## Browsersync
-Pass `--proxy http://magento.test` argument to `gulp watch` or `gulp watch:[theme_key]` where http://magento.test is Magento base url and Browsersync will be automatically enabled.
+It also supports LESS, instead of SCSS use less like `gulp less:[theme_key]`
 
-## Compatible themes
-* [clawrock/magento2-theme-blank-sass](https://github.com/clawrock/magento2-theme-blank-sass)
+#### Configure theme
+You can manually configure theme like in Gruntfile which is shipped with Magento or use `php bin/magento dev:gulp:theme` command which will configure it for you.
+[Reference: Grunt configuration file](https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/tools/using_grunt.html#grunt_config)
+
+#### Commands
+| Shortcut                  | Full command                                                   |
+| ------------------------- | -------------------------------------------------------------- |
+| `gulp build:scss:[theme]` | `gulp exec:[theme] && gulp scss:[theme]`                       |
+| `gulp dev:scss:[theme]`   | `gulp exec:[theme] && gulp scss:[theme] && gulp watch:[theme]` |
+
+List of gulp commands:
+- `gulp clean:[theme_key]`
+- `gulp deploy:[theme_key]`
+- `gulp exec:[theme_key]`
+- `gulp scss:[theme_key]`
+- `gulp less:[theme_key]`
+- `gulp watch:[theme_key]`
+- `gulp build:scss:[theme_key]`
+- `gulp build:less:[theme_key]`
+- `gulp dev:scss:[theme_key]`
+- `gulp dev:less:[theme_key]`
+
+#### Browsersync
+Pass `--proxy http://magento.test` argument to `gulp watch:[theme_key]` or `gulp dev:scss[theme_key]` where http://magento.test is Magento base url and Browsersync will be enabled.
+
+Use additional flags to enable more watchers:
+- `--phtml`: reload when phtml file is changed
+- `--js`: reload when js file is changed
+
+There are some BrowserSync options available (only string and boolean values are supported):
+- `--bs-ui`: [ui](https://www.browsersync.io/docs/options#option-ui)
+- `--bs-port`: [port](https://www.browsersync.io/docs/options#option-port)
+- `--bs-logLevel`: [logLevel](https://www.browsersync.io/docs/options#option-logLevel)
+- `--bs-logPrefix`: [logPrefix](https://www.browsersync.io/docs/options#option-logPrefix)
+- `--bs-logConnections`: [logConnections](https://www.browsersync.io/docs/options#option-logConnections)
+- `--bs-logFileChanges`: [logFileChanges](https://www.browsersync.io/docs/options#option-logFileChanges)
+- `--bs-open`: [open](https://www.browsersync.io/docs/options#option-open)
+- `--bs-browser`: [browser](https://www.browsersync.io/docs/options#option-browser)
+- `--bs-notify`: [notify](https://www.browsersync.io/docs/options#option-notify)
+- `--bs-scrollProportionally`: [scrollProportionally](https://www.browsersync.io/docs/options#option-scrollProportionally)
+- `--bs-scrollThrottle`: [scrollThrottle](https://www.browsersync.io/docs/options#option-scrollThrottle)
+- `--bs-reloadDelay`: [reloadDelay](https://www.browsersync.io/docs/options#option-reloadDelay)
+- `--bs-reloadDebounce`: [reloadDebounce](https://www.browsersync.io/docs/options#option-reloadDebounce)
+- `--bs-reloadThrottle`: [reloadThrottle](https://www.browsersync.io/docs/options#option-reloadThrottle)
+- `--bs-injectChanges`: [injectChanges](https://www.browsersync.io/docs/options#option-injectChanges)
+- `--bs-startPath`: [startPath](https://www.browsersync.io/docs/options#option-startPath)
+
+#### Example usage
+`gulp dev:scss:my_theme --proxy http://m2.test --phtml --bs-port=8080 --bs-open=0`
 
 ## Troubleshooting
 * If you have previously installed Grunt, please make sure you have removed package-lock.json and node_modules folder. Then run `npm install`.