NPM Scripts - przykładowa konfiguracja

Przykład użycia

W poprzednim rozdziale rozmawialiśmy sobie o npm i skryptach, które możemy tworzyć w pliku package.json.

Najczęściej będziemy je wykorzystywać w prostych sytuacjach, jak odpalanie danej paczki z kilkoma parametrami - ot by nie musieć za każdym razem wpisywać wszystkiego z palca.

W poniższym tekście pokażę ci, jak za ich pomocą przygotować prostą konfigurację.

Struktura projektu

Powiedzmy, że mamy projekt, który ma poniższą strukturę plików:

src
├── scss
│   └── style.scss
├── images
└── js
    ├── app.js
    └── other.js

dist
├── css
├── js
├── images
└── index.html

W katalogu src będą znajdować się pliki, które będziemy edytować, natomiast do katalogu dist będzie trafiał zoptymalizowany wynik naszego kodu. I tak gdy będziemy pisać scss, wygenerowany zostanie plik dist/css/style.min.css. Gdy będziemy edytować pliki js, zostanie wygenerowany plik dist/js/app.min.js.

Po pierwsze stwórzmy odpowiednie pliki i katalogi. W domyślnym terminalu Windowsa nie ma domyślnie komendy touch służącej do tworzenia nowych plików, dlatego możemy dla pewności użyć odpowiedniego pakietu:

mkdir src dist && mkdir src/scss src/js dist/images
npx touch dist/index.html src/scss/style.scss src/js/app.js

Następnie stwórzmy plik package.json komendą:

npm init -y

Konwersja SCSS do CSS

Pierwszą rzeczą jaką chcielibyśmy zrobić to zamienić pliki scss do pliku css.

Jednym z rozwiązań służących do takiej zamiany jest paczka sass.

Po pierwsze zainstalujmy ją w naszym projekcie:

npm i sass -D

Od teraz możemy ją odpalać poleceniem:

npx sass src/scss/style.scss dist/css

Zgodnie z opisem ze strony https://sass-lang.com/documentation/cli/dart-sass możemy dodać też dodatkowe parametry, takie jak skompresowanie wynikowego pliku czy śledzenie zmian w pliku scss:

npx sass src/scss/style.scss dist/css/style.min.css --watch --style=compressed

Żeby za każdym razem nie wpisywać powyższego polecenia, stwórzmy też w package.json odpowiedni skrypt:

{
    "name": "test-project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "sass": "sass src/scss/style.scss dist/css/style.min.css --watch --style=compressed",
    },
    "devDependencies": {
        ...
    }
}

Od tej pory odpalimy wszystko poleceniem:

npm run sass

Jeżeli twoim celem była tylko zamiana sass na css - właśnie zakończyłeś swoją konfigurację.

Browsersync

Aby ułatwić sobie pracę, możemy dodać do naszej konfiguracji BrowserSync.

Jest to narzędzie, które umożliwia automatyczne odświeżanie strony. BrowserSync jest w tej materii najlepszy. Nie tylko odświeża naszą stronę po wykryciu zmian w plikach (i robi to lepiej niż inne rozwiązania takie jak np. live-server), ale też udostępnia nam synchroniczne przeglądanie strony nad którą pracujemy. Co to oznacza? Po odpaleniu BS udostępnia nam kilka adresów. Pierwszy z nich służy do pracy lokalnej na danym komputerze. Drugi - external - służy do podglądania danej strony na innych urządzeniach, które są podłączone do naszej sieci wi-fi. Wszystkie urządzenia na których będziemy wyświetlać naszą stronę, będą to robić synchronicznie - to znaczy, że jeżeli przewinę stronę na ekranie komputera, przewinę ją na telefonie. Gdy kliknę przycisk na telefonie, kliknę go też na desktopie. Dodatkowo stylowanie nie musi powodować odświeżenia całej strony, bo BrowserSync może nowe style wstrzykiwać bez przeładowania. Bajka.

Zainstalujmy ją w naszym projekcie:

npm i browser-sync -D

Żeby ją teraz odpalić w terminalu wpiszemy:

npx browser-sync start --server dist --files "dist/*.html, dist/css/*.css, dist/js/*.js"

Osobiście mam tą paczkę zainstalowaną też globalnie. Dzięki temu wpisując powyższe polecenie (bez npx) odpalam sobie szybko odświeżanie w malutkich projektach (albo gdy prowadzę prezentacje na kursantów). Żeby nie wpisywać całej komendy w terminalu, stworzyłem sobie do tego odpowiednie aliasy. Szybkie "bs" i kursanci są zadowoleni :)

Ponownie jak poprzednio stwórzmy skrypt, który ułatwi nam późniejszą pracę (uwaga - zmieniłem nazwę poprzedniemu skryptowi na sass!).

{
    "name": "test-project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "sass": "sass src/scss/style.scss dist/css/style.min.css --watch --style=compressed",
        "serve": "browser-sync start --server dist --files \"dist/*.html, dist/css/*.css, dist/js/*.js\""
    },
    "devDependencies": {
        ...
    }
}

Równoczesne skrypty i skrypt start

Oba powyższe zadania po odpaleniu będą działać aż do momentu ich zatrzymania (za pomocą Ctrl + C). Jeżeli chcielibyśmy odpalić jedno zadanie po drugim, użylibyśmy składni && tworząc dodatkowy skrypt:

"scripts": {
    "script1": "...",
    "script2": "...",
    "start" : "script1 && script2"
},

W naszym przypadku chcemy jednak odpalić dwa zadania, które będą działać równocześnie. Aby to zrobić, musimy skorzystać z dodatkowej paczki npm-run-all. Instalujemy ją poleceniem:

npm i npm-run-all -D

a następnie dodajemy dodatkowy skrypt. Opcja --parallel oznacza właśnie równoczesne odpalenie skryptów:

{
    "name": "test-project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "sass": "sass src/scss/style.scss dist/css/style.min.css --watch --style=compressed",
        "serve": "browser-sync start --server dist --files \"dist/*.html, dist/css/*.css, dist/js/*.js\"",
        "start": "npm-run-all --parallel sass serve"
    },
    "devDependencies": {
        ...
    }
}

Javascript

Dodatkowa rzecz jaką się zajmiemy to scalanie i minimalizacja plików z Javascript. Wykorzystamy tutaj uglify-js.

Paczka ta zadziała raczej dla małych projektów, które nie opierają swojego działania na Javascript. Jeżeli tworzył byś aplikację w Javascript, lepszym pomysłem było by skorzystanie z innych rozwiązań takich jak Parcel Webpack, Vite, Snowpack czy podobnych.

Wpierw zainstalujmy odpowiednią paczkę:

npm install uglify-js -D

A następnie dodajmy ją do naszej konfiguracji:

{
    "name": "test-project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "sass": "sass src/scss/style.scss dist/css/style.min.css --watch --style=compressed",
        "serve": "browser-sync start --server dist --files \"dist/*.html, dist/css/*.css, dist/js/*.js\"",
        "uglify": "uglifyjs src/js/*.js -m -c -o dist/js/app.min.js",
        "start": "npm-run-all --parallel sass uglify serve"
    },
    "devDependencies": {
        ...
    }
}

Tutaj pojawia się niestety mały problem. Zarówno sass jak i browsersync mają swój własny system nasłuchiwania zmian w plikach. W przypadku uglify takiego mechanizmu nie ma. Możemy tutaj skorzystać z dodatkowej paczki onchange. Instalujemy ją:

npm i onchange -D

a następnie dodajemy w skryptach:

{
    "name": "test-project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "sass": "sass src/scss/style.scss dist/css/style.min.css --watch --style=compressed",
        "serve": "browser-sync start --server dist --files \"dist/*.html, dist/css/*.css, dist/js/*.js\"",
        "uglify": "uglifyjs src/js/*.js -m -c -o dist/js/app.min.js",
        "watch:js": "onchange \"src/js/**/*.js\" -- npm run uglify",
        "start": "npm-run-all --parallel sass uglify serve watch:css watch:js"
    },
    "devDependencies": {
        ...
    }
}