Chtěli jste někdy automatizovat nudné úkoly webdesignu a vývoje? Dovolte mi představit vám Gulpa. Gulp je systém sestavení streamování, jehož cílem je zvýšit produktivitu a efektivitu vašeho pracovního postupu. Toho se dosáhne automatizací všech těch nudných úkolů, jako je minifikace a optimalizace aktiv, které musíte dělat sami. S Gulp se můžete plně soustředit pouze na části své práce, které opravdu milujete. V tomto článku se dozvíte vše, co potřebujete, aby vám Gulp fungoval! Jste tedy připraveni posunout svou práci na další úroveň?
Jeden z důvodů, proč rád pracuji s Gulpem... Co to sakra! Proč miluji práci s Gulpem, je jeho jednoduchost. V nejjednodušším smyslu je způsob, jakým pracujete s Gulpem, nebo jak zpracováváte úkol, v podstatě tak, že říkáte „vezměte tento soubor, udělejte toto, udělejte také toto a toto a výsledek vložte sem. Může to být tak snadné, jak to zní? Ano, může. Může to být ještě jednodušší. V této příručce vám ukážu, jak nastavit úkoly Gulp a implementovat tento nástroj do vašeho pracovního postupu. Ale než začneme, podělím se s vámi trochu o Gulp, abyste mu lépe porozuměli.
Také, pokud stále nejste přesvědčeni, abyste tento zajímavý nástroj vyzkoušeli, podělím se s vámi o hromadu výhod. Než odmítnete možnost učinit Gulp součástí vaší sady nástrojů, zastavte se na pět minut svého drahocenného času. Pak se podívejte alespoň na sekci s výhodami Gulpu.
Co je Gulp
Je to docela dlouho, co běžci úloh JavaScriptu vstoupili na scénu vývoje front-endu. Pokud jste obeznámeni s touto „oblastí“ nástrojů, možná jste již slyšeli o dalších členech. Brokolice, Grunt, Gulp nebo Mimosa, abychom vám dali alespoň pár příkladů. A pochybuji, že celkový počet zůstane v blízké budoucnosti stejný. Spíše naopak. Postupem času získávají úkoly běžci na popularitě, takže je docela možné, že se začnou objevovat novější a dokonalejší nástroje.
Každopádně se vraťme k tématu této části... Co je Gulp? Gulp je sestavovací systém založený na JavaScriptu, který vývojáři používají k automatizaci nudných a opakujících se úloh. Některé z úkolů zahrnují minifikaci souborů HTML, CSS a JavaScript, kopírování souborů z jednoho místa na druhé, optimalizaci obrazových prostředků, jako jsou JPG (JPEG), PNG, SVG, GIF, kompilace sass, less a dalších souborů souvisejících se stylem do CSS. , zřetězení souborů, sledování souborů pro automatické opětovné spuštění úlohy při změně souboru, čištění složek a mnoho dalšího. Kompletní katalog pluginů naleznete zde.
Toto je jen hrstka úkolů, které pro vás Gulp může udělat. Nyní pravděpodobně chápete, jak se často označují nástroje jako Gulp – „nástroje pro vytváření“ nebo „provádění úloh“. Hlavním účelem použití těchto nástrojů je outsourcing úloh, které byste jinak museli provádět.
Ne všichni spouštěči úloh jsou stejní
Než se s Gulpem přesuneme dále, chci rychle zmínit, že ne všichni tito běžci úkolů nebo nástroje pro sestavení (raději jim říkám běžci úkolů, vy?) jsou stejné. Dovolte mi, abych vám poskytl stručný přehled dalších výše zmíněných spouštěčů úloh.
Grunt
Pamatujete si na Grunta? Ten je v současnosti největším konkurentem Gulpu. Nabízí také největší množství pluginů, které můžete použít. Gulp a Grunt jsou si velmi podobné. Největší rozdíl mezi těmito dvěma nástroji je v tom, jak je nakonfigurujete. Například konfigurace Gulp bývají mnohem kratší a jednodušší. Na druhou stranu se to samé nedá říct o Gruntovi. Také, pokud vezmete v úvahu statistiky, Gulp je často také rychlejší v testech. Prostředí v Gruntu nastavujete tak, že definujete všechny úkoly a možnosti, které chcete použít ve funkci wrapper.
Na prvním řádku této funkce je další s názvem „initConfig“. Tato funkce začíná zadáním souboru balíčku. Poté definujete úkoly, které má Grunt provádět a automatizovat v notaci JSON (jako balíček). Až s tím budete hotovi, musíte pluginy „nahrát“. Posledním krokem je registrace všech úloh. Tímto je vaše práce z velké části hotová. Nyní vše, co musíte udělat, je spustit „grunt“ v příkazovém řádku nebo „$ grunt“ na terminálu.
Příklad Gruntfile.js:
//wrapper function
module.exports = function(grunt) {
// Grunt configuration.
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
uglify: {
// Compress or minify JavaScript files.
build: {
src: ‘src/js/main.js’,
dest: ‘dist/js/main.min.js’
}
},
sass: {
dist: {
options: {
//Compress or minify output CSS.
compress: true
},
files: {
// Destination file and source file.
‘dist/css/main.css’: ‘src/scss/main.scss’
}
}
},
watch: {
styles: {
// Define what files to watch
files: [‘src/scss/main.scss’],
// If watched file is changed, what task to run.
tasks: [‘sass’]
},
scripts: {
files: [‘src/js/main.js’],
tasks: [‘uglify’],
options: {
nospawn: true
}
}
}
});
// Load the plugins and tasks
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-contrib-sass’);
grunt.loadNpmTasks(‘grunt-contrib-watch’);
// register task(s).
grunt.registerTask(‘default’, [‘uglify’, ‘watch’]);
}; Chcete-li spustit úlohy sestavení, zadejte do okna příkazového řádku:
grunt
Chcete-li spustit úlohy sestavení, zadejte do terminálu:
$ grunt
brokolice
Další pomůckou, kterou jsem zmínil, byla Brokolice. Na rozdíl od předchozích dvou příkladů se tento sestavovací nástroj zaměřuje na další běžné úkoly sestavovacího nástroje, které pravděpodobně velmi dobře znáte – kompilaci aktiv. Jedním ze způsobů, kterým se Broccoli od Gruntu liší, je to, že když běží, zjistí, které soubory sledovat a co znovu sestavit, když se soubor změní. Jinými slovy, zatímco Grunt vždy přestaví celý projekt od nuly, Broccoli bude pracovat pouze se soubory, které byly změněny.
Dalším rozdílem mezi Brokolicí a ostatními spouštěči úloh je, že místo souborů používá stromy. Můžete si představit strom je adresář se soubory, podadresáře se soubory a tak dále. Pokud jde o konfiguraci, Broccoli preferuje podobnou logiku kódu jako Gulp.
Příklad Brocfile.js:
//Load plugins you want to use.
var uglifyJavaScript = require('broccoli-uglify-js');
var compileSass = require('broccoli-sass');
var mergeTrees = require('broccoli-merge-trees');
// Specify Sass directory
var sassDir = 'src/scss';
// Specify how do you want Sass to be compiled
var styles = compileSass([sassDir], main.scss','main.css');
// Merge the compiled styles into one output directory.
module.exports = mergeTrees([styles, 'dist']); Chcete-li spustit úlohy sestavení, zadejte do okna příkazového řádku:
broccoli build dist
Chcete-li spustit úlohy sestavení, zadejte do terminálu:
$ broccoli build dist
Mimóza
Poslední úkolový běžec, který jsem zmínil, byla Mimosa. Podle svých webových stránek je Mimosa bleskově rychlý nástroj pro vývoj moderních webových aplikací. Z toho, co jsem viděl, je konfigurace Mimosa docela jednoduchá. Musíte pouze určit, jaké moduly chcete používat a složky, které chcete sledovat. Poté, když spustíte spuštění Mimosa (úloha sledování), zahájí úlohu sledování, která bude hledat změny ve vámi zadaných složkách. Pokud používáte jiné pluginy pro kompilaci less nebo sass nebo minifikaci stylů a skriptů, vše zkompiluje a minifikuje.
Příklad souboru mimosa-config.js:
exports.config = {
// What modules to use
modules: [
‘csslint’,
‘jshint’,
‘minify-js’,
‘minify-css’,
‘require’,
‘sass’,
],
// What directories to watch
watch: {
sourceDir: ‘src’,
compiledDir: ‘dist’,
javascriptDir: ‘js’
},
// Location of vendor scripts (relative to sourceDir)
vendor: {
javascripts: ‘js/vendor’,
}
}; Chcete-li spustit úlohy sestavení, zadejte do okna příkazového řádku:
mimosa build
Chcete-li spustit úlohy sestavení, zadejte do terminálu:
$ mimosa build
Zpět na Gulp
To byl malý přehled a nahlédnutí do nejpoužívanějších úloh na scéně webdesignu a vývoje. Nyní je čas pokračovat v naší cestě za poznáním Gulpu. První věc, na kterou se podíváme, budou výhody používání Gulpu.
Jaké jsou výhody Gulpu
První a nejatraktivnější výhodou Gulpu je snadné použití. Po pravdě řečeno, může to být zpočátku trochu ohromující. Když si však vezmete minutu nebo dvě a projdete kód, je to opravdu jednoduché a snadno se používá. Další výhodou je podle webu efektivita Gulpu:„S využitím výkonu uzlových proudů vám gulp poskytuje rychlé sestavení, která nezapisují zprostředkující soubory na disk.“ Další výhodou je vysoký standard kvality. Toto je odkaz na katalog pluginů, které jsou k dispozici pro použití v Gulpu. Stručně řečeno, každý vytvořený plugin se musí řídit specifickými pokyny.
V opačném případě nebude schválen. Jedním z požadavků je, aby plugin zůstal jednoduchý. To znamená, že každý plugin by měl dělat pouze jednu věc. Nemělo by také dělat věci, za které jsou zodpovědné jiné pluginy. Více informací naleznete v oficiální dokumentaci pokynů. Poslední výhodou je, že se Gulp snadno učí. No, ano, je snadné se to naučit, pokud nebudete brát jeho webovou stránku jako výchozí bod. Pokud se chcete dozvědět o Gulpu, mnohem lepší volbou je výukový program třetí strany, jako je ten, který právě čtete.
Začínáme
Než budete moci tento úžasný nástroj implementovat do svého projektu a začít s ním experimentovat, musíte udělat několik kroků. Nebojte se, v této sekci vás provedu celým procesem.
Instalace uzlu
První a nejdůležitější věc, kterou musíte udělat, je nainstalovat Node do vašeho počítače. Bez tohoto prostředí ve vašem zařízení nebudete moci pokračovat v této příručce a zprovoznit Gulp. Spusťte tedy prohlížeč a přejděte na web Node.js, kde si jej můžete stáhnout a nainstalovat do počítače. Naštěstí je tato část procesu poměrně rychlá a bezbolestná. Budete potřebovat několik minut.
Instalace Gulpu
Po dokončení instalace Node můžete pracovat s npm (Node Package Manager). Tento správce použijeme k instalaci Gulpu do vašeho počítače. Pokud používáte Mac nebo Linux, otevřete svůj terminál. Pro uživatele Windows to bude okno příkazového řádku. Nyní musíte spustit následující příkaz a nainstalovat jej jako globálně dostupný balíček (dostupný ve vašem operačním systému).
V terminálu:
$ npm install --global gulp-cli
V okně příkazového řádku:
npm install --global gulp-cli
Package.json a závislosti
Dobře, úspěšně jste na svůj počítač nainstalovali Node.js a Gulp. Dalším krokem je přejít do adresáře vašeho projektu a vytvořit soubor s názvem ‚package.json‘. Můžete také otevřít adresář projektu v okně terminálu nebo příkazového řádku a nechat npm vytvořit soubor kostry za vás. Příkaz k tomu je následující:
V terminálu:
$ npm init
V okně příkazového řádku:
npm init
Když spustíte tento příkaz, npm vás provede krátkým a jednoduchým procesem nastavení. Budete požádáni o zadání názvu vašeho projektu (mezery a velká písmena nejsou povoleny), jeho verzi, popis, vstupní bod, testovací příkaz, úložiště git, klíčová slova, autora a licenci. Jediné položky požadované pro soubor package.json jsou název a verze. Zbytek můžete přeskočit, pokud chcete.
Příklad souboru package.json:
{
"name": "project-name",
"version": "0.0.1",
"description": "Example of package.json file.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Project Author",
"license": "ISC"
} Jakmile je soubor package.json vytvořen, budete muset nainstalovat Gulp jako devDependency pro váš projekt. devDependencies jsou v podstatě balíčky nebo pluginy, které npm stáhne do složky „node_modules“ ve vašem projektovém adresáři. O tuto složku se nemusíte starat. npm jej vytvoří a bude spravovat jeho obsah sám. Ještě jedna věc… Pokaždé, když nainstalujete nějakou devDependency, npm automaticky aktualizuje soubor package.json. Chcete-li nainstalovat Gulp jako devDependency, spusťte následující příkaz:
V terminálu:
$ npm install --save-dev gulp
V okně příkazového řádku:
npm install --save-dev gulp
Aktualizovaný soubor package.json:
{
"name": "project-name",
"version": "0.0.1",
"description": "Example of package.json file.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Project Author",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1"
}
} Dalším krokem je vytvoření dalšího souboru s názvem „gulpfile.js“. Tento soubor musí být také umístěn v adresáři projektu (root) stejně jako package.json. Uvnitř tohoto souboru musíte načíst pluginy Gulp vytvořením nové proměnné nazvané „gulp“ s hodnotou „require(‘gulp‘)“. Poté budete muset pouze vytvořit nový úkol. Každá úloha je funkce, která má jeden parametr – název úlohy – a funkci, která bude obsahovat instrukce pro tuto úlohu.
Základní soubor gulp.js:
// Loading Gulp plugin
var gulp = require(‘gulp’);
// New gulp task
gulp.task(‘default’, function() {
// Code for setting the task
}); Přidávání nových úkolů
Nyní nainstalujme několik dalších pluginů, které vám ukážou, jak vytvářet a nastavovat úlohy. V našem projektu budeme chtít minifikovat všechny HTML soubory, zkompilovat sass do CSS a minifikovat JavaScript. K tomu budeme muset nainstalovat následující devDependencies (pluginy):gulp-htmlmin, gulp-sass, gulp-uglify. Zahrneme také plugin pro generování zdrojových map:gulp-sourcemaps.
V terminálu:
$ npm install --save-dev gulp-htmlmin gulp-sass gulp-uglify gulp-sourcemaps.
V okně příkazového řádku:
npm install --save-dev gulp-htmlmin gulp-sass gulp-uglify gulp-sourcemaps.
Aktualizovaný soubor package.json:
{
"name": "project-name",
"version": "0.0.1",
"description": "Example of package.json file.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Project Author",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-htmlmin": "^1.3.0",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.3"
}
} Rychlá poznámka:Všimli jste si, že pluginy v package.json jsou vždy seřazeny podle abecedy?
Dále musíme do gulpfile.js přidat nové pluginy a vytvořit potřebné úlohy. Každý plugin bude k načtení vyžadovat novou proměnnou, stejně jako Gulp. Poté pro tyto pluginy vytvoříme několik úloh. Vytvoříme také úlohu „sledování“ pro sledování změn souborů sass. Každou úlohu můžete spustit příkazem „gulp taskName“. Na konci souboru však vytvoříme další úlohu pro automatizaci všech úloh. Poté bude jediný příkaz, který kdy budete potřebovat, „gulp“ pro uživatele Windows nebo „$ gulp“ pro terminál.
Hotová verze gulpfile.js:
// Loading Gulp plugin
var gulp = require(‘gulp’);
var htmlmin = require(‘gulp-htmlmin’);
var sass = require(‘gulp-sass’);
var sourcemaps = require(‘gulp-sourcemaps’);
var uglify = require(‘gulp-uglify’);
// Minify HTML files
gulp.task(‘minifyHTML’, function() {
// Specifying source folder and files
return gulp.src(‘src/*.html’)
// Running htmlmin plugin
.pipe(htmlmin({collapseWhitespace: true, removeComments: true}))
// Specifying destination folder where will be copied processed files
.pipe(gulp.dest(‘dist’))
});
// Compile sass to CSS
gulp.task(‘sass’, function() {
// Specifying source folder and file (I use one main file with @import)
return gulp.src(‘src/scss/main.scss’)
// Initiate sourcemaps plugin (if not used, skip this)
.pipe(sourcemaps.init())
// Running sass plugin – it will compress output code and log any errors
.pipe(sass({outputStyle: ‘compressed’}).on(‘error’, sass.logError))
// Finish work of sourcemaps plugin (again, if not used, skip this)
.pipe(sourcemaps.write(‘.’))
// Specifying destination folder where will be copied processed files
.pipe(gulp.dest(‘dist/css’));
});
// Minify JavaScript files
gulp.task(‘minifyJS’, function() {
// Specifying source folder and file
return gulp.src(‘src/js/main.js’)
// Running uglify plugin
.pipe(uglify())
// Specifying destination folder where will be copied processed files
.pipe(gulp.dest(‘dist/js’));
});
// Watch for changes
gulp.task(‘watch’, function(){
gulp.watch(‘src/scss/**/*.scss’, [‘sass’]);
});
// Automate tasks
gulp.task(‘default’, [‘minifyHTML’, ‘sass’, ‘minifyJS’], function() {}); Co se naučit
Řekněme, že chcete zvládnout pracovní postup s Gulp. Kolik věcí se budete muset naučit? Věřte tomu nebo ne, existují pouze čtyři metody, které kdy budete potřebovat při práci s Gulpem. Tyto metody jsou následující:
gulps.task(name, fn) – this will define new task; you have to pass in name and a function that will contain instructions for the task.
gulp.watch(glob, fn) – when a specific file will change, it will run specific task that matches
gulp.src(glob) – returns a readable stream – the source folder you want to process.
gulp.dest(folder) – for specifying the destination folder – place for saving processed files
Nebezpečí hltu
Největší problém, kterému musí tento nástroj čelit, souvisí s jeho novinkou. Zatím se nepodařilo vybudovat pevnou základnu podpory. Přestože jeho přijetí při akceleraci a katalogu pluginů roste, jsou věci (nebo úkoly), které zatím nejsou k dispozici. V tuto chvíli existuje více než dva tisíce pluginů. Toto číslo je vysoké, ale ve srovnání s pěti tisíci pluginy dostupnými pro Grunt je stále prostor k zaplnění. Totéž lze říci o tutoriálech.
Stále není tak snadné najít dobrý tutoriál, abyste pochopili, jak používat tento task runner a jak jej implementovat do běžného pracovního postupu. Pevně věřím, že tento článek to pomůže změnit. Také věřím, že komunita kolem Gulpu poroste a pomůže ostatním lidem přijmout tento nástroj.
Druhý problém, který často slýchám od kolegů designérů a webových vývojářů, je, že potřebujete alespoň nějaké zkušenosti s JavaScriptem, abyste se mohli naučit pracovat s tímto běžcem úloh. Ano, tento argument je legitimní. Vzhledem k tomu, že máme co do činění s JavaScript task runnery, je celkem logické, že budete pravděpodobně potřebovat nějaké znalosti JavaScriptu. Navzdory tomu, co jsem právě řekl, nejsem přesvědčen, že znalost JavaScriptu je nezbytným předpokladem pro práci s Gulp.
Měli bychom vzít v úvahu, že všechny úkoly musíte definovat pouze jednou. Pak už se na gulpfile nemusíte znovu dívat. A protože každý plugin obsahuje (alespoň) základní dokumentaci a příklady, může Gulp zprovoznit i ten, kdo zná pouze HTML a CSS. S ohledem na současný stav webu bych však vřele doporučil, aby si každý, kdo se zajímá o webdesign a/nebo vývoj webu, věnoval čas na to, aby se naučil JavaScript. Dobrým místem pro začátek bude série JavaScript 101 publikovaná na tomto blogu. Poté se můžete věnovat pokročilejším tématům, jako jsou návrhové vzory JavaScriptu.
Otázkou je, zda se potenciální křivka učení vyplatí investovat svůj čas. Když se zamyslíte nad dopadem a výhodami implementace task runneru do vašeho pracovního postupu, myslím, že ano. Jen zvažte, kolik času ušetříte na jiné, zajímavější věci, pokud strávíte pouhou jednu nebo dvě hodiny učením se, jak používat Gulp.
Uzavření myšlenek na doušek
Poslední věc, kterou vám nechám, je toto. Dávejte pozor na to, jak napíšete konfigurační soubor. Je docela snadné zajít příliš daleko a přemoci to vytvořením chaotického nepořádku. Může to být z hlediska toho, jak jsou definovány vaše úkoly, nebo obecně formátování kódu. Pamatujte, že váš kód by měl být čistý, snadno srozumitelný a udržovatelný. Než napíšete svůj první úkol, zamyslete se nad požadavky svého projektu. Zpochybňujte každý úkol, který chcete vytvořit. Potřebujete minifikaci? Potřebujete živé načtení?
Nejlepší způsob, jak dosáhnout nejproduktivnějšího pracovního postupu s Gulp, je přemýšlet o tom, jaké nezbytné úkoly potřebujete. Pamatujte, že v případě potřeby můžete vždy přidat nový úkol. Nástroje jako task runners jsou určeny k tomu, aby byla vaše práce jednodušší a produktivnější. Neměli byste trávit hodiny jejich konfigurací.