diff --git a/.gitignore b/.gitignore index 025b65c7..00d6cab3 100644 --- a/.gitignore +++ b/.gitignore @@ -20,6 +20,10 @@ yarn-error.log* *.sln *.sw? -#Electron-builder output +# SCSS compiler output +src/styles/css/*.css +src/styles/css/*.map + +# Electron-builder output /dist_electron /build/icons \ No newline at end of file diff --git a/package.json b/package.json index 6bc3fe7c..239aba80 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,9 @@ "postinstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps", "test:unit": "vue-cli-service test:unit", - "buildicons": "electron-icon-builder --input=./public/icon.png --output ./build" + "buildicons": "electron-icon-builder --input=./public/icon.png --output ./build", + "compscss": "bash src/styles/compile.sh --compile", + "watchscss": "bash src/styles/compile.sh --watch" }, "main": "background.js", "dependencies": { @@ -73,4 +75,4 @@ "vue-cli-plugin-electron-builder": "^1.4.0", "vue-template-compiler": "^2.6.10" } -} +} \ No newline at end of file diff --git a/src/styles/README.md b/src/styles/README.md new file mode 100644 index 00000000..a8c26d11 --- /dev/null +++ b/src/styles/README.md @@ -0,0 +1,44 @@ +# How to use the compile.sh script + +The comiple.sh script compiles all .scss files without a _ in the beginning into .css files. + +These files will be compiled: + + scrollbar.scss --> scrollbar.css + main.scss --> main.css + +and these will be ignored: + + _lite.scss --! + _dark.scss --! + +## Windows +To run the script under Windows you need to have bash installed and added to the PATH. +If you have bash you can run the script by putting **bash** in front of the path to the .sh file you want to run. + + cd + bash ./compile.sh + +or: + + bash /compile.sh + +## Linux and MacOS +To run the + + cd + ./compile.sh + +or: + + /compile.sh + +## Usage + + ./compile.sh [] + +The following options are available: + + -c, --compile Compile all scss files. + -w, --watch Watch scss files and recompile when they change. + -h, -?, --help Print usage information. diff --git a/src/styles/compile.sh b/src/styles/compile.sh new file mode 100644 index 00000000..3f2aa512 --- /dev/null +++ b/src/styles/compile.sh @@ -0,0 +1,68 @@ +scriptdir=$(dirname "$BASH_SOURCE"); + +scssdir=$scriptdir/scss; +cssdir=$scriptdir/css; + +lblue="$(tput setaf 12)" +yellow="$(tput setaf 3)" +lyellow="$(tput setaf 11)" +lred="$(tput setaf 9)" +purple="$(tput setaf 129)" +bold="$(tput bold)" +clear="$(tput rmul)$(tput rmso)$(tput sgr0)$(tput setaf 7)" + +function log() { + if [[ $1 == "inf" ]]; then + echo -e $lblue "Info: " "$2" $clear + elif [[ $1 == "wrn" ]]; then + echo -e $yellow "Warn: " $lyellow "$2" $clear + elif [[ $1 == "err" ]]; then + echo -e $lred "Err : " $white "$2" $clear + fi +} + +function print_help() { + echo "$bold${purple}Texturelab$clear SCSS Compiler Script"; + echo ""; + echo "This script compiles all .scss files into .css files and can continuously watch for changes. For more information read the README.md."; + echo ""; + echo "You need to have Dart Sass installed to use this script."; + echo ""; + echo "usage: $BASH_SOURCE []"; + echo ""; + echo "The following options are available:"; + echo "-c, --compile Compile all scss files."; + echo "-w, --watch Watch scss files and recompile when they change."; + echo "-h, -?, --help Print this usage information."; +} + +function check_exit_code() { + exit_code=$? + if (( $exit_code == 127 )); then + log err "You do not have the Dart Sass commandline tools installed or they are not available in the PATH"; + log inf "To install Dart Sass run:" + log inf " choco install sass - windows" + log inf " brew install sass/sass/sass - mac/linux" + log inf " npm install -g sass - js version" + elif (( $exit_code == 0 )); then + log inf "done"; + fi +} + +if (( $# == 0 )); +then + print_help; +else + if [ $1 == "-h" ] || [ $1 == "-?" ] || [ $1 == "--help" ]; then + print_help; + elif [ $1 == "-c" ] || [ $1 == "--compile" ]; then + log inf "compiling scss . . ."; + sass $scssdir:$cssdir --color; + check_exit_code; + elif [ $1 == "-w" ] || [ $1 == "--watch" ]; then + log inf "watching scss . . ." + sass $scssdir:$cssdir --color --watch; + else + log err "$1 is not an option" + fi +fi \ No newline at end of file