Pokud se chcete zbavit repetetivní, nudné práce a ušetřit si, tak spoustu času při vývoji Gulp je správnou volbou.
Pomocí Gulpu můžete optimalizovat obrázky, minifikovat soubory (css, js), spojovat soubory a mnoho dalšího.
Alternativy Gulpu jsou Webpack, Grunt a npm scripty.
Instalace Gulpu
Nejprve je nutné vytvořit package.json (npm init), která uchovává, všechny informace o projektu: název, popis, autor, ale také devDependencies (seznam balíčků a jejich verze)
Instalace Gulpu pomocí node package manageru: npm i gulp — save-dev
Po instalaci musíte vytvořit JS soubor gulp.js, ve kterém veškerou automatizaci a optimalizaci nastavíte.
Práce se soubory
Gulp obsahuje několik funkcí:
src()- odkazuje na soubory, se kterýmy chceme manipulovat
dest()- odkaz na výstupní složku, kam se soubory budou ukládat
watch()- sleduje změny v souborech
pipe()- předává zdrojové soubory
Skládání tasků
Jak je již v názvu zmíněno Gulp je task runner, to znamená, že spouští nějaké úkoly(funkce / metody), které nadefinujeme.
Gulp od verze 4 poskytuje dvě funkce series()- spouštění úkolů po sobě a parallel()- souběžné spuštění
Můj gulpfile
NPM balíčky (doplňky), které používám
gulp-sass: kompilace scss → css
browserSync: živé promítání změn v prohlížeči (reload stránky není potřeba)
gulp-autoprefixer: CSS autoprefixy
gulp-sourcemaps: plugin pro vytvoření sourcemap
cleanCSS: minifikace CSS
gulp-terser: minifikace JavaScriptu
gulp-concat: spojení všech js souborů do jednoho
// inicializace modulů (npm balíčků)
const gulp = require('gulp');
const { parallel } = require('gulp');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const terser = require('gulp-terser');
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();// uložení cest do proměnných
const srcPath = 'src/assets';
const distPath = 'dist/assets';// deklarace funkce style (task), která obsahuje několik procesů
function style() {
return gulp.src(`${srcPath}/scss/**/*.scss`)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({browsers: ['last 2 versions'], cascade: false}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(`${srcPath}/css`))
.pipe(browserSync.stream());
}function sassWatch(){
browserSync.init({
server: {
baseDir: './src'
}
}); gulp.watch(`${srcPath}/scss/**/*.scss`, style);
gulp.watch('src/*.html').on('change', browserSync.reload);
}function distHTML(){
return gulp.src('src/*.html')
.pipe(gulp.dest('dist/'));
}function distImages(){
return gulp.src(`${srcPath}/images/*.{png,gif,jpg`)
.pipe(gulp.dest(`${distPath}/images`));
}function distCSS(){
return gulp.src(`${srcPath}/css/*.css`)
.pipe(cleanCSS())
.pipe(gulp.dest(`${distPath}/css`));
}function distJS(){
return gulp.src(`${srcPath}/js/*.js`)
.pipe(concat('main.js')) // spojení všech js souborů do main.js
.pipe(terser())
.pipe(gulp.dest(`${distPath}/js`));
}// export tasků
exports.build = parallel(distHTML, distCSS, distJS, distImages);
exports.sassWatch = sassWatch;
