Introdução ao Gulp:
O Gulp é uma ferramenta para criar código no desenvolvimento do front-end e uma ferramenta poderosa para projetos de automação de construção. Ele pode não apenas otimizar os recursos do site, mas também muitas tarefas repetitivas podem ser concluídas automaticamente com as ferramentas corretas durante o processo de desenvolvimento. Com ela, não podemos apenas escrever código feliz, mas também melhorar muito nossa eficiência de trabalho.
Gulp é um corredor de tarefas automático com base no NodeJS. Ele pode preencher automaticamente os testes, verificação, mesclagem, compactação, formatação, atualização automática do navegador, geração de arquivos de implantação de arquivos como javascript/café/sass/menos/html/imagem/css e ouvir as etapas especificadas após a troca do arquivo. Em termos de implementação, ela emprestou a idéia do tubo do sistema operacional UNIX. A saída do nível anterior se tornou diretamente a entrada do próximo nível, tornando a operação muito simples. Através deste artigo, aprenderemos a usar o Gulp para alterar o processo de desenvolvimento, tornando o desenvolvimento mais rápido e eficiente.
Gulp é muito semelhante ao Grunt, mas comparado às operações de IO frequentes de Grunt, as operações de streaming da Gulp podem concluir o trabalho de construção mais rapidamente e convenientemente.
Quando eu estava aprendendo hoje, usei o Gulp-uplify para comprimir o módulo JS. Encontrei um problema - ao usar o Gulp.watch para ouvir alterações nos arquivos JS, encontrei repetidos problemas de compressão.
A estrutura do diretório é a seguinte:
O código gulpfile.js é o seguinte:
var gulp = requer ('gulp'); var uglify = requer ('gulp-uplify'); var renome = requer ('gulp-rename'); gulp.Task ('uglify', function () {gulp.src ('./ src/js/*. JS'). gulp.watch ('./ src/js/*.Depois de executar o comando Gulp uglify:
O correspondente *.min.js também é gerado:
Mas quando abro um arquivo kong.js e salvo novamente, ocorre a seguinte situação:
Salve uma vez e depois compacte novamente. Haverá muitos arquivos compactados JS, como *.Min.Min ... JS, e apenas o primeiro valor de Kong.min.js mudará de acordo com o Kong.js. Mais tarde, verifiquei o documento a seguir e alguém escreveu sobre o Gulp-Ulify e descobri que ele pode ser usado! Para filtrar min.js, impeça que ele se compacte, altere o código:
var gulp = requim ('gulp'); var uglify = requer ('gulp-uplify'); var rename = requer ('gulp-rename'); gulp.Task ('uglify', function () {gulp.src (['/ src/js/*. js ','! ./ src/js/*. min.js ']) gulp.watch ('./ src/js/*.O acima é a introdução do editor ao Gulp-uplify e Gulp.Watch () quando usado em conjunto com o Gulp.watch (). Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!