diff --git a/scripts/README.md b/scripts/README.md index 3b163b3cfc8f98fa21e67486570b356f18a1d5a4..528ba7b40a7d2170cd30b80d5c7b77f6074d2bde 100644 --- a/scripts/README.md +++ b/scripts/README.md @@ -1,6 +1,8 @@ # Varbase Scripts -## Quick tip on how to use this script command file. +## Vartheme BS4 Scripts + +### Quick tip on how to use this script command file. Default settings could be changed in scripts.settings.yml @@ -18,8 +20,17 @@ $ apt install build-essential $ curl -L https://npmjs.com/install.sh | sh $ apt install npm ``` +### Install Yarn + +``` +sudo apt update && sudo apt install yarn +``` +or Install Yarn as a global by npm +``` +npm install -g yarn +``` -* 2. Gulp : Helps compiling SASS to CSS +* 2. [Gulp](https://gulpjs.com) : Helps compiling SASS to CSS ``` npm install gulp-cli -g npm install gulp -D @@ -30,10 +41,16 @@ After we make sure that we do have all the tools we could change directory in the terminal to: ``` -$ cd PROJECT_DIR_NAME/docroot/profiles/varbase/scripts +$ cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4/scripts $ bash ./create-new-vartheme-bs4.sh "THEME_NAME" ``` +We can use +``` +$ cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4 +yarn theme:create-sub-theme "THEME_NAME" +`` + * Activate your new sub theme by going to Appearance in our Varbase site. * Search for THEME_NAME of the generated new sub theme and click on Install and set as default. @@ -54,28 +71,42 @@ $ gulp [10:55:43] Finished 'move_popper_js_files' after 3.89 ms [10:55:43] Starting 'watch'... ``` - +We can use +``` +yarn theme:init +``` We may want to increase our maximum watched SASS files by + ``` -$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p +$ echo fs.inotify.max_user_watches=524288 + | sudo tee -a /etc/sysctl.conf && sudo sysctl -p ``` --------------------------------------------------------------------------------- - +Then run gulp compile ones to compile every time we want. -# Create new Vartheme sub theme ( Bootstrap 3) LESS +``` +$ cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME +$ gulp compile +[11:22:30] Using gulpfile PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME/gulpfile.js +[11:22:30] Starting 'compile'... +[11:22:33] Finished 'compile' after 2.54 s +``` +We can use +``` +yarn theme:build +``` +Or run gulp watch to keep watching for changes. -### For left to right (LTR) sub-theme ``` -cd PROJECT_DIR_NAME/docroot/profiles/varbase/scripts -bash ./create-new-vartheme.sh "THEME_NAME" "ltr" +$ cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME +$ gulp watch +[11:25:53] Using gulpfile PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME/gulpfile.js +[11:25:53] Starting 'watch'... ``` - -### For right to left (RTL) sub-theme +We can use ``` -cd PROJECT_DIR_NAME/docroot/profiles/varbase/scripts -bash ./create-new-vartheme.sh "THEME_NAME" "rtl" +yarn theme:watch ``` -------------------------------------------------------------------------------- diff --git a/scripts/create-new-vartheme-bs4.sh b/scripts/create-new-vartheme-bs4.sh index bf67596736ddba634e72af2c15851d87de04def5..04b2d0f784f6eeb6d61e692396343ddb08a46c41 100644 --- a/scripts/create-new-vartheme-bs4.sh +++ b/scripts/create-new-vartheme-bs4.sh @@ -155,7 +155,7 @@ if [[ ! -d "$theme_path/$theme_name" ]]; then # 12. Install needed libraries cd ${theme_path}/${theme_name}; - npm install yarn global ; + npm install -g yarn ; yarn install ; generated_datetime="$(date '+%Y/%m/%d - %H:%M:%S')";