Navegar está se tornando cada vez mais uma solução viável para desenvolvimento de scripts JS e propondo uma sintaxe modelada na de Node.js. Compilando scripts com Navegar É simples. Durante os desenvolvimentos, o uso de Observar permite compilar arquivos em tempo real. Apesar disso, quando você deseja integrar sua compilação com outras tarefas Gole (como compilar arquivos Menos), você se depara com um problema: como usar vigiar ao mesmo tempo como relógio de gole. Responda neste artigo!

resumo

Use Gulp e Browserify – Nível 0

Name: Agence Web Tremplin Numérique
Price range: $$$

uso Gole et Navegar é bem simples. Você pode usar a API Browserify ou simplificar e usar gulp-browserify, que permitirá compilar seus arquivos facilmente.

const gole = requerer('gole');
const navegadorify = requerer('gulp-browserify');
engolir.tarefa('js', função() {
gulp.src('src/*.js', { ler: falso })
.pipe(browserify())
.pipe(gulp.dest('./construir/'))
});

O problema que você encontra rapidamente é que, para trabalhar em seus arquivos e recompilá-los na hora, você terá que analisar todos os arquivos. Isso é muito caro. Navegar terá que carregar todos os seus arquivos, mas também todas as dependências que você usa. Quanto maior for o seu projeto, mais rápido o tempo passará. Além disso, se você usar transformações como o Babelify os tempos aumentarão ainda mais rápido (Lista de todos os plugins disponíveis via Babel). Também a lista de todos Transformações do Browserify.

Antes de mostrar a solução final, veja como seria uma solução com o clássico relógio de gole.

engolir.tarefa("assistir", função () {
engolir.assistir(“./src/*.js”, ["js"]).nós("mudar", função(evento) {
consolá.registro(`Arquivo ${evento.caminho} foi ${evento.tipo}`);
});
});

Com esta solução, cada vez que você altera um de seus arquivos, uma compilação inteira é iniciada.

Observar

Observar torna eficiente para compilar seus arquivos com Navegar. Ele manterá na memória o resultado da compilação de cada arquivo (todos os arquivos vinculados ao seu arquivo, como dependências…).

Quando um arquivo é atualizado, ele atualiza a impressão digital do arquivo recém-modificado e gera um empacotar sem analisar todas as suas dependências.

Use Gulp, Browserify e Watchify – Nível ∞

Instalando as dependências do Node.js

Você pode instalá-los com o Yarn (se estiver realmente atualizado 🙂)!

1	$ yarn add browserify gulp vinil-buffer vinil-source-stream watchify –dev

Caso contrário, você está usando o bom e velho NPM 🙉

1	$ npm install browserify gulp vinil-buffer vinil-source-stream watchify –save-dev

gulpfile.js

"uso estrito";
const navegadorify = requerer(“browserify”),
tampão = requerer("tampão vinil"),
gole = requerer("gole"),
caminho = requerer("caminho"),
fonte = requerer(“fluxo de fonte de vinil”),
usuário = requerer(“gulp-util”),
watchify= requerer("assistir"),
scr = {
js: “./src/main.js”
},
destino = {
js: "./construir/"
};
deixar empacotador;
função Pacotes(perfis) {
if (pacote === undefined) {
if (perfil === "assistir") {
bundler = watchify(browserify(src.js));
} outro {
bundler = browserify(src.js);
}
}
pacote();
}
função empacotar() {
deixar início = novo Data().consiga tempo(),
_ = empacotador
.pacote()
.nós("Erro", util.log.bind(util, “Erro de navegação”))
.pipe(fonte("principal.js"))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
tempo = novo Data().getTime() – início;
util.log("[browserify] o reagrupamento demorou" , use.colors.cyan(`${tempo} ms`), util.colors.grey(`(${src.js})`));
retorno _;
}
engolir.tarefa("js", pacotes.bind(nulo));
engolir.tarefa("assistir", função () {
Pacotes("assistir");
bundler.on("Atualizar", pacote.bind(nulo));
});
engolir.tarefa("padrão", ["assistir", "js"]);

Aqui você tem um exemplo extremamente simplificado, mas funcional. Este código poderia ser ainda mais simplificado, mas mostra um esboço do código a ser produzido para lidar com um recarregar a quente eficaz.

Para simplificar a sua tarefa, forneço-lhe um arquivo com uma guplfile.js mais completo, que lida com a compilação de arquivos JavaScript com Babel (e alguns presets como ES2015), mas também arquivos Menos enquanto gerencia perfis como développement com ou sem Assistir mas também produção com minificação!

Conclusão

É bem possível usar Navegar efetivamente com Gole desde que você jogue com API. Isso força você a sair um pouco da trilha batida e ficar sem plugins Gole que costumamos usar.