sc-npm-packages - @sxa/Theme 10.2.2

> npm install @sxa/Theme@10.2.2


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/developers/sxa/18/sitecore-experience-accelerator/en/modify-your-site-design-with-creative-exchange-live.html

License

Sitecore MyGet License

Keywords

SXA, Creative, Exchange, Live, Sitecore, Experience, Accelerator, Gulp, Theme

Info

58531 total downloads
17776 downloads for version 10.2.2
Download (1.04 MB)

Dependencies

@babel/polyfill@^7.8.7, colors@^1.4.0, extend@^3.0.2, form-data@^3.0.0, formstream@^1.1.0, gulp@^4.0.2, gulp-autoprefixer@^7.0.1, gulp-babel@^8.0.0, gulp-cli@^2.2.0, gulp-concat@^2.6.1, gulp-eslint@^6.0.0, gulp-filter@^6.0.0, gulp-if@^3.0.0, gulp-prompt@^1.2.0, gulp-rename@^2.0.0, gulp-sass@^5.0.0, node-sass@^6.0.1, gulp-sass-bulk-import@^1.0.1, gulp-sass-grapher@^1.0.0, gulp-sourcemaps@^2.6.5, gulp-upload@^1.0.0, gulp-watch@^5.0.1, gulp.spritesmith@^6.11.0, inquirer@^7.1.0, path@^0.12.7, request@2.81.0, jsdoc@^3.6.3, rimraf@^3.0.2, urllib@^2.34.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.2.2, eslint@^6.8.0, gulp-tap@^2.0.0

Package history

Version Size Last updated Downloads Mirrored?
10.3.0 1.04 MB Tue, 07 Feb 2023 09:28:35 GMT 24174
10.2.3 1.04 MB Tue, 07 Feb 2023 09:18:39 GMT 7
10.2.2 1.04 MB Thu, 18 Nov 2021 09:39:41 GMT 17776
10.2.1 1.04 MB Tue, 09 Nov 2021 15:06:28 GMT 899
10.2.0 1.04 MB Fri, 05 Nov 2021 15:34:56 GMT 123
10.1.0 1.04 MB Thu, 25 Feb 2021 13:10:19 GMT 10010
10.0.0 1.05 MB Tue, 04 Aug 2020 13:48:53 GMT 2708
1.0.1 1.05 MB Thu, 28 Nov 2019 14:50:20 GMT 2834