10 lut 2022

#shorts - szybki update wersji biblioteki we wszystkich plikach

Mam zawsze problem z tym, że zapominam zmienić wersję biblioteki we wszystkich miejscach w których występuje wzmianka o niej.
Dopiero na koniec gdy wszystko już zakomitowałem na githuba okazuje się że czegoś znowu nie zmieniłem 😉

Postanowiłem temu zapobiec i stworzyłem sobie mały skrypt - version.js

Skrypt na wrzucam do foldera scripts w głównym folderze projektu. I za każdym razem wywołuję przez dodanie do package.json w sekcji script przy budowaniu produkcyjnym.

"scripts": {
  ...
  "prod": "yarn build && yarn sass:prod && yarn lib:version",
  "lib:version": "node ./scripts/version.js",
  ...
},
7 cze 2015

Gulp.js - menadżer zadań

Gulp.js jest menadżerem zadań opartym na node, w skrócie mamy kilka czynności do zrobienia w projekcie. I żeby nie robić tego ręcznie gulp wykonuje za nas te operacje.
Oprę się na małym projekcie, chcę less zamienić na css, skopiować do foldera css, zminimalizować i zmienić jego nazwę na style.min.css

1. Instalacja

Do tego oczywiście potrzebny najpierw jest zainstalowany node, jak już jest zainstalowany to instalujemy gulp.

// najpierw instalujemy globalnie - zainstaluje się w folderze C:\Users\Uzytkownik\AppData\Roaming\npm\node_modules\gulp

npm install -g gulp

// następnie instalujemy lokalnie w moim wypadku wchodzimy do D:\xampp\htdocs\test-gulp i tam instalujemy gulp jak i pluginy

npm install gulp --save-dev

Teraz aby móc z gulp skorzystać należy utworzyć plik konfiguracyjny gulpfile.js - musi być on umieszczony w katalogu głównym naszego projektu.

W naszym projekcie będziemy korzystać z gulp-less, gulp-minify-css oraz gulp-rename możemy je zainstalować pojedynczo jak i za jednym razem jak kto woli.

// wszystko instalujemy lokalnie

npm install gulp-less gulp-minify-css gulp-rename install --save-dev

Struktura naszego projektu:
mamy folder "test-gulp" w nim foldery css oraz less, w less jest plik style.less 🙂
W test-gulp znajduje się plik gulpfile.js (nasze taski) oraz package.json (plik generujemy automatycznie lub ręcznie 😉 - zawiera on dependencies itd.)

test-gulp/
|  css/
|  less/
|  |  style.less
gulpfile.js -- ad3
package.json -- ad2