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 Gulpvar gulp = require('gulp');// Transforma o javascript em formato ilegível para humanosvar uglify = require("gulp-uglify");// Agrupa todos os arquivos em umvar concat = require("gulp-concat");// Tarefa de minificação do Javascriptgulp.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 GULPgulp.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 Gulpvar gulp = require('gulp');// Verifica alterações em tempo real, caso haja, compacta novamente todo o projeto var watch = require('gulp-watch');// Minifica o CSSvar cssmin = require("gulp-cssmin");// Agrupa todos arquivos em UMvar concat = require("gulp-concat");// Remove comentários CSSvar 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 executadogulp.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 arquivogulp.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.csscss(pasta vazia)gulp.jspackage.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 Gulpvar gulp = require('gulp');// Transforma o javascript em formato ilegível para humanosvar uglify = require("gulp-uglify");// Agrupa todos os arquivos em umvar concat = require("gulp-concat");// Verifica alterações em tempo real, caso haja, compacta novamente todo o projeto var watch = require('gulp-watch');// Minifica o CSSvar cssmin = require("gulp-cssmin");// Remove comentários CSSvar 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 Javascriptgulp.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 GULPgulp.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.