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 1. gulp sassComponents - to compile sass styles just for components; 2. gulp sassStyles - to compile sass additional styles for component; 3. 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; 4. gulp watch-base - watch changes under sass/abstracts/, sass/base/ , sass/components folders and run compiling of components and styles; 5. gulp watch-component - watch changes of component styles under sass folder and compile them to styles folder; 6. 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.