Boilerplate for creating a new theme for your Sitecore site.
For this version of the theme we recommend to use [@sxa/cli](https://sitecore.myget.org/feed/sc-npm-packages/package/npm/@sxa/CLI) rather than gulp tasks
Prerequisites
Should be installed [@sxa/cli](https://sitecore.myget.org/feed/sc-npm-packages/package/npm/@sxa/CLI) globally.
For using Autosynchronizer, you need
to complete next steps:
Download the theme boilerplate;
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;
Switch to the downloaded theme boilerplate folder.
run sxa init
Update the config file for Gulp tasks. ThemeRoot/gulp/config.js file:
serverOptions.server - path to sitecore instance. Example
server: 'http://sxa';
If you use Creative exchange skip this step. Open
ThemeRoot/gulp/serverConfig.json
serverOptions.projectPath - path to project, where the theme is placed.
Example projectPath: '/themes';
serverOptions.themePath - path to basic theme folder from the project root.
Example themePath: '/Basic2';
Open the Theme root folder with the command line.
Run npm install (node.js and npm should be installed already );
If gulp is not yet installed - use the following command:
npm install --global gulp-cli
Run the gulp task that you need: Global tasks:
gulp default or just gulp - starts gulp watchAll;
gulp watchAll - aggregates the functionality of the following tasks: watchSass watchJS watchEs watchCss watchImg watchSassSource watchScriban watchHtml
gulp buildAll - compiles sass, minifies css and js;
gulp uploadAll - uploading JavaScript, CSS, and images to the Sitecore
instance;
gulp rebuildAll - compiles sass components into css, minifies js and css,
uploads js, css, images;
gulp rebuildMain - compiles sass components into css, minifies js and css,
uploads js, css;
For SASS
gulp watchSass - aggregates the functionality of the following tasks: watchSassComponentswatchSassBasewatchSassStyleswatchSassDependency
gulp buildSass - compiles sass into css from root of sass folder;
gulp buildSassStyles - compiles files from
sass/styles/common , sass/styles/content-alignment ,
sass/styles/layout to styles/styles.css;
gulp watchSassStyles - monitors changes under
sass/styles/common , sass/styles/content-alignment ,
sass/styles/layout folders, compiles all of them to
styles/styles.css;
gulp watchSassBase - monitors changes under
sass/abstracts/, sass/base/ ,
sass/components folders and compiles components and styles;
gulp watchSassComponents - monitors changes in component styles under
sass folder and compiles them to styles folder;
gulp watchSassDependency - monitors changes under
sass/styles/ (except for sass/styles/common ,
sass/styles/content-alignment , sass/styles/layout)
and compiles appropriate components;
gulp watchSassSource - monitors changed under sass/*
folder and uploads changed file to the server;
gulp buildSass - - compiles sass into css from root of sass
folder;
gulp buildSassStyles - compiles files from
sass/styles/common , sass/styles/content-alignment ,
sass/styles/layout to styles/styles.css;
For CSS
gulp watchCss - monitors changes of css files under styles
folder and uploads them to the server;
gulp buildCss - bundles and minifies files in styles
folder;
gulp uploadCss - - uploading CSS files from styles folder
based on the theme configuration.
For JavaScript:
gulp buildEslint run eslint for all JavaScript in the
Scripts folder;
gulp watchJs - watches changes of js files under Scripts
folder and upload them to server;
gulp watchEs - watches changes of ES6+ js files under
sources folder and upload them to server;
gulp buildJs - bundles and minifies JavaScript files in the
Scripts folder;
gulp uploadJs - uploads JavaScript files from Scripts
folder based on the theme configuration
For SASS and CSS
gulp buildStyles - compiles sass components into css, bundles and minfies
css files;
For HTML (if you work with creative exchange)
gulp watchHtml - monitors changes of HTML files and uploads them to the
server to be parsed by Creative Exchange;
For Scriban (if you work with creative exchange)
gulp watchScriban - monitors changes of Scriban files and uploads them to
the server;
For Images
gulp watchImg - monitors changes under images folder and
uploads the files to server;
gulp uploadImg - upload files from images to the Sitecore
instance;
For Sprite
gulp buildSpriteFlag - creates sprite for flags;
For Gulp config
gulp uploadGulpConfig - upload files from config folder
and gulpfile.js to the Sitecore instance;
When the watcher starts you must enter your login and password for Sitecore.