Do działania projektu potrzebny jest pakiet Node.js
Kiedy w konsoli masz ustawiony katalog „.src” użyj komendy
npm install
(wszystko było testowane na systemowej konsoli CMD.exe)
Wszelkie zmiany należy dokonywać w pliku „.src/gulpfile.js”.
Oznaczenia ustawień:
localhost – adres hosta używany do automatycznego przeładowywania przeglądarki
srcDir – główny katalog źródłowy projektu (domyślnie katalog „.src”)
distDir – główny katalog docelowy projektu (domyślnie katalog nadrzędny dal katologu „.src”)
cssDistDir – katalog docelowy dla skompilowanych plików SCSS (niezalecane zmienianie wartości)
cssMinDistDir – katalog docelowy dla zminifikowanych plików CSS (niezalecane zmienianie wartości)
jsDistDir – katalog docelowy dal skompilowanych i zminifikowanych plików JS (niezalecane zmienianie wartości)
webpackModeDev – włączanie trybu deweloperksiego dla pakietu webpack
useBrowserSync – właczanie automatycznego przeładowywania przeglądarki
minifyCssWithAll – włączanie minifikacji plików CSS do katalogu wskazanego w ustawieniu cssMinDistDir podczas działania całego projektu
.src/
src/
css/ (katalog z plikami CSS do zminifikowania, trafiają do katalogu cssMinDistDir)
js/ (katalog z plikami JS do skompilowania, trafiają do katalogu jsDistDir)
public/ (katalog z plikami do skopiowania, trafiają do katalogu distDir)
scss/ (katalog z plikami SCSS do skompilowania, trafiają do katalogu cssDistDir)
.browserslistrc (lista przeglądarek które mają być wspierane)
gulpfile.js (konfiguracja gulpa)
package.json (konfiguracja pakietów npm)
ReadMe.txt
„gulp copyTemplates” – kopiuje zawartość katalogu „.src/src/public” oprócz katalogu „.src/src/public/assets”
„gulp copyAssets” – kopiuje zawartość katalogu „.src/src/public/assets”
„gulp scssCompile” – kompiluje pliki SCSS (tylko z katalogu „.src/src/scss”, bez podkatalogów) do wersji zwykłej i zminifikowanej, dodaje prefixy, tworzy mapę dla plików finalnych
„gulp cssMinify” – minifikuje pliki CSS, tworzy mapę do pliku min, dodaje automatycznie prefiksy
„gulp jsBuild” – kompiluje pliki JS (tylko z katalogu „.src/src/js”, bez podkatalogów) do wersji zwykłej i zminifikowanej
„gulp jsBuildDev” – kompiluje pliki JS (tylko z katalogu „.src/src/js”, bez podkatalogów) do wersji zwykłej i zminifikowanej, tworzy mapy dla plików finalnych
„gulp watchTemplates” – obserwuje zmiany w katalogu „.src/src/public” i włącza copyTemplates
„gulp watchAssets” – obserwuje zmiany w katalogu „.src/src/public/assets” i włącza copyAssets
„gulp watchScss” – obserwuje zmiany w katalogu „.src/src/scss” i podkatalogach dla plików „*.scss” i włącza scssCompile
„gulp watchCss” – obserwuje zmiany w katalogu „.src/src/css” i podkatalogach dla plików „*.css” i włacza cssMinify
„gulp watchJs” – obserwuje zmiany w katalogu „.src/src/js” i podkatalogach dla plików „*.js” i włącza jsBuild
„gulp watchJsDev” – obserwuje zmiany w katalogu „.src/src/js” i podkatalogach dla plików „*.js” i włącza jsBuildDev
„gulp clearAll” – czyści zawartość katalogu distDir
„gulp compileAll” – uruchamia polecenia: copyTemplates, copyAssets, scssCompile, cssMinify, jsBuild
„gulp compileAllDev” – uruchamia polecenia: copyTemplates, copyAssets, scssCompile, cssMinify, jsBuildDev
„gulp watch” – włącza synchronizację przeglądarki i obserwowanie zmian w plikach
„gulp watchDev” – włącza synchronizację przeglądarki i obserwowanie zmian w plikach (wersja DEV dla plików JS)
„gulp start” – czyści katalog distDir, kopiuje i kompiluje pliki źródłowe i włącza obserwowanie zmian w plikach
„gulp startDev” – czyści katalog distDir, kopiuje i kompiluje pliki źródłowe i włącza obserwowanie zmian w plikach (wersja DEV dla plików JS)
W razie jakichkolwiek pytań należy się zwrócić do Kuby IT.
Wszystkie zmiany dokonywane są na własne ryzyko, bez odpowiedzialności autora niniejszej paczki.
Tylko żeby potem nie było płaczu…