Agrupar e minimizar ativos estáticos, como arquivos JavaScript e CSS, tem sido fundamental para melhorar o tempo de carregamento da página. O objetivo é reduzir o número de solicitações HTTPS e o tamanho dos arquivos.
As solicitações HTTP são caras de criar, o que atrasa o carregamento da página. O agrupamento concatina arquivos em um único arquivo. Os arquivos CSS e JavaScript podem ser combinados em um único arquivo, reduzindo o número de solicitações e eliminando atrasos adicionais enquanto o navegador avalia o código.
GruntJS é um executor de tarefas da web desenvolvido com base no NodeJS. O ecossistema grunt tem milhares de plug-ins úteis que devem automatizar quase todas as tarefas que você possa ter. O Grunt tem dois plug-ins para agrupar e minimizar CSS e JavaScript.
No Visual Studio, você provavelmente está acostumado a pressionar Ctrl + Shift + B para compilar uma solução e criar um build script para ferramentas de integração contínua. Isso dá início ao processo de construção de assemblies e executáveis. Mas e o JavaScript e o CSS? ASP.NET inclui uma solução de empacotamento e minificação, mas requer C # compilado que pode se tornar um pouco agitado para manter. O Visual Studio também oferece algumas análises estáticas de JavaScript e CSS, especialmente quando o Web Essentials está instalado. Outros editores como o Sublime também oferecem plug-ins para ajudar no processo de construção da web. O Grunt se destaca como uma solução de linha de comando independente e de plataforma cruzada.
O empacotamento e a minimização são uma das etapas mais negligenciadas para os aplicativos da web modernos. Apesar da pesquisa esmagadora que mostra que o agrupamento e a minimização melhoram drasticamente o tempo de carregamento de uma página da web, poucos sites a implementam. De acordo com o HTTPArchive, a página da web média faz 17 solicitações de arquivos JavaScript e 5 arquivos CSS externos. Quando faço pesquisas aleatórias em sites, raramente encontro sites com mais de 50 arquivos JavaScript e a maioria deles não são minimizados . Ferramentas como o Grunt tornam essa etapa muito fácil de implementar, eliminando a desculpa de todos.
O Grunt requer NodeJS, que pode ser facilmente instalado navegando para NodeJS página inicial . Você deverá ver um grande botão’Instalar’. Tocá-lo instalará o node em seu sistema, não se preocupe, ele é inteligente o suficiente para saber qual plataforma você está usando. Assim que o nó estiver configurado, você pode instalar o Grunt CLI ou a interface de linha de comando a partir do Node Package Manager (npm). O gerenciador de pacotes é semelhante ao NuGet para usuários do Visual Studio. NPM é o instalador da linha de comando do nó. O Grunt pode ser instalado globalmente digitando npm-g install grunt-cli na linha de comando.
A próxima etapa é configurar seu projeto. Isso é feito criando um arquivo package.json. O Node usa arquivos package.json para saber quais módulos devem ser instalados. Depois de configurado, você pode executar npm install ou npm update para atualizar os módulos atualmente instalados. Este artigo presume que o Grunt é a única ferramenta de nó que você usará, portanto, as dependências são todos plug-ins Grunt e Grunt.
Em meu último livro o aplicativo de filme usa o Grunt como sua ferramenta de construção web Este é o arquivo package.json:
{
"name":"Modern-Web-Movies", versão
"":"0.1.0",
"author":"Chris Love",
"private": true,
"devDependencies": {
"grunt":"~ 0.4. *",
"grunt-contrib-cssmin":"*",
"grunt-contrib-qunit":"*",
"grunt-contrib-jshint":"*",
"grunt-contrib-uglify":"*",
"matchdep":"*"
}
}
O arquivo contém, como sua extensão indica, um JSON (objeto JavaScript Notação) objeto. As primeiras quatro propriedades definem o nome do projeto, versão, autor e se é uma aplicação privada. O membro devDependencies define os módulos de nó necessários para executar o aplicativo. O aplicativo de filme usa alguns dos módulos de contribuição do Grunt, cssmin, qunit, jshint e uglify. O módulo matchdep evita que você tenha que carregar manualmente cada plugin do Grunt.
O Grunt é realmente configurado usando o gruntfile.js, que contém outro objeto JSON. Este conduz o grunt com configuração para cada módulo e ordem em que cada tarefa e configuração deve ser executada. A seguir está uma versão do gruntfile do aplicativo de filme com apenas as tarefas de agrupamento e minificação configuradas:
module.exports=function (grunt) {
require ("matchdep").filterDev ("grunt-*"). forEach (grunt.loadNpmTasks);
//Configuração do projeto.
grunt.initConfig ({
pkg: grunt.file.readJSON ('package.json'),
cssmin: {
sitecss: {
options: {
banner:''
},
arquivos: {
'css/site.min.css': [
'css/debug/site.css',
'css/debug/animations.css',
'css/debug/toolbar.css',
'css/debug/touch.css',
'css/debug/panorama.css',
'css/debug/movie.app.home-view.css',
'css/debug/movie.app.forms.css',
'css/debug/movie-grid.css',
'css/debug/movie.app.maps-view.css',
'css/debug/movie.app.movie-view.css',
'css/debug/movie.app.movies-view.css',
'css/debug/movie.app.nav.css',
'Css/debug/movie.app.search-view.css',
'css/debug/movie.app.theater-view.css']
}
}
},
uglify: {
options: {
compress: true
},
applib: {
src: [
'js/libs/dollarbill.min.js',
'js/libs/reqwest.js',
'js/libs/rottentomatoes.js',
'js/libs/fakeTheaters.js',
'js/libs/movie-data. js',
'js/libs/backpack.js',
'js/libs/deeptissue.js',
'js/libs/toolbar.js',
'js/libs/moustache.js',
'js/libs/panorama.js',
'js/libs/spa.js',
'js/libs/rqData.js',
'js/debug/movie.app.js',
'js/debug/movie.app.grid.js',
'js/debug/movie.app.home-view.js',
'js/debug/movie.app.account-view.js',
'js/debug/movie.app.maps-view.js',
'Js/debug/movie.app.movie-view.js',
'js/debug/movie.app.movies-view.js',
'js/debug/movie.app.news-view.js',
'js/debug/movie.app.search-view.js',
'js/debug/movie.app.privacy-view.js',
'js/debug/movie.app.search-view.js',
'js/debug/movie.app.theater-view.js',
'js/debug/movie.app.notfound-view.js',
'js/debug/movie.app.bootstrap.js'
],
dest:'js/applib.js'
}
}
});
//Tarefa padrão.
grunt.registerTask ('default', ['uglify','cssmin']);
};
Vamos dividir este arquivo em partes menores. Primeiro, o module.exports é o ponto de entrada para o Grunt executar sob o nó.
module.exports=function (grunt) {
//configuração aqui
};
Em seguida, o módulo do nó matchdep é usado para carregar cada tarefa do Grunt. Sem o módulo matchdep, cada tarefa precisaria ser registrada manualmente. Para uma configuração pequena como essa, não é grande coisa. Configurações mais complexas do Grunt podem ser muito mais detalhadas.
require (“matchdep”). FilterDev (“grunt-*”). ForEach (grunt.loadNpmTasks);
Sem matchdep cada o módulo deve ser registrado assim:
//Carregue o plugin que fornece a tarefa”uglify”.
grunt.loadNpmTasks (‘grunt-contrib-uglify’);
A próxima seção define a configuração real do Grunt. Primeiro, você aponta Grunt para o arquivo package.json. Ele usará essa configuração para garantir que todos os plug-ins estejam atualizados. Em seguida, você configura cada módulo, aqui apenas os plug-ins cssmin e uglify são definidos. CSSmin agrupa e minimiza arquivos CSS, Uglify faz o mesmo para JavaScript.
//Configuração do projeto.
grunt.initConfig ({
pkg: grunt.file.readJSON ('package.json'),
cssmin: {}
},
uglify: {}}) ;
Cada módulo tem suas próprias opções de configuração, você precisa verificar cada plugin para especificações. A maioria dos plug-ins precisa de arquivos de origem e um destino ou arquivo de saída. Aqui, o plugin CSSmin define um banner que é prefixado ao CSS minimizado. Isso é seguido pelos arquivos. Existem duas maneiras comuns de definir arquivos de origem e destino. A configuração cssmin usa o objeto files que possui uma única propriedade, o caminho do arquivo de destino. O caminho de destino é uma propriedade com o valor de uma matriz que contém os arquivos de origem. A matriz do arquivo de origem é organizada na ordem em que os arquivos devem ser agrupados. O arquivo de saída conterá o produto desses arquivos, minimizados para produção.
cssmin: {
sitecss: {
options: {
banner:'/* Meu arquivo css reduzido */'
},
arquivos: {
'css/site.min.css': [
//arquivos de origem
]
}
}
},
Da mesma forma, o módulo uglify precisa ser configurado. Aqui, a opção uglify compress é definida como true, para mais detalhes sobre o módulo uglify, leia a documentação . A configuração do arquivo de origem e destino é feita de maneira um pouco diferente da configuração cssmin. Aqui, ele define um nome de subtarefa,’applib’com o valor de um objeto JavaScript que define os arquivos de origem e o arquivo de destino. Novamente, a configuração do arquivo de origem é a ordem em que os arquivos precisam ser agrupados. Lembre-se de colocar primeiro sua dependência mais alta. O arquivo de destino é a versão agrupada e reduzida dos arquivos JavaScript.
uglify: {
options: {
compress: true
},
Applib: {
src: [
//arquivos de origem
],
dest:'js/applib.js'
}
}
O a última etapa é executar o grunt-cli. Para o Windows, isso é simples. Abra um prompt de comando e mude o diretório para o diretório de trabalho do projeto. Depois de fazer isso, você só precisa executar o comando grunt.cmd. Isso carregará o gruntfile e executará as tarefas configuradas.
Isso é tudo que você precisa para ter um sistema de construção web automatizado. Isso apenas mostra como agrupar e reduzir, mas há muitas outras coisas que Grunt pode automatizar para você. Esta configuração leva cerca de 5 a 10 minutos para ser definida. O aplicativo de filme usa as tarefas de agrupamento e minificação para reduzir 27 arquivos JavaScript a um único arquivo contendo 77kb, cerca de metade do conteúdo dos arquivos originais. O CSS foi reduzido de 14 arquivos para um arquivo combinado de <36kb, economizando cerca de 12kb no total. O capítulo 19 do meu livro, Aplicativos da Web de página única de alto desempenho mostra como usar o Grunt para mais do que apenas agrupar e minimizar.
