NPM Install Gulp-Save-dev
O que é Gulp?
Gulp é uma nova geração de ferramentas de construção de projetos front-end. Você pode usar o Gulp e seus plugins para compilar o código do projeto (menos, SASS) e também pode comprimir seu código JS e CSS e até compactar suas imagens. O Gulp tem apenas uma pequena quantidade de API, por isso é muito fácil de aprender. Gulp usa a corrente para processar conteúdo. O Node gerou várias ferramentas de automação, como Bower, Yeoman, Grunt, etc.
Semelhanças e diferenças entre gole e grunhido
Fácil de usar: Usando estratégias de configuração de código, o Gulp mantém coisas simples de tarefas simples e complexas gerenciáveis.
Eficiente: Ao alavancar o poderoso fluxo de node.js, você pode concluir a construção mais rapidamente sem escrever arquivos intermediários no disco.
Alta qualidade: as diretrizes estritas dos plug -in do Gulp para garantir que os plugins sejam simples e funcionem da maneira que você espera.
Fácil de aprender: ao minimizar as APIs, você pode aprender Gulp em um tempo muito curto. O trabalho de construção é exatamente como você imaginou: é uma série de pipelines de fluxo.
Como o Gulp está escrito no Node.js, você precisa instalar o NPM no seu terminal. O NPM é o gerenciador de pacotes Node.js, então instale o Node.js primeiro na sua máquina.
Comando de instalação gole
sudo npm install -g gulp
Crie um novo arquivo package.json no diretório raiz
NPM INIT.
Instale o pacote Gulp
Após a instalação, digite Gulp -V novamente para visualizar o número da versão, conforme mostrado na figura a seguir, é bem -sucedido:
Instale os plug-ins
Instale plugins comumente usados:
Compilação de SASS (gulp-ruby-sass)
Adicione automaticamente o prefixo CSS (Gulp-Autoprefixer)
CSS comprimido (Gulp-Minify-CSS)
Verificação do código JS (Gulp-jshint)
Mesclar arquivos JS (Gulp-Concat)
Código JS comprimido (Gulp-ulify)
Imagem compactada (Gulp-Imagemin)
Atualize automaticamente a página (Gulp-Livereload)
Cache de imagem, apenas se a imagem for substituída (cache gulp)
Alterar lembrete (Gulp-Notify)
Limpe o arquivo (del)
Para instalar esses plugins, você precisa executar o seguinte comando:
A cópia do código é a seguinte:
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-conconcat gulp-ugulify gulp-imagoMin gulp-não-defuso gulp-renome-renome gulp-liveload gulp-cache del--save-dev
-Save e -Save -Dev podem economizar as etapas para modificar manualmente o arquivo package.json.
Nome do módulo de instalação do npm -Save
Adicione automaticamente os números de módulo e versão à seção de dependências
name de instalação npm-name -save-dev
Adicione automaticamente números de módulo e versão à seção DevDependências
comando gole
Você só precisa saber 5 comandos gulp
Gulp.Task (Nome [, Deps], FN) Definir Nome da tarefa: Nome da tarefa Deps: Nome da tarefa de dependência FN: Função de retorno de chamada
Gulp.Run (Tarefas ...): Execute várias tarefas em paralelo o maior número possível
Gulp.watch (Glob, FN): Quando o conteúdo global muda, execute FN
Gulp.src (glob): defina o caminho para o arquivo a ser processado, que pode ser vários arquivos na forma de uma matriz, ou pode ser regular
Gulp.Dest (Path [, Options]): Defina o caminho para gerar o arquivo
Glob: pode ser um caminho de arquivo direto. Seu significado é a correspondência de padrões.
Os arquivos a serem processados pela Gulp Guides Related Plugins através da API do pipeline (Pipe ()). Execute tarefas de processamento de arquivos por meio de plug-ins.
gulp.Task ('padrão', function () {...});A API Gulp.Task é usada para criar tarefas. Você pode inserir $ gulp [padrão] na linha de comando (opcional para colchetes) para executar as tarefas acima.
Documentação oficial da API OFICIAL: https://github.com/gulpjs/gulp/blob/master/docs/api.md
Coleção de plug-in Gulp: http://gulpjs.com/plugins/
Comece a construir o projeto
Crie um novo arquivo GulpFile.js no diretório raiz do projeto e cole o seguinte código:
// Introduzir plugins gulp e uglify no diretório raiz do projeto var gulp = requer ('gulp'); var uglify = requer ('gulp-ugulify'); gulp.Task ('compact', function () {retornar gulp.src ('script/*js') .pipe ('uglify).Nota: O nome do arquivo gulpfile.js não pode ser alterado.
O projeto precisa usar uglify e renomear plug-ins e executar o seguinte comando para instalar:
NPM Install-Save-Dev Gulp-ugufynpm Instale-Save-Dev Gulp-Rename
Veja o meu exemplo, digite o diretório onde GulpFile.js está localizado:
CD/Usuários/Trigkit4/Gulp-Test
Em seguida, digite:
var gulp = requer ('gulp'); var uglify = requer ('gulp-ugulify'); var rename = requer ('gulp-rename'); gulp.Task ('compact', function () {return gulp.src ('script/*. js) .pipe (uglify ()). .pipe (gulp.Dest ('dist'));});Este comando instalará todas as dependências no package.json, conforme mostrado na figura a seguir:
Completo gulpfile.js
// Load plug-in var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = requim ('gulp-imagoMin'), renomear = requer ('gulp-rename'), limpo = requer ('gole-se-limpo'), concat = requer ('gulp-concat'), notificar = requer ('gulp-notify'), cache = requer (cache cache '), liverelOad = (' Golp-Assistalel. // Style gulp.task('styles', function() { return gulp.src('src/styles/main.scss') .pipe(sass({ style: 'expanded', })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4 ')) .pipe (gulp.Dest (' dist/styles ')) .pipe (renomeie ({sufixo:' .Min '})) .pipe (minifycss ()) .pipe (gulp.dest (' dist/styles ') .pipe (notify ({mensagem:' estilos de tarefas completos '}); // script gulp.task ('scripts', function () {return gulp.src ('src/scripts/**/*. Js') .pipe (jshint ('. .pipe (concat ('main.js')) .pipe (gulp.Dest ('dist/scripts')) .pipe (renomeio ({sufixo: '.Min'})) .pipe (uglify () .pipe (gulp.dest ('dists/scripts'). // Image Gulp.Task ('Images', function () {Return gulp.src ('src/imagens/**/*') .pipe (cache (imagemin ({otimizationLevel: 3, progressivo: True, intertraído: true}))) .pipe (gulp.dest ('dist/imagens'). // limpo gulp.tak ('limpo', function () {return gulp.src (['dist/styles', 'dist/scripts', 'dist/imagens'], {leia: false}) .pipe (limpo ());}); // predefinir tarefas gulp.tak ('padrão', ['limpo'], function () {gulp.start ('styles', 'scripts', 'imagens');}); // Guard Gulp.Task ('Watch', function () {// Guarda todos os arquivos .scss Gulp.watch ('src/styles/**/*. Gulp.watch ('src/scripts/**/*. gulp.watch (['dist/**']). });Nota: Pipe () é um método para passar os fluxos de dados no módulo de fluxo. O primeiro parâmetro é o método de plug-in. O plug-in receberá arquivos que fluem do upstream, processarão e depois fluirão para baixo.
gulp.Task ('Nome da tarefa', function () {return gulp.src ('caminho do arquivo') .pipe (...) .pipe (...) // até a última etapa do tarefa.pipe (...);});plugin gole
Gulp-gh-Pages: Use Gulp para gerar documentos HTML por Markdown e enviá-los para Git Pages
https://github.com/shinnn/gulp-gh-pages
var gulp = requer ('gulp'); var ghPages = requer ('gulp-gh-Pages'); gulp.tak ('implantar', function () {return gulp.src ('./ dist/**/*') .pipe (ghPages ());});Plugin Gulp-Jade: Compile Jade no arquivo HTML
plugin sem gole: compilar menos no arquivo CSS
var menos = requer ('gulp-sem'); var path = requer ('caminho'); gulp.Task ('menos', function () {return gulp.src ('./ menos/**/*. menos') .pipe (menos ({caminhos: [path.join (__ dirname, 'menos', 'inclui')]})) .pipe (gulp.dest ('./ public/csS'); = requer ('gulp'); var GLS = requer ('Gulp-Live-Server'); gulp.Task ('servir', function () {// 1. Sirva com configurações padrão var Server = GLS.static (); // é igual a gls.static ('public', 3000); server.start (); // 2. Sirt em porta personalizada var server = Gls.static ('dist', 888); server.start (); '.tmp']);Gulp-Livereload pode salvar e atualizar em tempo real, então não há necessidade de pressionar F5 e mudar a interface
Gulp-Cargo-Plugins: Carregue automaticamente o plug-in arbitrário Gulp no seu arquivo package.json
$ NPM Instalação-Plugins de carp de gulp-dev-dev
Por exemplo, um dado arquivo package.json é o seguinte:
{"dependências": {"gulp-jshint": "*", "gulp-concat": "*"}}Adicione o seguinte código em gulpfile.js:
var gulp = requer ('gulp'); var gulploadplugins = requer ('gulp-carreg-plugins'); var plugins = gulploadplugins (); plugins.jshint = requer ('gulp-jshint'); plugins.concat = requer ('gulp-conconcat');Gulp-Babel: plug-in Babel de Gulp,
$ NPM Instalação-Save-Dev Gulp-Babel Babel-Preset-ES2015
Como usar:
const gulp = requer ('gulp'); const babel = requer ('gulp-Babel'); gulp.Task ('padrão', () => {return gulp.src ('src/app.js') .pipe (gulp.d ({presets: ['es2015']})) .pipe (gulp.d.Github oficial: https://github.com/gulpjs/gulp