JavaScript - Gulp

Instalacja globalna

Gulp - jest narzędziem pozwalającym na zarządzanie wieloma zadaniami

Instalacja globalna Gulpa (wymaga wcześniejszej instalacji npm np. korzystając z nvm - Node Version Manager), która pozwala na wywoływanie komendy gulp globalnie przy pomocy terminala

npm install --global gulp-cli

Sprawdzanie instalacji (jej wersji)

gulp -v

zwraca:

CLI version: 2.2.1
Local version: Unknown

Instalacja lokalna w folderze projektu

Inicjalizujaca lokalna zaczyna się od stworzenia pliku, w którym zawarte są informacje na temat projektu -> package.json (w folderze, w którym znajduje się projekt) - przechowywane w nim podstawowe informacje na temat projektu oraz jego zależności (np. wymaganych wtyczek)

Plik tworzony jest przy pomocy komend

1) Z odpowiedzią na pytania / w trakcie kolejnych kroków należy odpowiedzieć na podstawowe pytania i stworzyć metadane projektu

npm init

2) lub (bez konieczności odpowiedzi - zostawia puste pola)

npm init -y

::: package.json zawiera informacje na temat zależności projektu - w trakcie przenoszenia plików projektu należy również go zawrzeć wraz z innymi -> wówczas w terminalu na początku pracy nad projektem wystarczy wpisać komendę npm install - npm zainstaluje wszystkie zależności (wymaga Noda + npm) :::

3) Instalacja zależności - wtyczka Gulp

devDependencies a Dependencies

dodanie flagi --save-dev przy instalacji sprawia, że paczka zostaje dodana do zależności deweloperskich devDependencies (wtyczka znajdzie się w spisie znajdującym się w package.json, również bez podania flagi ale wówczas trafi do spisu Dependencies) tu powinny trafić te zależności (paczki), które pozwalają na rozwój/budowę aplikacji, ale nie są niezbędne do jej pełnego funkcjonowania np. związane z transpilacją (np. Saas) lub testowanie. W Dependencies powinny znaleźć niezbędne wtyczki do działania aplikacji (instalacja tylko tych z pominięciem devDependencies odbywa się poprzez npm install --production zamiast zwykłego npm install - można też dodać, że zawartość devDependencies jest formą dokumentacji projektu/jego metadanymi)

npm install gulp --save-dev

::: tworzy folder node_modules (z pobranymi modułami) + package-lock.json (blokuje wersję używanych paczek - zawiera listę pobranych modułów oraz informację o ich wersji) ten folder nie będzie i nie powinien być przenoszony wraz z innymi plikami stąd warto dla niego stworzyć .gitignore i wpisać w niego node_modules/ aby GIT do ignorował :::

gulp -v

// powinno zwrócić informację o wersji globalnej (CLI) oraz lokalnej (wersje mogą się różnić)

CLI version: 2.2.1
Local version: 4.0.2

Następnie należy stworzyć plik gulpfile.js i w ramach niego wpisywać gulpowe polecenia

Przykładowe zastosowanie (użycie metody task() - zdefiniowanie zadania oraz done() - wskazuje zakończenie zadania)

const gulp = require('gulp')

gulp.task('message', function(done) {
    console.log("HTTP Server Started");
    done();
    });

W terminalu (w folderze gdzie zapisany jest plik gulpfile.js) wywołujemy zdefiniowane zadanie/funkcję stosując [gulp + nazwa_funkcji]

    gulp message

    [10:25:43] Starting 'message'...
    HTTP Server Started
    [10:25:43] Finished 'message' after 3.85 ms

Rura albo .pipe()

Użycie metody .pipe() - która pozwala na zdefiniowanie kolejnych kroków wykonywanego zadania (przepływu)

.src() - metoda w ramach, której wskazuje się pliki, na których zostaje podjęte zadanie

Użycie wtyczki -> kompilujące Sass na CSS (o wtyczce i jej instalacji poniżej)

const gulp = require('gulp')
const sass = require('gulp-sass') // wskazanie zależności (jej instalacja -> patrz niżej)

gulp.task('sass', function(){
    return gulp.src('./src/sass/style.scss') // pracuj na pliku style.scss // src - source/źródło
        .pipe(sass()) // uruchom wtyczkę kompilatora
        .pipe(gulp.dest('./dist/css')) // tutaj zwróć skompilowany plik w postaci css // dest - destination/folder_docelowy
});

>> gulp sass

można również wykorzystać metodę .on i dodać

.pipe(sass().on("error", sass.logError)) // wypisz error w przypadku jego wystąpienia

Wtyczki

Spis wtyczek gulpowych: https://gulpjs.com/plugins

Spis wtyczek js: https://www.npmjs.com/

gulp-sass - gulpowa paczka do kompilacji sass na CSS

Instalacja paczki przy pomocy terminala (lokalnie)

npm install gulp-sass node-sass --save-dev

::: paczki można instalować z pozycji podfolderów ale i tak trafią do nadrzędnego folderu (node_modules oraz package.json nie jest tworzony ponownie - ten odpowiada za własny folder oraz podfoldery)

paczki zostały dodane do pliku package.json

"author": "MK",
"license": "ISC",
"dependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.1.0",
    "node-sass": "^4.14.1"
}

Wtyczka sassowa może przyjąć dodatkowe argumenty takie jak outputStyle czy sourceComments

===========================================

Nasłuch zmian -> .watch()

// W kolejnej funkcji można ustawić nasłuch na zmiany i wykonywanie zadania -> wymaga wskazania miejsca oraz użycia metody series() (https://gulpjs.com/docs/en/api/series/)

* - dowolny ciąg znaków (wszystkie pliki z rozszerzeniem np. scss) ** - dotyczy wszystkich podfolderów oraz folderu początkowego

gulp.series() - wykonuj synchronicznie jedno po 2.

gulp.task('watch', function() {
    gulp.watch('./src/**/*.scss', gulp.series("sass");
});

Przykładowe zastosowanie

const gulp = require('gulp')
const sass = require('gulp-sass')

gulp.task('sass', function(){
    return gulp.src('./src/sass/main.scss') 
        .pipe(sass()) 
        .pipe(gulp.dest('./dist/css'))  
});

gulp.task('watch', function() {
    gulp.watch('./src/**/*.scss', gulp.series("sass"));
});

dla Gulp w wersji poniżej 4 (bez gulp.series())

gulp.watch('./src/**/*.scss', ["sass"]);

W terminalu

gulp watch

Po zmianie zawartości pliku main.scss wywołuje się funkcja sass

[10:57:46] Starting 'sass'...
[10:57:46] Finished 'sass' after 28 ms

::: po wprowadzeniu zmian do pliku gulp należy wyłączyć funkcję watch i włączyć ją ponownie by zmiany zaszły w żuycie

===========================================

gulp-autoprefixer

(dodaje --webkit-transform) upewnia się by CSS był kompatybilny ze wszystkimi przeglądarkami

Adres: https://www.npmjs.com/package/gulp-autoprefixer

Instalacja: npm install --save-dev gulp-autoprefixer

Przykładowe zastosowanie:

const  gulp = require('gulp')
const  sass = require('gulp-sass') // kompilator
const autoprefixer = require('gulp-autoprefixer') // dodanie wtyczki prefiksującej

gulp.task('sass', function(){
    return gulp.src('./src/sass/app.scss')
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest('./dist/css'))
});

===========================================

gulp-jshintorazjshint`

• sprawdza poprawność zapisu kodu Gulp i JS

https://www.npmjs.com/package/gulp-jshint

::: Wiele wtyczek naraz można instalować poprzez rozgraniczenie ich nazw spacją

npm install jshint gulp-jshint

Wykorzystanie wtyczki jshint

const gulp = require("gulp");
const jshint = require("gulp-jshint");

gulp.task("task-name", function() {
    return gulp.src("js/*.js") // wszystkie pliki js w folderze js
        .pipe(jshint()) // wykorzystaj wtyczkę jshint()
        .pipe(jshint.reporter("default")) // w terminalu wydrukuj ew. problemy
});

gulp-useref

źródło: https://www.npmjs.com/package/gulp-useref

Wtyczka łącząca podobne do siebie pliki dążąc do zmiejszenia ilości kodu w HTML

Przed:

<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script> 
    <script type="text/javascript" src="scripts/two.js"></script> 
    <!-- endbuild -->
</body>
</html>

Po:

<html>
<head>
    <link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
    <script src="scripts/combined.js"></script> 
</body>
</html>

Instalacja:

npm install --save-dev gulp-useref

Zastosowanie

const gulp = require('gulp'),
    useref = require('gulp-useref');

gulp.task('default', function () {
    return gulp.src('app/*.html') // wszystkie pliki html
        .pipe(useref())
        .pipe(gulp.dest('dist')); // distribution
});

gulp-cleancss

źródło: https://www.npmjs.com/package/gulp-cleancss

Wtyczka służąca do minifikacja kodu - minimalizacja kodu do niezbędnego minimum - więcej na ten temat można przeczytać tutaj lub zobaczyć ten film. Pozawala na optymalizację ładowania się okna witryny.

sprawdź również: gulp-if - https://www.npmjs.com/package/gulp-if

Więcej na temat konfiguracji Gulp można przeczytać np. tutaj: domanart.pl - GULP

Źródła:

Gulp:

https://gulpjs.com/docs/en/getting-started/quick-start/

https://www.youtube.com/watch?v=eRv8jUz2FgI

https://www.youtube.com/watch?v=LYbt50dhTko

https://www.youtube.com/watch?v=QgMQeLymAdU

https://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async

https://css-tricks.com/gulp-for-beginners/

Node:

https://www.youtube.com/watch?v=ENrzD9HAZK4

https://github.com/nvm-sh/nvm#installing-and-updating

https://docs.npmjs.com/files/packag