Categorias

Minificando arquivos JS no Gulp

Automatizar algumas tarefas no durante o processo de desenvolvimento, principalmente as tarefas mais chatinhas, é o que o Gulp faz de melhor.

Eu uso (e abuso) do Gulp de diversas formas, uma das minhas favoritas é minificar/compactar meus scripts javascript em arquivos .min.js. Ou melhor ainda, juntar todos meus arquivos .js e um único .min.js automaticamente!

Mágica? Nada disso… Gulp!

Apresento então a vocês 2 tasks que costumo utilizar em meu gulpfile.js:

Importante: Vou tomar por base que o Gulp já está instalado no seu projeto. A intenção aqui é ser prático, OK?.

o primeiro exemplo pega todos os arquivos .js da pasta assets_dev/js e cria uma versão minificada na pasta assets/js.
Lembre-se que as pastas citadas são atribuidas nas seguintes variáveis: js_dev e js_dist. Mude à vontade, porém se a pasta for a mesma será necessário criar uma exceção para não minificar o próprio arquivo .min.js. Dá pra resolver isso usando o gulp-ignore, OK?

var gulp     = require('gulp');
var plumber  = require('gulp-plumber');
var uglify   = require('gulp-uglify');
var rename   = require('gulp-rename');

// Dev Paths
var js_dev   = "./assets_dev/js/**/*.js";

// Dist Paths
var js_dist  = "./assets/js";

// Scripts Task
gulp.task('scripts', function() {
    return gulp.src(js_dev)
        .pipe(uglify())
        .pipe(rename({suffix: ".min"}))
        .pipe(gulp.dest(js_dist));
});

Nesta segunda task (que particularmente gosto mais), todos os arquivos .js da pasta assets_dev/js serão minificados em um único arquivo chamado scripts.min.js na pasta assets/js.

var gulp     = require('gulp');
var plumber  = require('gulp-plumber');
var uglify   = require('gulp-uglify');
var concat   = require('gulp-concat');

// Dev Paths
var js_dev   = "./assets_dev/js/**/*.js";

// Dist Paths
var js_dist      = "./assets/js";
var js_dist_name      = "scripts.min.js"

// Scripts Task
gulp.task('scripts', function() {
    return gulp.src(js_dev)
        .pipe(uglify())
        .pipe(concat(jsName))
        .pipe(gulp.dest(js_dist));
});

Isso sim que é praticidade.

Para executar as tarefas, basta ter o gulp instalado e também os modulos: gulp-plumber, gulp-uglify, gulp-rename e gulp-concat.

Depois execute o seguinte comando no seu terminal:

gulp scripts

Melhor ainda se você adicionar a tarefa scripts no seu watch do Gulp, assim você não precisa se preocupar em ficar executando a tarefa a cada mudança em algum arquivo.

gulp.task('watch', function() {
	gulp.watch([js_dev], ['scripts']);
});

Depois, no terminal, digite:

gulp watch

Pronto, agora já dá pra ver a “mágica” acontecer.