In the 1.4 release of Sitecore Experience Accelerator, Creative Exchange Live has been added as an option for working with Creative Exchange.
With Creative Exchange, an export of your site can be provided to a front-end developer or creative agency that can then work on the project locally. Once the designs have been updated, the package is imported back into Sitecore. Creative Exchange Live introduces the concept of pushing locally updated design files directly into your Sitecore instance using GULP.
In the following steps, we will build upon the official Sitecore documentation and walk through the GULP setup process using Node.js and Visual Studio Community – if you don’t already have VS or Node.js, use the links below.
Visual Studio: https://www.visualstudio.com/free-developer-offers/
Before getting started, you will need to add a configuration file to patch your Sitecore configuration. Name the file [filename].config and add to Website\App_Config\Include\z.Foundation.Overrides directory.
You should have a project setup in Sitecore that includes a project theme and the Basic2 theme. In most cases, a project will require its own design so it is recommended that you do this when you create the project.
Select and Publish the Project Theme
- Navigate to the Home page of your site in Experience Editor.
- Select the Experience Accelerator tab and click the Theme icon.
- Select the Theme (project theme) and click OK.
- Publish the Site Theme and then the Current Page (recommended to select Republish instead of Smart Publish on initial site publishing).
Export and Extract
- In the Experience Accelerator tab, select the Export icon.
- Select the Export options and select Next.
- When the export is complete, Select Download zipped site.
- Navigate to the Downloaded zipped site and extract the contents to a local directory.
- Open the folder in Visual Studio and then open config.js in the gulp directory. The path to the gulp directory is -/media/Themes/[Tenant Name]/[Site Name]/[Theme Name]/gulp).
- Update the server, projectPath, and themePath within the server options section.
a. default settings
b. updated settings based on Sitecore tree
- Start Command Prompt and navigate to the directory that contains GULP.
- The path to the gulp directory is -/media/Themes/[Tenant Name]/[Site Name]/[Theme Name]/gulp).
- Type node -v and ENTER to check the version of Node - recommended & tested 6.10 +.
- Type npm install and ENTER to install the Node Package Manager.
- Type npm install -g gulp-cli and ENTER to install GULP.
Test Configuration and Installation
- Type gulp and ENTER to run GULP.
- Type login and ENTER and then password and ENTER.
Upon successful login, watchers will have executed.
- In Visual Studio, make any change to the main.scss file within the Theme/sass directory.
- Save the file and in the Command Prompt window note that upload is successful.
The Creative Exchange Live process pushes your updated files to Sitecore directly for you. However, to see changes outside of Sitecore, the Theme will need to be Published.
- Navigate to the site theme in the Media Library.
- Right-click the theme and select Publish Item.
Your team will now be able to make CSS (SASS) changes within the local export and compile the updated CSS instantaneously to your Sitecore instance via GULP -- eliminating the need to execute the Import process in order to see your theming changes.