@sitecore/sxa-theme

Boilerplate for creating a new theme for your Sitecore site.

For this version of the theme we recommend to use @sitecore/sxa-cli rather than gulp tasks

Prerequisites

1. Should be installed @sitecore/sxa-cli globally.

For using Autosynchronizer, you need to complete next steps:

1. Download the theme boilerplate;

2. Open PathToInstance/Website/App_Config/Include/z.Feature.Overrides (in previous version of Sitecore it can be 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. run sxa init

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

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

6. If you use Creative exchange skip this step. Open ThemeRoot/gulp/serverConfig.json

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

7. Open the Theme root folder with the command line.

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

9. If gulp is not yet installed - Install gulp using following command: npm install --global gulp-cli

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

    1. gulp default or just gulp - starts gulp watchAll;
    2. gulp watchAll - aggregates the functionality of the following tasks:
       watchSass
watchJS
watchEs
watchCss
watchImg
watchSassSource
watchScriban
watchHtml
       
    3. gulp buildAll - compiles sass, minifies css and js;
    4. gulp uploadAll - uploading JavaScript, CSS, and images to the Sitecore instance;
    5. gulp rebuildAll - compiles sass components into css, minifies js and css, uploads js, css, images;
    6. gulp rebuildMain - compiles sass components into css, minifies js and css, uploads js, css;

    For SASS

    1. gulp watchSass - aggregates the functionality of the following tasks:
       watchSassComponents watchSassBase watchSassStyles watchSassDependency
    2. gulp buildSass - compiles sass into css from root of sass folder;
    3. gulp buildSassStyles - compiles files from sass/styles/common , sass/styles/content-alignment , sass/styles/layout to styles/styles.css;
    4. gulp watchSassStyles - monitors changes under sass/styles/common , sass/styles/content-alignment , sass/styles/layout folders, compiles all of them to styles/styles.css;
    5. gulp watchSassBase - monitors changes under sass/abstracts/, sass/base/ , sass/components folders and compiles components and styles;
    6. gulp watchSassComponents - monitors changes in component styles under sass folder and compiles them to styles folder;
    7. gulp watchSassDependency - monitors changes under sass/styles/ (except for sass/styles/common , sass/styles/content-alignment , sass/styles/layout) and compiles appropriate components;
    8. gulp watchSassSource - monitors changed under sass/* folder and uploads changed file to the Sitecore instance;

    For CSS

    1. gulp watchCss - monitors changes of css files under styles folder and uploads them to the Sitecore instance;
    2. gulp buildCss - bundles and minifies files in styles folder;
    3. gulp uploadCss - uploading CSS files from styles folder based on the theme configuration.

    For JavaScript:

    1. gulp buildEslint run eslint for all JavaScript in the Scripts folder;
    2. gulp watchJs - watches changes of js files under Scripts folder and upload them to the Sitecore instance;
    3. gulp watchEs - watches changes of ES6+ js files under sources folder and upload them to the Sitecore instance;
    4. gulp buildJs - bundles and minifies JavaScript files in the Scripts folder;
    5. gulp uploadJs - uploads JavaScript files from Scripts folder based on the theme configuration

    For SASS and CSS

    1. gulp buildStyles - compiles sass components into css, bundles and minfies css files;

    For Images

    1. gulp watchImg - monitors changes under images folder and uploads the files to the Sitecore instance;
    2. gulp uploadImg - upload files from images to the Sitecore instance;

    For Sprite

    1. gulp buildSpriteFlag - create sprites for icons from flags folder;

    For Fonts

    1. gulp uploadFonts - upload files from Fonts folder to the Sitecore instance;

    For Gulp config

    1. gulp uploadGulpConfig - upload files from config folder and gulpfile.js to the Sitecore instance;

    Creative Exchange specific tasks
    

    For Scriban

    1. gulp watchScriban - monitors changes of Scriban files and uploads them to the Sitecore instance;

    For HTML

    1. gulp watchHtml - monitors changes of HTML files and uploads them to the Sitecore instance to be parsed by Creative Exchange;

11. When watcher starts you must enter your login and password for Sitecore, for uploading reason.