Há algum tempo, publiquei um artigo sobre como o senhor pode criar aplicativos mais rapidamente usando uma ferramenta de compilação chamada Angus. Nesse meio tempo, a ferramenta ficou muito melhor, adotando o conceito de configurações de compilação declarativas. Neste artigo, gostaria de mostrar aos senhores o que isso significa e como o Angus pode ajudá-los a criar aplicativos Web de forma muito mais rápida.
No restaurante
Imagine por um segundo que o senhor está sentado em um restaurante. O senhor dá uma olhada no cardápio. O senhor decide que gostaria de comer uma Pizza Vegeta hoje, porque está se sentindo saudável. Hmm!
Em seguida, o senhor se levanta da mesa. O senhor vai até a cozinha. O senhor começa a delegar.
“O senhor aí! Pegue um pouco de massa e faça-a plana e redonda”.
“E o senhor! Pique algumas cebolas, tomates e pimentões”.
“Agora o senhor, pegue o molho de tomate e o queijo e coloque-os sobre a massa.”
“Coloque todos esses legumes na pizza e depois coloque-a no forno por dez minutos!”
Depois de dez minutos, o senhor volta. O senhor coloca a pizza em seu prato, vai até sua mesa e começa a comer.
GulpJS: um estudo de caso
Vamos acordar e dar uma olhada em uma configuração comum de ferramenta de compilação do 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']);
Se o senhor comparar essa configuração com a cena absurda do restaurante, ela não é muito diferente. O senhor está dizendo ao Gulp o que fazer, como fazer e quando e onde obter os arquivos compilados.
Podemos fazer melhor do que isso? E se houvesse uma maneira de dizer ao Gulp: “Ei, hoje eu gostaria de uma Pizza Vegeta”?
E se houvesse uma ferramenta em que o senhor pudesse dizer: “Hoje eu gostaria de ter um aplicativo que usasse o AngularJS, um pouco de bootstrap, o karma como executor de testes e, hmmmm… Desta vez, vou usar o Sass como compilador de CSS”.
Depois de criar vários aplicativos, sempre me vi tendo que declarar as mesmas tarefas repetidas vezes, embora elas permanecessem essencialmente as mesmas em todos os meus aplicativos. Por causa da frustração com essa situação, decidi criar uma ferramenta chamada Angus que torna as configurações de compilação declarativas.
Dê uma olhada em uma configuração comum da Angus.
{
bower: {
packages: [
'angular',
'threejs',
'Keypress',
'underscore@1.7.0',
'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'
};
Essencialmente, estou dizendo ao Angus quais pacotes do bower meu aplicativo precisa e quais arquivos devem ser realmente usar desses pacotes do bower. Em seguida, estou declarando que ele usa AngularJS, Karma como seu executor de testes e Less como seu compilador de CSS.
É isso aí. Não há outros arquivos de configuração ocultos. Eu apenas executo angus dev na linha de comando e meu aplicativo é iniciado no navegador, pronto para ser usado.
O Angus cuida de tudo. Ele instala os pacotes do bower, minimiza os arquivos, compila o CSS, observa as alterações e inicia o aplicativo em um navegador. Mas há muito mais recursos.
Convenção sobre configuração
Angus aplica o conceito de convenção sobre configuração para que não sobrecarregue o usuário com escolhas desnecessárias, como onde armazenar os arquivos distribuídos… -#13;
Por um lado, ele exige que o senhor faça o layout dos arquivos de origem de uma forma comum para aplicativos da Web.
hello-world/
bower_components/
src/
assets/
style/
core/
index.html
angus.config.js
Isso torna as coisas muito mais simples. Com os arquivos de origem estruturados da mesma forma para todos os aplicativos, o Angus pode criar automaticamente o aplicativo sem que o usuário precise especificar onde estão os arquivos de origem e de biblioteca.
Em seguida, todas as tarefas subjacentes usam essa estrutura de pastas para criar seu aplicativo. Todas as tarefas comuns são pré-configuradas, o Angus apenas diz a elas se devem ser executadas ou não com base no seu arquivo de configuração. Novamente, isso é declarativo.
Além disso, é muito mais fácil de manter. Por exemplo, se o senhor quiser mudar para outro compilador CSS, basta ativá-lo no arquivo de configuração.
Início rápido
Começar a usar o Angus é fácil. Basta instalá-lo com npm install -g angus.
Em seguida, crie um aplicativo de amostra fazendo angus create hello-world. Isso criará uma pasta hello-world.
Dentro dessa pasta, execute angus dev e abra seu navegador para visitar http://localhost:9000/.
É isso aí! Para obter mais informações, consulte a seção detalhada do detalhado no GitHub.
Conclusão
Espero que este artigo tenha lhe dado novos insights sobre como as configurações de compilação declarativas podem ajudá-lo a concentrar seus esforços no aplicativo e não no processo de compilação;
O Angus recebeu muitos comentários positivos até o momento, e convido os senhores a experimentá-lo e a dar sua opinião. Se tiver alguma dúvida, terei prazer em respondê-la na seção de comentários abaixo.
