Před časem jsem zveřejnil článek, jak můžete rychleji vytvářet aplikace pomocí nástroje Angus. Mezitím je nástroj mnohem lepší a zahrnuje koncept deklarativních konfigurací sestavení. V tomto článku bych vám rád ukázal, co to znamená a jak vám Angus může pomoci vytvářet webové aplikace mnohem rychleji.
V restauraci
Představte si na vteřinu, že sedíte v restauraci. Podíváte se do menu. Rozhodnete se, že si dnes dáte Pizza Vegeta, protože se cítíte zdravě. Hmm!
Poté vstanete od stolu. Jdete do kuchyně. Začnete delegovat.
"Ty tam! Vezmi trochu těsta a udělej ho ploché a kulaté."
"A vy! Nakrájejte cibuli, rajčata a papriku."
"Teď si vezměte rajčatovou omáčku a sýr a dejte je na těsto."
"Dejte všechnu tu zeleninu na pizzu a pak ji vložte na deset minut do trouby!"
Po deseti minutách se vrátíš. Dáte si pizzu na talíř, dojdete ke stolu a začnete jíst.
GulpJS:Případová studie
Probuďme se a podívejme se na běžnou konfiguraci sestavovacího nástroje od GulpJS.
gulp.task('clean', function(cb) {
del(['build'], cb);
});
gulp.task('scripts', ['clean'], function() {
return gulp.src(paths.scripts)
.pipe(sourcemaps.init())
.pipe(coffee())
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'));
});
gulp.task('images', ['clean'], function() {
return gulp.src(paths.images)
.pipe(imagemin({optimizationLevel: 5}))
.pipe(gulp.dest('build/img'));
});
gulp.task('watch', function() {
gulp.watch(paths.scripts, ['scripts']);
gulp.watch(paths.images, ['images']);
});
gulp.task('default', ['watch', 'scripts', 'images']);
Porovnáte-li tuto konfiguraci s absurdní scénou restaurací, v podstatě se tolik neliší. Říkáte Gulpu, co má dělat, jak to dělat a kdy a kde získat zkompilované soubory.
Můžeme to udělat lépe? Co kdyby existoval způsob, jak říct Gulpovi:"Hej, dnes bych si dal Pizza Vegeta."?
Co kdyby existoval nástroj, kde byste mohli říct:„Dnes bych chtěl mít aplikaci, která používá AngularJS, nějaký bootstrap, karmu jako testovací běžec a hmmmm... Tentokrát budu mít Sass jako kompilátor CSS. "
."Angus, deklarativní nástroj pro sestavení
Po vybudování spousty aplikací jsem vždy zjistil, že musím znovu a znovu deklarovat stejné úkoly, ačkoli v mých aplikacích v podstatě zůstaly stejné. Z frustrace ze stavu věcí jsem se rozhodl vytvořit nástroj nazvaný Angus, díky kterému jsou konfigurace sestav deklarativní.
Podívejte se na běžnou konfiguraci Angus.
{
bower: {
packages: [
'angular',
'threejs',
'Keypress',
'[email protected]',
'angular-ui-router',
'hammerjs'
],
filesNeeded: {
js: [
'angular/angular.js',
'angular-ui-router/release/angular-ui-router.js',
'Keypress/keypress.js',
'hammerjs/hammer.min.js',
'threejs/build/three.js',
'underscore/underscore.js'
]
}
},
usesAngularJS: true,
testRunner: 'karma',
cssCompiler: 'less'
};
V podstatě říkám Angusovi, které balíčky bower potřebuje moje aplikace a které soubory skutečně použít z těch balíčků. Dále prohlašuji, že používá AngularJS, Karma jako testovací běžec a Less jako kompilátor CSS.
To je ono. Neexistují žádné další skryté konfigurační soubory. Právě jsem spustil angus dev z příkazového řádku a moje aplikace se spustí v prohlížeči, připravena k použití.
Angus se o všechno postará. Nainstaluje vaše balíčky bower, minimalizuje vaše soubory, zkompiluje vaše CSS, sleduje změny a spouští vaši aplikaci v prohlížeči. Ale je tu mnohem více funkcí.
Konvence nad konfigurací
Angus aplikuje koncept konvence nad konfigurací, takže nezatěžuje uživatele zbytečnými volbami, jako je umístění distribuovaných souborů. Jednak to vyžaduje, abyste rozmístili zdrojové soubory způsobem, který je běžný pro webové aplikace.
hello-world/
bower_components/
src/
assets/
style/
core/
index.html
angus.config.js
Díky tomu jsou věci mnohem jednodušší. Tím, že máte zdrojové soubory strukturované stejným způsobem pro každou aplikaci, může Angus automaticky vytvořit vaši aplikaci, aniž byste museli specifikovat, kde jsou vaše zdrojové soubory a soubory knihovny.
Dále všechny základní úlohy používají tuto strukturu složek k sestavení vaší aplikace. Všechny běžné úlohy jsou předkonfigurovány, Angus jim na základě vašeho konfiguračního souboru jen řekne, zda se mají provést nebo ne. Opět je to deklarativní.
Navíc je mnohem jednodušší na údržbu. Pokud například chcete přejít na jiný kompilátor CSS, stačí jej povolit ve vašem konfiguračním souboru.
Rychlý start
Začít s Angusem je snadné. Stačí jej nainstalovat pomocí npm install -g angus .
Dále vytvořte ukázkovou aplikaci provedením angus create hello-world . Tím se vytvoří složka hello-world .
Uvnitř této složky spusťte angus dev a otevřete svůj prohlížeč a navštivte http://localhost:9000/ .
A je to! Další informace najdete v podrobném souboru readme na GitHubu.
Závěr
Doufám, že vám tento článek poskytl nové poznatky o tom, jak vám deklarativní konfigurace sestavení mohou pomoci zaměřit vaše úsilí na vaši aplikaci, nikoli na proces sestavování. udělejte si názor sami. Pokud máte nějaké dotazy, rád je zodpovím v sekci komentářů níže.