---

Boilerplate for creating a new theme for your Sitecore site.

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

Prerequisites

1. Should be installed @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.

Owners

Authors Sitecore Corporation A/S

Project URL https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/modify-your-site-design-with-creative-exchange-live.html

License https://doc.sitecore.net/~/media/C23E989268EC4FA588108F839675A5B6.pdf

Keywords SXA, Creative Exchange Live, Sitecore Experience Accelerator, Gulp, Theme, dist-tag:latest

Info 51903 total downloads

17842 downloads for version 10.3.0

Download (1.04 MB)

Dependencies @babel/polyfill@^7.8.7, gulp@^4.0.2, gulp-autoprefixer@^8.0.0, gulp-babel@^8.0.0, gulp-cli@^2.2.0, gulp-concat@^2.6.1, gulp-eslint@^6.0.0, gulp-filter@^7.0.0, gulp-if@^3.0.0, gulp-prompt@^1.2.0, gulp-rename@^2.0.0, gulp-sass@^5.0.0, gulp-sass-bulk-import@^1.0.1, gulp-sass-grapher@^1.0.0, gulp-sourcemaps@^3.0.0, gulp-upload@^1.0.0, gulp-watch@^5.0.1, gulp.spritesmith@^6.11.0, inquirer@^8.2.2, jsdoc@^3.6.3, node-sass@^7.0.1, path@^0.12.7, rimraf@^3.0.2

Dependencies (dev) @babel/cli@^7.8.4, @babel/core@^7.9.0, @babel/plugin-transform-runtime@^7.10.1, @babel/preset-env@^7.9.0, @babel/register@^7.9.0, @sxa/celt@^10.3.0, eslint@^8.14.0, gulp-tap@^2.0.0