Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Sintaxe Gulp

Ola! Finalizei o curso de Gulp e tive alguns problemas em alguns projetos pessoais ( cheguei a abrir um tópico sobre eles no forum). Coincidentemente ao iniciar o curso de Performance Web 1, visualizei o arquivo disponibilizado gulp.js, e fiquei com algumas duvidas, que possivelmente são respostas para os possíveis problemas que estou tendo nos meus projetos com Gulp. Vamos la:

No arquivo não vi as declarações dos módulos como explicado no curso de Gulp:

var gulp = require('gulp')
    ,imagemin = require('gulp-imagemin') //copmctacao de imgs
    ,clean = require('gulp-clean') //delete folder para copia
    ,concat = require('gulp-concat') //concatenacao de arquivos
    ,htmlReplace = require('gulp-html-replace')
    ,uglify = require('gulp-uglify') //minificacao de js
    ,usemin = require('gulp-usemin') //automacao de concatenacao
    ,cssmin = require('gulp-cssmin') //minificaca css

Porem vi que existe uma linha que me chamou a atenção, que ao meu ver automatiza essa declaração. O que exatamente esta fazendo essa linha?

var $ = require('gulp-load-plugins')({rename: {'gulp-rev-delete-original':'revdel', 'gulp-if': 'if'}});

Vi também no final que é inserido um código nao falado no curso de Gulp, que parece que ordena as tasks ( algo que eu estava precisando para resolver meus problemas sem usar dependencias encadeadas nas task, que ao meu ver, dificulta um pouco a leitura e entendimento imediato, tendo que seguir a ordem: "luizinho chama zezinho, que chama Joaozinho que chama pedrinho..." )

gulp.task('default', $.sequence('clean', 'copy', 'build'));

Esse $.sequence, que nao ficou claro pra mim, onde a variavel $ foi declarada la em cima com o require...

Obrigado!!!!

3 respostas

Opa, em relação a primeira dúvida => https://www.npmjs.com/package/gulp-load-plugins

Esse projeto permite que vc carregue os plugins e como uma das opções vc pode trocar o nome para referenciá-los ... Você passa como argumento um objeto literal com algumas propriedades.

O segundo é um chute, mas eu acho que algum require define uma variável global chamada $ :P. Faz um console.log($) que deve ficar claro de onde vem.

Foi mal não ser especialista, mas vi a dúvida aqui faz um tempo e me arrisquei para ajudar :).

solução!

Olá Marcio,

No primeiro caso, com modulo que carregamos através de require('gulp-load-plugins') conseguimos um objeto que já traz os plugins do gulp pra gente, como o gulp-concat, gulp-clean etc. Na própria documentação do módulo no npm diz: "Loads gulp plugins from package dependencies and attaches them to an object of your choice." - doc do load plugins no npm: https://www.npmjs.com/package/gulp-load-plugins

Na questão da linha gulp.task('default', $.sequence('clean', 'copy', 'build')), justamente definimos uma task do gulp que será executada. - doc do gulp.task: https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulptaskname--deps--fn

Demos um nome pra task com 'default'

A parte que talvez não ficou muito clara foi o uso do $ .sequence. Bom nesse caso, como já sabemos, usamos o load-plugins pra pegar um objeto que centraliza os plugins do gulp pra gente. Esse objeto que conseguimos ali em cima com require é justamente armazenado na variável $ que definimos: var $ = require('gulp-load-plugins') .

Então quando fazemos $.sequence('...') estamos na verdade usando o plugin sequence que nos ajuda a definir uma série de tasks do gulp que serão executadas em sequência. Dê uma olhada na documentação do sequence aqui => https://www.npmjs.com/package/gulp-sequence

Espero ter ajudado. Abraço.

Muito obrigado amigos! Duvidas sanadas! ;)