@sitecore/sxa-celt
v10.4.0
Published
Creative Exchange Live for SXA themes
Downloads
450
Readme
Boilerplate for creating new theme for you Sitecore site.
For using Autosynchronizer, you need to complete next steps:
Download 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 downloaded theme boilerplate folder
Update config file for Gulp tasks. ThemeRoot/gulp/config.js file:
serverOptions.server
- path to sitecore instance. Exampleserver: 'http://sxa'
;
If you use Creative exchange skip this step. Open ThemeRoot/gulp/serverConfig.json
serverOptions.projectPath
- path to project, where theme placed. ExampleprojectPath: '/themes'
;serverOptions.themePath
- path to basic theme folder from project root. ExamplethemePath: '/Basic2'
;
Open Theme root folder with command line.
Run
npm install
(node.js and npm should be already installed);If gulp is not yet installed - Install gulp using following command:
npm install --global gulp-cli
Run gulp task which you need: Global tasks:
gulp default
or justgulp
- startsgulp all-watch
.gulp all-watch
- run a list of tasks:sass-watch
js-watch
es-watch
css-watch
img-watch
watch-source-sass
html-watch
watch-scriban
For SASS
gulp sass-watch
- run a list of tasks:watch-component
watch-base
watch-styles
watch-dependency
gulp sassComponents
- to compile sass styles just for components;gulp sassStyles
- to compile sass additional styles for component;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;gulp watch-base
- watch on changes under sass/abstracts/, sass/base/ , sass/components folders and run compiling of components and styles;gulp watch-component
- watch changes of component styles under sass folder and compile them to styles folder;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
gulp css-watch
- watch on changes of css files under stytles folder and upload them to server;
For JavaScript:
gulp eslint
- run eslint for all js in scripts folder;gulp js-watch
- watch on changes of js files under scripts folder and upload them to server;gulp es-watch
- watch on changes of ES6+ js files under sources folder and upload them to server;
For HTML (if you work with creative exchange)
gulp html-watch
- watch changes of html files and upload them to the server;
For Gulp files
gulp watch-gulp
- watch on changes of js and json files under gulp folder and upload them to server;
For Images
gulp img-watch
- watch on changes under images folder and upload files to server;
For Sprite
gulp spriteFlag
- to create sprite for flags;
For Scriban files
gulp watch-scriban
- watch changes of scriban files and upload them to the server.
When watcher starts you need to enter you login and password for sitecore, for uploading reason.