From 1459093c3dec21c0079bd695c433a600f92c740c Mon Sep 17 00:00:00 2001 From: Brandon Rozek Date: Sun, 10 Jul 2016 15:20:46 -0400 Subject: [PATCH] Initial Commit --- README | 41 +++++++++ bin/index.php | 14 +++ bin/script.js | 0 bin/style.css | 3 + error.log | 0 src/scss/style.scss | 1 + src/ts/script.ts | 0 start.sh | 109 +++++++++++++++++++++++ test.sh | 2 + tests/helper.js | 31 +++++++ tests/test.js | 1 + watch.sh | 207 ++++++++++++++++++++++++++++++++++++++++++++ 12 files changed, 409 insertions(+) create mode 100644 README create mode 100644 bin/index.php create mode 100644 bin/script.js create mode 100644 bin/style.css create mode 100644 error.log create mode 100644 src/scss/style.scss create mode 100644 src/ts/script.ts create mode 100755 start.sh create mode 100755 test.sh create mode 100644 tests/helper.js create mode 100644 tests/test.js create mode 100755 watch.sh diff --git a/README b/README new file mode 100644 index 0000000..5b6771a --- /dev/null +++ b/README @@ -0,0 +1,41 @@ +Front End Development Setup +Author: Brandon Rozek + +------------------ +Dependencies + +Bash + +SassC + Purpose: Sass compilation to css + Website: https://github.com/sass/sassc/ + +nodejs + Purpose: Test Runner + Website: https://nodejs.org/en/ + Install: https://nodejs.org/en/download/ + +Browsersync [1] + Purpose: Live-reload + Website: https://www.browsersync.io/ + Install: npm install -g browser-sync + +TypeScript [1] + Purpose: Type checking and compilation to js + Website: http://www.typescriptlang.org/ + Install: npm install -g typescript + +Docker + Purpose: Apache-PHP5 server + Website: http://www.docker.com/ + +[1] -- Will install automatically if npm is installed +----------------- + +Don't forget to "rm -rf .git" when starting a new project + +To run: Open up the terminal to this directory and type './start.sh' + +For tests: Open up the terminal to this directory and type './test.sh' + +Error messages are stored in error.log diff --git a/bin/index.php b/bin/index.php new file mode 100644 index 0000000..53cb378 --- /dev/null +++ b/bin/index.php @@ -0,0 +1,14 @@ + + + + Sample Page + + + + + + + + + + diff --git a/bin/script.js b/bin/script.js new file mode 100644 index 0000000..e69de29 diff --git a/bin/style.css b/bin/style.css new file mode 100644 index 0000000..fcb06a5 --- /dev/null +++ b/bin/style.css @@ -0,0 +1,3 @@ +body { + margin: 0; + padding: 0; } diff --git a/error.log b/error.log new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/style.scss b/src/scss/style.scss new file mode 100644 index 0000000..45f9705 --- /dev/null +++ b/src/scss/style.scss @@ -0,0 +1 @@ +@include "normalize" diff --git a/src/ts/script.ts b/src/ts/script.ts new file mode 100644 index 0000000..e69de29 diff --git a/start.sh b/start.sh new file mode 100755 index 0000000..2b1e95c --- /dev/null +++ b/start.sh @@ -0,0 +1,109 @@ +#!/bin/bash + +trap killgroup SIGINT + +SCSSFILE=src/scss/style.scss +TSFILE=src/ts/script.ts + +CSSOUTFILE=bin/style.css +JSOUTFILE=bin/script.js + +HTTPSPORT=8443 +HTTPPORT=8080 + +DOCKERENABLED=false + +#Shutdown all background processes when quitted +killgroup() { + echo "" + if $DOCKERENABLED; then + echo "Shutting down docker image" + docker stop development + echo "Removing docker image" + docker rm development + fi + echo "Killing background jobs" + kill -9 $(jobs -p) +} + +installbrowsersync() { + #If npm is installed then install BrowserSync + if command -v npm > /dev/null; then + echo "Installing BrowserSync" + npm install -g browser-sync + else + echo "npm is not installed" + fi +} + +installtypescript() { + #If npm is installed then install TypeScript + if command -v npm > /dev/null; then + echo "Installing TypeScript" + npm install -g typescript + else + echo "npm is not installed" + fi +} + +# Starts BrowserSync to server files in the bin folder and watch for changes in js and css files +startbrowsersync() { + if command -v browser-sync > /dev/null; then + if command -v docker > /dev/null; then + browser-sync start --proxy "https://localhost:$HTTPSPORT" --https --files "bin/*.css" "bin/*.js" 2>> error.log + else + browser-sync start --server "bin" --https --files "bin/*.css" "bin/*.js" 2>> error.log + fi + else + echo "BrowserSync is not installed" + fi +} + +# Watches scss files and compiles to css when changed +startsassc() { + if command -v sassc > /dev/null; then + ./watch.sh --no-clear $SCSSFILE "sassc $SCSSFILE > $CSSOUTFILE" 2>> error.log + else + echo "SassC is not installed" + fi +} + +# Watches tts files and compiles to js when changed +starttypescript() { + if command -v tsc > /dev/null; then + ./watch.sh --no-clear $TSFILE "tsc $TSFILE --outFile \"$JSOUTFILE\"" >> error.log + else + echo "TypeScript is not installed" + fi +} + +# Starts up docker instance with apache and php installed (serves the bin folder) +startdocker() { + if command -v docker > /dev/null; then + docker run -p $HTTPPORT:80 -p $HTTPSPORT:443 --name development -v "$PWD/"bin/:/var/www/html/ -d eboraas/apache-php 2>> error.log + DOCKERENABLED=true + else + echo "Docker is not installed" + fi +} + +# Download normalize.css if it doesn't exist from the git repo +if [ ! -f src/scss/normalize.scss ]; then + wget "https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css" -O "src/scss/normalize.scss" +fi + +# Install BrowserSync if it doesn't exist +if ! command -v browser-sync > /dev/null; then + installbrowsersync +fi + +# Install TypeScript if it doesn't exist +if ! command -v tsc > /dev/null; then + installtypescript +fi + + +startdocker && (startbrowsersync & startsassc & starttypescript & + +# Output all future errors +tail -f -n 0 error.log) diff --git a/test.sh b/test.sh new file mode 100755 index 0000000..8e50144 --- /dev/null +++ b/test.sh @@ -0,0 +1,2 @@ +#!/bin/bash +node tests/test.js diff --git a/tests/helper.js b/tests/helper.js new file mode 100644 index 0000000..49180eb --- /dev/null +++ b/tests/helper.js @@ -0,0 +1,31 @@ +assert = function(expected, actual) { + if (typeof(expected) == 'object' && typeof(actual) == 'object') { + if (!expected.equals(actual)) { + throw new Error("Assertion Error: " + expected.toString() + " is not the same as " + actual.toString()); + } + } else { + if (expected != actual) { + throw new Error("Assertion Error: " + expected + " does not equal " + actual); + } + } +} + +describe = function(objective, test) { + console.log(objective); + if (typeof(test) == 'function') { + test(); + console.log("Tests passed\n"); + } else { + console.log("No tests written\n"); + } +} + +section = function(label, tests) { + console.log("\n*********************\n" +label +"\n*********************"); + if (typeof(tests) == 'function') { + tests(); + console.log("\nSection tests passed"); + } else { + console.log("No tests written for this section"); + } +} diff --git a/tests/test.js b/tests/test.js new file mode 100644 index 0000000..2a7b413 --- /dev/null +++ b/tests/test.js @@ -0,0 +1 @@ +require('./helper.js'); diff --git a/watch.sh b/watch.sh new file mode 100755 index 0000000..3c37b40 --- /dev/null +++ b/watch.sh @@ -0,0 +1,207 @@ +#!/bin/bash + +version=1.0.1 +versionDate="2014-02-14" + +function showHelp() { +echo "watchfile - monitor file(s)/command and perform action when changed + +Possible ways of usage +---------------------------------------- +Monitor FILE, when modified execute FILE +\$ watchfile [options] FILE + +Monitor FILE, when modified execute CMND [PARAM_1 ..PARAM_N] +\$ watchfile [options] FILE CMND [PARAM_1 .. PARAM_N] + +Monitor FILE_1 .. FILE_N, when modified execute CMND [PARAM_1 ..PARAM_N] +\$ watchfile [options] -i FILE_1 .. FILE_N -e CMND [PARAM_1 .. PARAM_N] + +Monitor output of CMND1, when modified execute CMND2 [PARAM_1 .. PARAM_N] +\$ watchfile [options] -s \"CMND1\" -e CMND [PARAM_1 .. PARAM_N] + + +options: +-h, --help Show help +-d, --delay=N Specify the delay between each monitor update. Default 0.5. +--check-content If set it checks file content, instead of just the timestamp. + Has no effect with the -s flag set. +--no-clear If set, it doesn't clear the screen before executing CMND. +-v, --version Outputs version information + +flags: +-s, Next argument specifies monitor command. Requires -e flag. +-i, Start listing files to monitor. Requires -e flag. +-e, Start listing command to execute. Requires -s or -i or flag. + Must be the last flag used (CMND can thus use flags as parameters) + +Note: If CMND isn't found, and ./CMND is, it automatically uses this command. +Note: If the command uses ampersands (&, &&), these must be escaped (\&, \&\&). + + +Examples +---------------------------------------- +Monitor executable foo.sh, and execute on change +$ watchfile foo.sh + +Monitor python file foo.py, and execute it on change +$ watchfile foo.py python foo.py + +As above, but monitor content (not just timestamp): +$ watchfile --check-content foo.py python foo.py + +Compiling main.cpp file on change: +$ watchfile main.cpp g++ -Wall main.cpp -o main + +Compiling main.cpp file on change, running when compilation succeedes: +$ watchfile main.cpp g++ -Wall main.cpp -o main \&\& ./main + +Compiling project whenever source files changes, and running if it succeedes: +$ watchfile -s \"find . -name '*.cpp' -or -name '*.h' | xargs cat\" \\ + -e make \&\& ./main + +See: http://swarminglogic.com/jotting/2014_02_watchfile for more examples + +Mainted at: https://gist.github.com/swarminglogic/8963507 +Author: Roald Fernandez (github@swarminglogic.com) +Version: $version ($versionDate) +License: CC-zero (public domain) +" + exit $1 +} + +function parseParameters() { + tmp=$@ + leftovers="" + while test $# -gt 0; do + case "$1" in + -h|--help) + showHelp 0 + ;; + --no-clear) + shift + flagNoClear=true + ;; + --check-content) + shift + flagCheckContent=true + ;; + -d) + shift + delay=$1 + shift + ;; + --delay*) + delay=`echo $1 | sed -e 's/^[^=]*=//g'` + shift + ;; + -v|--version) + shift + echo "watchfile $version" + exit 0 + ;; + -s) + shift + flagS=true + watchcmnd=$1 + shift + ;; + -i) + shift + flagI=true + nI=0 + for i in `seq 1 $#`; do + if [[ ${!i} == -* ]] ; then + break; + else + ((++nI)) + fi + done + watchfiles=${@:1:$nI} + shift $nI + ;; + -e) + shift + flagE=true + execcmnd=${@:1} + break + ;; + -*) + leftovers="$leftovers "$1 + shift + ;; + *) + leftovers="$leftovers "$1 + shift + ;; + esac + done + if [[ $flagE && (! $flagS) && (! $flagI) ]] ; then + echo "Error: If -e flag is set, -s or -i flags are required." + exit 1 + elif [[ ($flagS || $flagI) && ! $flagE ]] ; then + echo "Error: If -s or -i flags are set, the -e flags is required." + exit 1 + elif [[ $flagS && $flagI ]]; then + echo "Error: Both -s and -i flags cannot be used simultaneously." + exit 1 + elif [[ (! $flagE) && (! $flagS) && (! $flagI) ]] ; then + set -- $leftovers + watchfiles=$1 + if [ $# -gt 1 ]; then + execcmnd=${@:2} + else + execcmnd=$watchfiles + fi + fi +} + +# Exit with help if no parameters +if [[ ! $@ ]] ; then showHelp 1; fi + +# Defaults +delay=0.5 + +# Parse parameters into $watch and $execcmnd variables +parseParameters "$@" + +# Sanitize executable +set -- $execcmnd +if [[ ! `which $1` ]] && [[ -x ./$1 ]] ; then + execcmnd=./$execcmnd +elif [[ ! `which $1` ]] && [[ ! -x ./$1 ]] ; then + echo "Error: No executable $1 or ./$1 found" + exit 1 +fi + +# Main monitoring loop. +if [[ -z $watchcmnd ]] ; then + if [[ ! $flagCheckContent ]] ; then + watchcmnd="stat -c %Y $watchfiles | md5sum" + else + watchcmnd="cat $watchfiles | md5sum" + fi +else + watchcmnd="$watchcmnd | md5sum" +fi + +md5sum=`eval $watchcmnd` +md5sumNow=$md5sum +while [[ true ]] +do + # Loop until some files have changed + while [[ "$md5sumNow" = "$md5sum" ]] + do + sleep $delay + md5sumNow=`eval $watchcmnd` + done + + # Execute the file, as it has changed. + if [[ ! $flagNoClear ]] ; then + clear + fi + eval $execcmnd + + md5sum=$md5sumNow +done +