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.

Para quem não sabe, automatizador de tarefas é uma ferramenta que agiliza o processo de desenvolvimento em ações repetitivas. Exemplo, minificar arquivos Javascript e CSS. Testar se o código Javascript está correto, agrupar diversos arquivos em um, ofuscar código Javascript… São diversas opções, você pode conferir todos os pacotes visitando o link de Plugins.

Chega de explicações e vamos fazer na prática.

Obrigatório ter o node.js instalado, caso não tenha, entre no site node.js, faça download e instale.

Crie uma pasta com um nome desejado, entre nesta pasta e crie o arquivo package.json com o conteúdo abaixo:

{
  "name": "aprendendo",
  "version": "1.0.0",
  "description": "Aprendendo Gulp",
  "author": "Seu nome<seu@email.com.br>",
  "devDependencies": {
	"gulp": "*",
	"gulp-uglify" : "*",
	"gulp-concat" : "*"
  }
}

Após o arquivo criado, adicione seu nome e e-mail na linha “author” de acordo com o formato exemplificado. Depois, instale as dependências via linha de comando ( obrigatório estar na pasta criada ):

npm install

Agora, crie o arquivo gulp.js que será onde ficará as configurações do Gulp e insira o conteúdo:

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']);
});

Neste arquivo, estamos supondo que estamos com a seguinte estrutura:

js-source
    vendor
        jquery
            jquery.js
        bootstrap
            bootstrap.main.js
            bootstrap.plugins.js
    main.js
js(pasta vazia)
gulp.js
package.json

Execute o comando abaixo:

gulp

Após executar o comando gulp, será gerado o arquivo script.min.js na pasta js. Desta forma, após alterações nos arquivos o comando deverá ser disparado novamente para gerar a nova versão. Um pouco trabalhoso, mas existe uma maneira de automatizar isto.

Vamos utilizar a TASK “watch” para fazer isto por nós. Digite “gulp watch” e deixe a janela aberta, não cancele pois o processo ficará monitorando os arquivos, caso algum tenha alguma alteração, o arquivo final será gerado novamente.

Este exemplo é válido para compactar, ofuscar e gerar um arquivo único de javascript. No próximo tutorial vamos mostrar como fazer isto com arquivos CSS.