Boilerplate for creating a new theme for your Sitecore site.

For using Autosynchronizer, you need to complete the following steps:

1. Download the theme boilerplate;

2. Open PathToInstance/Website/App_Config/Include/Feature folder and remove .disabled from z.SPE.Sync.Enabler.Gulp.config.disabled file;

3. Switch to the downloaded theme boilerplate folder

4. Update the config file for Gulp tasks. ThemeRoot/gulp/config.js file:

   1. serverOptions.server - path to sitecore instance. Example server: 'http://sxa';

5. If you use Creative exchange, skip this step.
   Open ThemeRoot/gulp/serverConfig.json :
   

   1. serverOptions.projectPath - path to the project, where the theme is placed. Example projectPath: '/themes';
      
   2. serverOptions.themePath - path to the basic theme folder from the project root. Example themePath: '/Basic2';
      

6. Open the Theme root folder with command line.

7. Run npm install (node.js and npm should be already installed);

8. If gulp is not installed, install gulp using following command: npm install --global gulp-cli

9. Run the gulp task that you need:
   Global tasks:
   

   1. gulp default or just gulp - starts gulp all-watch.
   2. gulp all-watch - run a list of tasks:
      sass-watch
js-watch
es-watch
css-watch
img-watch
watch-source-sass
html-watch

   For SASS
   1. gulp sass-watch - run a list of tasks: watch-component watch-base watch-styles watch-dependency 2. gulp sassComponents - to compile sass styles just for components; 3. gulp sassStyles - to compile sass additional styles for component; 4. gulp watch-styles - watch changes under sass/styles/common , sass/styles/content-alignment , sass/styles/layout folders and compile all of them to styles/styles.css; 5. gulp watch-base - watch changes under sass/abstracts/, sass/base/ , sass/components folders and run compiling of components and styles; 6. gulp watch-component - watch changes of component styles under sass folder and compile them to styles folder; 7. gulp watch-dependency - watch changes under sass/styles/ (exluded sass/styles/common , sass/styles/content-alignment , sass/styles/layout) and compile appropriate component;

   For CSS:
   1. gulp css-watch - watch changes of css files under stytles folder and upload them to server;

   For JavaScript:
   1. gulp eslint - run eslint for all js in scripts folder; 2. gulp js-watch - watch changes of js files under scripts folder and upload them to server; 3. gulp es-watch - watch changes of ES6+ js files under sources folder and upload them to server;

   For HTML (if you work with creative exchange):
   1. gulp html-watch - watch changes of html files and upload them to the server;

   For Gulp files:
   1. gulp watch-gulp - watch changes of js and json files under gulp folder and upload them to server;

   For Images:
   1. gulp img-watch - watch changes under images folder and upload files to server;

   For Sprite:
   1. gulp spriteFlag - to create sprite for flags;

10. When watcher starts, you must enter your login and password for sitecore.