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-devTeraz 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-devStruktura 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