Boilerplate for creating a new theme for your Sitecore site.
For using Autosynchronizer, you need to complete the following steps:
Download the theme boilerplate;
Open 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
Update the config file for Gulp tasks. ThemeRoot/gulp/config.js file:
serverOptions.server- path to sitecore instance. Example
If you use Creative exchange, skip this step.
Open ThemeRoot/gulp/serverConfig.json :
serverOptions.projectPath- path to the project, where the theme is placed. Example
serverOptions.themePath- path to the basic theme folder from the project root. Example
Open the Theme root folder with command line.
npm install(node.js and npm should be already installed);
If gulp is not installed, install gulp using following command:
npm install --global gulp-cli
Run the gulp task that you need:
gulp defaultor just
gulp all-watch- run a list of tasks:
gulp sass-watch- run a list of tasks:
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;
gulp css-watch- watch changes of css files under stytles folder and upload them to server;
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):
gulp html-watch- watch changes of html files and upload them to the server;
For Gulp files:
gulp watch-gulp- watch changes of js and json files under gulp folder and upload them to server;
gulp img-watch- watch changes under images folder and upload files to server;
gulp spriteFlag- to create sprite for flags;
When watcher starts, you must enter your login and password for sitecore.