Gulp kezdés

• Szerző: Sallai András
• Copyright © 2021, Sallai András
• Szerkesztve: 2021, 2022, 2023
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

A gulp a munkafolyamatokat automatizálja, hatékonyabbá teszi.

Webhely:

• https://gulpjs.com/ (2021)

1. A Node.js és a Gulp telepítése.
2. npm projekt készítése
3. npm modulok telepítése.
4. gulpfile.js készítése
5. Bővítmények betöltése.
6. Feladatok készítése.
7. Feladatok futtatása.

Kell egy globális csomag:

npm install --global gulp-cli

A telepítés után kapunk egy gulp nevű parancsot.

Ellenőrzés:

gulp --version

Windowson a --global kapcsoló a következő helyre telepíti a csomagokat:

c:\Users\admin\AppData\Roaming\npm\

A gulp például: Telepítés:

npm install --global gulp-cli

c:\Users\admin\AppData\Roaming\npm\node_modules\gulp\

A C:\Users\admin\AppData\Roaming\npm\ könyvtárban is létrejön egy gulp.cmd fájl.

A telepítés működik PowerShellben is, de használni már nem tudjuk csak cmd-ben.

mkdir projekt1
cd projekt1

npm init

Helyben szükséges a gulp csomag telepítése:

npm install --save-dev gulp

A következő példában a defaultTask nevet adjuk a függvényünknek, és ezt adjuk oda az exports.default tulajdonságnak.

gulpfile.js

function defaultTask(cb) {
  // ide jön az alapértelmezett feladat kódja
  cb();
}
 
exports.default = defaultTask

A cb egy callback függvény, ami paraméterként érkezik. A cb() függvény hívásával tudatjuk, hogy a folyamat befejeződött, és Gulp folytathatja a következő lépéssel.

Teszteléshez:

gulp

A lehetséges kimenet:

gulp                       
[14:26:46] Using gulpfile ~/dev/app01/gulpfile.js
[14:26:46] Starting 'default'...
[14:26:46] Finished 'default' after 3.55 ms

Ha más feladatok is vannak, azokat soroljuk fel a gulp parancs után:

gulp <task1> <taskn> <...>

gulpfile.js

exports.default = function(cb) {
    // ide jön az alapértelmezett feladat kódja
    cb();
}

Írjunk valamit az alapértelmezett kimenetre:

gulpfile.js

exports.default = function(cb) {
    console.log('működik');
    cb();
}

Kétféle faladat (task) létezik:

• publikus - exportált függvény, a gulp paranccsal futtatható
• privát - belső felhasználású függvény; általában a series() vagy parallel() használja

gulpfile.js

function feladat1() {
    console.log('privát feladat');
}
 
function feladat2(cb) {
    feladat1();
    console.log('publikus feladat');
    cb();
}
 
exports.fel1 = feladat2;
exports.default = function(cb) {
    console.log('Használat: gulp fel1');
    cb();
}

Futtatás:

gulp fel1

Két függvény:

• series() - sorrendben történő végrehajtáshoz
• parallel() - párhuzamos végrehajtáshoz

A két függvény használata a „Kötegelt feladatok” fejezetben található.

A gulp-t általában azért használjuk, hogy fájlokon valamilyen változtatást hajtsunk végre a projekten belül.

Az src és a dest függvényt használata általánosan:

const { src, dest } = require("gulp");
 
function feladatNeve(cb) {
    src('forrás-fájlok')
    .pip(egyGulpBővítmény)
    .pipe(dest('célkönyvtár'));
    cb();
}    

Legyen egy egyszerű projekt, ami egy src könyvtárban tartalmaz egy index.html fájlt:

app01/
  |-node_modules/
  |-src/
  |  `-index.html
  |-gulpfile.js
  |-package-lock.json
  `-package-json

Hozzuk létre a projektet:

mkdir app01
cd app01
npm init -y
npm install gulp --save-dev

Írjuk meg a gulfile.js-t:

gulpfile.js

const { src, dest } = require("gulp");
 
function generateHTML(cb) {
    console.log('HTML generálás ...');
    src('src/*.html')
    .pipe(dest('public'));
    cb();
}
 
exports.html = generateHTML;

Végrehajtás:

gulp html

A feladat az src könyvtárban található összes HTML fájlt a public könyvtárba másolja. Az alkönyvtárak nem kerülnek másolásra.

Tegyük fel, hogy vannak alkönyvtárak az src könyvtárban:

app01/
  |-node_modules/
  |-src/
  |  |-vmi/
  |  |  `-data.html
  |  `-index.html
  |-gulpfile.js
  |-package-lock.json
  `-package-json

Ha az alkönyvtárakat és tartalmukat is szeretnénk másolni az src() függvényben írjuk át:

src('src/**/*.html')

Az előző fejezet projektjét folytatjuk.

app01/
  |-node_modules/
  |-src/
  |  |-css/
  |  |  `-style.css
  |  `-index.html
  |-gulpfile.js
  |-package-lock.json
  `-package-json

mkdir app01
cd app01
npm init -y
npm install gulp --save-dev

Legyen egy egyszerű style.css fájl:

style.css

body {
    color: blue;
}

Szeretnék a .css kiterjesztésű fájlokat a css könyvtárból a public könyvtárba másolni, könyvtárastul.

A Gulp Clean-CSS bővítményét használjuk. Telepítsük:

npm install --save-dev gulp-clean-css

const cleanCss = require('gulp-clean-css');
...
function generateCSS(cb) {
    console.log('CSS generálás ...');
    src('src/css/*.css')
    .pipe(cleanCss())
    .pipe(dest('public/css'));
    cb();    
}
 
...
 
exports.css = generateCSS;

A teljes fájl:

gulpfile.js

const { src, dest } = require("gulp");
const cleanCss = require('gulp-clean-css');
 
function generateHTML(cb) {
    console.log('HTML generálás ...');
    src('src/**/*.html')
    .pipe(dest('public'));
    cb();
}
 
function generateCSS(cb) {
    console.log('CSS generálás ...');
    src('src/css/*.css')
    .pipe(cleanCss())
    .pipe(dest('public'));
    cb();    
}
 
exports.html = generateHTML;
exports.css = generateCSS;

Használat:

gulp css

Nézzük meg az eredményt a public/css könyvtárban:

body{color:#00f}

Telepítsük a gulp-rename bővítményt:

npm install --save-dev gulp-rename 

Használat:

const rename = require('gulp-rename');
...
function generateCSS(cb) {
    console.log('CSS generálás ...');
    src('src/css/*.css')
    .pipe(cleanCss())
    .pipe(rename({extname: ".min.css"}))
    .pipe(dest('public/css'));
    cb();    
}

Átnevezés során, a következő tulajdonságokat lehet megadni:

• dirname – célútvonal megadása
• basedir – új fájlnév megadása
• prefix – mivel kezdődjön a fájl neve
• suffix – mire végződjön a fájlnév
• extname – mi legyen a fájl kiterjesztése

gulpfile.js

const { src, dest } = require('gulp');
const rename = require('gulp-rename');
 
function streamTxt() {
    return src("src/**/*.ts")
    .pipe(rename({
        dirname: 'datas',
        basename: 'fruit',
        prefix: 'the-',
        suffix: '-south',
        extname: '.txt'
    }))
    .pipe(dest('dist'));
}
 
exports.default = streamTxt;

app01/
  |-node_modules/
  |-src/
  |  |-css/
  |  |  `-style.css
  |  |-js/
  |  |  `-app.js
  |  `-index.html
  |-gulpfile.js
  |-package-lock.json
  `-package-json

Készítsünk egy egyszerű JavaScript fájlt:

js/app.js

/*
    Több soros 
    megjegyzés
*/
 
function doit() {
    console.log('működik');
}

...
function generateJS(cb) {
    console.log('JavaScript generálás ...');
    src('src/js/*.js')
    .pipe(uglify())
    .pipe(rename({extname: ".min.js"}))
    .pipe(dest('public/js'));
    cb();    
}
...
exports.js = generateJS;

Futtatás:

gulp js

A HTML fájlokat írhatjuk a gulp-replace és a gulp-cheerio bővítményekkel.

A gulp-replace segítségével a fájlok szabályos kifejezésekkel írhatók. A gulp-cheerio bővítménnyel a HTML fájlok tageken keresztül írhatók. Mit itt most a gulp-cheerio bővítményt fogjuk használni.

A public könyvtárban található HTML állomány most rossz CSS és JavaScript fájlokra mutat. Át kell írni a link és a script fájlokat.

Emlékeztetőül a könyvtárszerkezet:

app01/
  |-public/
  |  |-css/
  |  |  `-style.min.css
  |  |-js/
  |  |  `-app.min.js
  |  `-index.html
  |-src/
  |  |-css/
  |  |  `-style.css
  |  |-js/
  |  |  `app.js
  |  `-index.html
  |-gulpfile.js
  `-package.json

A style.css át lett nevezve style.min.css-re az app.js pedig app.min.js-re.

A Gulp Cheerio bővítményét fogjuk használni, telepítsük:

npm install --save-dev gulp-cheerio

...
const cheerio = require('gulp-cheerio');
...
function generateHTML(cb) {
    console.log('HTML generálás ...');
    src('src/**/*.html')
    .pipe(cheerio(function($) {
        $('link').remove();
        $('script').remove();
        $('head').append('<link rel="stylesheet" href="style.min.css">');
        $('body').append('<script src="app.min.js"></script');
    }))
    .pipe(dest('public'));
    cb();
}

A teljes gulpfile.js:

gulpfile.js

const { src, dest } = require("gulp");
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const cheerio = require('gulp-cheerio');
 
function generateHTML(cb) {
    console.log('HTML generálás ...');
    src('src/**/*.html')
    .pipe(cheerio(function($) {
        $('link').remove();
        $('script').remove();
        $('head').append('<link rel="stylesheet" href="style.min.css">');
        $('body').append('<script src="app.min.js"></script');
    }))
    .pipe(dest('public'));
    cb();
}
 
function generateCSS(cb) {
    console.log('CSS generálás ...');
    src('src/css/*.css')
    .pipe(cleanCss())
    .pipe(rename({extname: ".min.css"}))
    .pipe(dest('public/css'));
    cb();    
}
 
function generateJS(cb) {
    console.log('JavaScript generálás ...');
    src('src/js/*.js')
    .pipe(uglify())
    .pipe(rename({extname: ".min.js"}))
    .pipe(dest('public/js'));
    cb();    
}
 
exports.html = generateHTML;
exports.css = generateCSS;
exports.js = generateJS;

Vegyük fel a watch függvényt a gulpfile.js-ben:

const { src, dest, watch } = require('gulp');
const sync = require("browser-sync").create();

A teljes gulpfile.js:

gulpfile.js

const { src, dest, watch } = require('gulp');
const sync = require("browser-sync").create();
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const cheerio = require('gulp-cheerio');
 
function streamHtml() {
    return src('src/*.html')
        .pipe(cheerio(function ($) {
            $('script').remove();
            $('body').append('<script src="js/script.min.js"></script>\n')
        }))        
        .pipe(dest('public'));
}
 
function streamJS() {
    return src('src/js/*.js')
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js'}))        
        .pipe(dest('public/js'));
}
 
function server() {
    sync.init({
        server: {
            baseDir: "./public"
        }
    });
    watch("./src/**/*.*").on("change", function() {
        sync.reload();
        streamHtml();
        streamJS();
    });
}
 
exports.streamHtml = streamHtml;
exports.server = server;
exports.streamJS = streamJS;
exports.default = function() {
    watch('src/*.html', streamHtml);
    watch('src/js/*.js', streamJS);
}

Az eddig használt lite-server helyett, most a browser-sync szervert fogjuk használni.

Telepítsük a browser-sync csomagot:

npm i browser-sync --save-dev

Bővítsük a gulpfile.js állományt az alábbiak alapján:

gulpfile.js

const { src, dest, watch } = require('gulp');
const sync = require("browser-sync").create();
 
function streamHtml() {
    return src('src/*.html').pipe(dest('public'));
}
 
function server() {
    sync.init({
        server: {
            baseDir: "./public"
        }
    });
    watch("./src/**.html").on("change", sync.reload);
    watch("./src/**.html").on("change", streamHtml);
}
 
exports.server = server;
exports.default = function() {
    watch('src/*.html', streamHtml);
}

Ha csak azt írom: gulp, végrehajtódik a változások másolása.

gulp

Ha azt írom gulp server, a változásra végrehajtódik a public-ba másolás és a böngésző újratöltése is.

gulp server

app01/
  |-node_modules/
  |-src/
  |  |-css/
  |  |  `-style.css
  |  `-index.html
  |-gulpfile.js
  |-package-lock.json
  `-package-json

mkdir app01
cd app01
npm init -y
npm install gulp --save-dev

Készítsünk egy gulp fájlt, ahol használjuk az src, dest és watch függvényeket:

gulpfile.js

const { src, dest, watch } = require('gulp');
 
function streamHtml() {
    return src('src/*.html').pipe(dest('public'));
}
 
exports.default = function() {
    watch('src/*.html', streamHtml);
}

Írunk egy streamHtml() függvényt, amelyet futtatunk, ha változik az src könyvtárban egy HTML oldal.

Hozzuk létre a HTML oldalt az src könyvtárban:

src/index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Valami</h1>
</body>
</html>

A gulp fájlban most van egy default nevű feladat. Ezt el tudjuk indítani. Indítsuk a gulp parancsot:

gulp

A gulp nem adja vissza a várakozási jelet, mert figyeli a megadott fájlok változását.

A gulp segítségével feladatokat határozunk meg, angolosan: taskokat. Az elérhető feladatokat listázhatjuk a következő paranccsal:

gulp --tasks

Bővíthetjük a figyelt és másolt fájlokat:

src('src/*.{html,js}'

A watch() függvényben is vegyük fel a js kiterjesztést.

A public könyvtáron, most már egy külön parancssorban lehet futtatni egy élő szervert.

Például a lite-server, ha telepítve van:

lite-server --baseDir=./public

app01/
  |-node_modules/
  |-public/
  |  |-index.html
  |  `-script.js
  |-src/
  |  |-index.html
  |  `-script.js
  |-gulpfile.js
  `-package.json

• https://gulpjs.com/docs/en/getting-started/quick-start/ (2021)
• https://www.npmjs.com/package/gulp-rename (2021)