task-runner

komendy

npm run init-project
npm run watch

package.json

{
  "name": "taskrunner",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "init-project": "npm install && npm-run-all init:*",

    "init:dirs": "mkdirp sass css vendor images js",
    "init:files": "touch README.md index.html sass/style.scss js/script.js",
    "init:gitignore": "curl https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore -o .gitignore",

    "test": "npm run test:html",
    "test:html": "globstar nu-html-checker *.html",

    "build": "npm-run-all build:* test",
    "build:sass": "node-sass --output-style compact -o css sass",
    "build:autoprefixer": "autoprefixer-cli css/style.css",

    "build-dev": "npm-run-all build-dev:sass build:autoprefixer",
    "build-dev:sass": "node-sass --output-style expanded --source-map true -o css sass",

    "watch": "npm-run-all build:* build-dev -p watch:*",
    "watch:browsersync": "browser-sync start --server --files \"css/*.css\" \"*.html\"",
    "watch:sassprefixer": "onchange sass/*.scss -- npm run build-dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer-cli": "^1.0.0",
    "browser-sync": "^2.26.3",
    "globstar": "^1.0.0",
    "mkdirp": "^0.5.1",
    "node-sass": "^4.11.0",
    "npm-run-all": "^4.1.5",
    "nu-html-checker": "^0.1.0",
    "onchange": "^5.2.0"
  }
}

task-runner commands

Taski task-runnera:

1. INIT-PROJECT
-instalacja niezbędnych pakietów
-stworzenie struktury katalogów, czyli założenie folderów sass/, css/, vendor/, images/, js/
-stworzenie pliku README.md, który powinien się znajdować w każdym repozytorium
-stworzenie pustych plików index.html, sass/style.scss, js/script.js
-pobranie pliku .gitignore i umieszczenie go w katalogu naszego projektu

2. TEST
-sprawdzanie poprawności HTML

3. BUILD
-konwersja plików .scss do .css
-uruchomienie Autoprefixera
-minifikacja pliku .css (usunięcie pustych linii w celu zmniejszenia rozmiaru pliku)
-przetestowanie poprawności kodu

4. WATCH
-kompilowanie na bieżąco plików .scss do .css
-dodawanie prefiksów w plikach .css
-odświeżanie przeglądarki po każdej zmianie w kodzie


Ad.1 INIT-PROJECT
W folderze -> Git Bash: 
git init
npm init -y
W pliku package.json, nad taskiem test:"init-project": "npm install",

npm install mkdirp --save-dev (instalowanie pakietu folderów)
W pliku package.json, pod taskiem init-project:"init:dirs":"mkdirp sass css vendor images js",
W pliku package.json, pod taskiem init:dirs: "init:files":"touch README.md index.html sass/style.scss js/script.js",
Pobranie gitignore:w pliku package.json, pod taskiem init:files:"init:gitignore":"curl https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore -o .gitignore",

Zmodyfikowanie taska init-project, by subtaski wywoływały się sekwencyjnie i po komendzie run:
"init-project": "npm install && npm run init:dirs && npm run init:files && npm run init:gitignore",

Opymalizacja init -project. W folderze zainstalowć:
npm install npm-run-all --save-dev
Zmiana w package.json:"init-project": "npm install && npm-run-all init:*",


Ad. 2 TEST
npm i nu-html-checker --save-dev
npm i globstar --save-dev
W package.json pod test:"test:html":"globstar nu-html-checker *.html"
Optymalizacja subasku test: w package.json: "test":"npm install && npm-run-all test:*",

Ad. 3 BUILD
npm install node-sass --save-dev
W package.json dodać: "build:sass": "node-sass --output-style compact -o css sass"

Dodatkowy task build-task:
"build": "npm-run-all build:* test",
    "build:sass": "node-sass --output-style compact -o css sass",
    "build:autoprefixer": "autoprefixer-cli css/style.css",
    "build-dev":"npm-run-all build-dev:sass build:autoprefixer",
    "build-dev:sass": "node-sass --output-style expanded --source-map true -o css sass"


Odświeżenie pzeglądarki:
npm install --save-dev browser-sync
w package.json: "watch:browsersync": "browser-sync start --server --files \"css/*.css\" \"*.html\""

Kompilacja sass i autoprefixer:
npm install onchange --save-dev
w package.json: "watch:sassprefixer": "onchange sass/*.scss -- npm run build-dev"
Dodanie w package.json przed wach:browser-sync:
"watch":"npm-run-all build:* build-dev -p watch:*",