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.