Otimizar CSS com Gulp – Agrupar + Minificar

No post anterior fizemos uma introdução ao Gulp e como automatizar a tarefa de Minificar + Compactar código javascript. Neste, vamos trabalhar com CSS executando as seguintes funções: remover comentários, compactar e gerar apenas um arquivo final.

Se você não viu o post anterior, confira este link, será necessário pois existem passos a serem seguidos. O código final do post anterior resultou para compactação + minificação de JS, veja o resultado:

var js  = [
    './js-source/vendor/jquery/*',         // Todos os arquivos do diretório Jquery
    './js-source/vendor/bootstrap/*.*',    // Todos os arquivos do diretório bootstrap e sub diretórios
    './js-source/main.js'                  // Arquivo único
];

// Núcleo do Gulp
var gulp = require('gulp');

// Transforma o javascript em formato ilegível para humanos
var uglify = require("gulp-uglify");

// Agrupa todos os arquivos em um
var concat = require("gulp-concat");

// Tarefa de minificação do Javascript
gulp.task('minify-js', function () {
    gulp.src(js)                        // Arquivos que serão carregados, veja variável 'js' no início
    .pipe(concat('script.min.js'))      // Arquivo único de saída
    .pipe(uglify())                     // Transforma para formato ilegível
    .pipe(gulp.dest('./js/'));          // pasta de destino do arquivo(s)
});

// Tarefa padrão quando executado o comando GULP
gulp.task('default',['minify-js']);

// Tarefa de monitoração caso algum arquivo seja modificado, deve ser executado e deixado aberto, comando "gulp watch".
gulp.task('watch', function() {
    gulp.watch(js, ['minify-js']);
});

 

Para trabalhar com CSS é necessário instalar outros plugins, execute o comando abaixo no prompt, lembre, você deve estar na pasta do seu projeto:

npm install --save-dev gulp-cssmin gulp-watch gulp-concat gulp-strip-css-comments

 

Com os plugins instalados, crie o arquivo gulp.js com o seguinte conteúdo, este arquivo é válido apenas para trabalhar com CSS, no final do post mostraremos os 2 scripts trabalhando em conjunto:

// Definimos o diretório dos arquivos para evitar repetição futuramente

// Todos os arquivos CSS que serão compactados
// Explicação: /* busca todos os arquivos de uma pasta, /**/*.* busca todos os arquivos de uma pasta e sub pasta.
var css = [
 './css-source/bootstrap/*.css',
 './css-source/style.css'
];

// Núcleo do Gulp
var gulp = require('gulp');

// Verifica alterações em tempo real, caso haja, compacta novamente todo o projeto 
var watch = require('gulp-watch');

// Minifica o CSS
var cssmin = require("gulp-cssmin");

// Agrupa todos arquivos em UM
var concat = require("gulp-concat");

// Remove comentários CSS
var stripCssComments = require('gulp-strip-css-comments');

// Processo que agrupará todos os arquivos CSS, removerá comentários CSS e minificará.
gulp.task('minify-css', function(){
    gulp.src(css)
    .pipe(concat('style.min.css'))
    .pipe(stripCssComments({all: true}))
    .pipe(cssmin())
    .pipe(gulp.dest('./css/'));
});

// Cria a TASK padrão, esta linha será processada quando o comando "GULP" for executado
gulp.task('default','minify-css');

// Cria a TASK de verificar em tempo real alterações, se detectar alguma alteração, será processado o comando relativo ao arquivo
gulp.task('watch', function() {
  gulp.watch(css, ['minify-css']);
});

 

Neste exemplo, partimos do pré-suposto que existe a seguinte estrutura de pastas/arquivos:

css-source
    vendor
        bootstrap
            bootstrap.css
    style.css
css(pasta vazia)
gulp.js
package.json

 

Execute o comando

gulp

 

Será gerado um arquivo CSS na pasta ‘css’ com o nome de style.min.css com todo o conteúdo de arquivos CSS selecionados. Caso queira que o gulp monitore alterações nos arquivos CSS e compacte automaticamente caso sofra alterações, use o seguinte comando e deixe o prompt aberto.

gulp watch

 

Agora vamos utilizar os 2 scripts, otimização de CSS e JS:

// Definimos o diretório dos arquivos para evitar repetição futuramente

// Todos os arquivos CSS que serão compactados
// Explicação: /*.css busca todos os arquivos css de uma pasta, /**/*.css busca todos os arquivos css de uma pasta e sub pasta.
var css = [
 './css-source/bootstrap/*.css',
 './css-source/style.css'
];

// Todos os arquivos JS que serão compactados
// Explicação: /*.js busca todos os arquivos css de uma pasta, /**/*.js busca todos os arquivos js de uma pasta e sub pasta.
var js  = [
    './js-source/vendor/jquery/*.js',         // Todos os arquivos do diretório Jquery
    './js-source/vendor/bootstrap/*.js',    // Todos os arquivos do diretório bootstrap e sub diretórios
    './js-source/main.js'                  // Arquivo único
];

// Núcleo do Gulp
var gulp = require('gulp');

// Transforma o javascript em formato ilegível para humanos
var uglify = require("gulp-uglify");

// Agrupa todos os arquivos em um
var concat = require("gulp-concat");

// Verifica alterações em tempo real, caso haja, compacta novamente todo o projeto 
var watch = require('gulp-watch');

// Minifica o CSS
var cssmin = require("gulp-cssmin");

// Remove comentários CSS
var stripCssComments = require('gulp-strip-css-comments');

// Processo que agrupará todos os arquivos CSS, removerá comentários CSS e minificará.
gulp.task('minify-css', function(){
    gulp.src(css)
    .pipe(concat('style.min.css'))
    .pipe(stripCssComments({all: true}))
    .pipe(cssmin())
    .pipe(gulp.dest('./css/'));
});

// Tarefa de minificação do Javascript
gulp.task('minify-js', function () {
    gulp.src(js)                        // Arquivos que serão carregados, veja variável 'js' no início
    .pipe(concat('script.min.js'))      // Arquivo único de saída
    .pipe(uglify())                     // Transforma para formato ilegível
    .pipe(gulp.dest('./js/'));          // pasta de destino do arquivo(s)
});

// Tarefa padrão quando executado o comando GULP
gulp.task('default',['minify-js','minify-css']);

// Tarefa de monitoração caso algum arquivo seja modificado, deve ser executado e deixado aberto, comando "gulp watch".
gulp.task('watch', function() {
    gulp.watch(js, ['minify-js']);
 gulp.watch(css, ['minify-css']);
});

Executando o comando gulp, será compactado css e js, executando o comando gulp watch os arquivos serão monitorados, e caso css ou js seja alterado, será executado a ação correspondendo a cada arquivo.

Dúvidas? Sugestões? Deixe nos comentários.