Instale o Node.js
Primeiro, você precisa instalar o Node.js. De um modo geral, você só precisa baixar o pacote de instalação e instalá -lo no site oficial do Node.JS. Mas eu falhei vergonhosamente, e o seguinte erro surgiu:
Então eu mudei para Brew Dafa:
Brew Install NodeJS
Instalar gulp
Gulp é instalado usando o comando npm do node.js:
NPM Instale -Gulp Global
Em seguida, instale -o no diretório do projeto:
NPM Instalação-Gulp
Estou bastante intrigado com esta etapa. Com meus muitos anos de experiência como codificador, mesmo que a instalação global esteja instalada, ela deve estar disponível onde usá -lo. Mas Gulp obviamente não é assim. Se você não executar esta etapa no diretório do projeto, o seguinte erro será solicitado ao usar o comando gulp:
… Gulp local não encontrado em…
… Tente correr: npm install gulp
Finalmente, execute o comando gulp no diretório do projeto. Se o conteúdo a seguir for emitido, significa que a instalação está concluída:
… Nenhum gulpfile encontrado
Exemplo simples
A seguir, mostra o uso do Gulp para criar um servidor estático de desenvolvimento de sites e suporta a função Atualização ao vivo (LiveLOAD).
Primeiro, você precisa instalar o plug-in do navegador para o LiveLOAD. O endereço do plug-in é: http://livereload.com/extensions/, que suporta três navegadores principais: Chrome, Firefox e Safari. Após a instalação do plug-in, um botão aparecerá no navegador. Este botão tem dois estados. Pontos sólidos indicam que o plug-in está ativado e pontos ocos indicam que o plug-in não está ativado. Lembre -se de lembrar!
Em seguida, crie uma estrutura simples de projeto:
./gulpfile.js./public/./public/index.html
Use o seguinte comando para instalar gulp e componentes relacionados:
NPM Instale--Save-Dev Gulp Gulp-Connect
O Gulp-Connect é um plug-in Gulp que fornece funções estáticas do servidor da web e integra funções do LiveLoad.
Em seguida, você precisa editar o arquivo gulpfile.js, o conteúdo é o seguinte:
var gulp = requer ('gulp'), conectar = requer ('gulp-conect') gulp.Task ('servidor', function () {Connect.Server ({root: 'public', liveLOad: true})}) gulp.Task ('html', função () {gulp.src ('/. }) gulp.task ('watch', function () {gulp.watch (['./ public/*.Finalmente execute este servidor da web:
gole
Abra o navegador e visite http: // localhost: 4000. Em seguida, tente modificar o conteúdo do arquivo index.html e salvá -lo. Em circunstâncias normais, o lado do navegador deve atualizar e exibir automaticamente o conteúdo modificado.
Comparação simples entre Gulp e Grunt
Vejamos um exemplo, construa Sass em Gulp e Grunt, respectivamente:
Grunhido:
sass: {dist: {options: {style: 'expandido'}, arquivos: {'dist/assets/css/main.css': 'src/styles/main.scss',}}}}, autoprefixer: {dist: {{`` '' '' 2 versão '' ', 12.1 ',' iOS 6 ',' Android 4 ']}, src:' dist/Assets/css/main.css ', dest:' dist/Assets/CSS/main.css '}}, Grunt.RegisterTask (' Styles ', [' Sass ',' Autoprefixer '];O Grunt precisa configurar os plug-ins separadamente e especificar seu caminho de origem e destino. Por exemplo, pegamos um arquivo como entrada para plug-in e armazenar os resultados de saída. Ao configurar o Autoprefixer, você precisa usar a saída do SASS como entrada para gerar um novo arquivo. Vamos dar uma olhada na mesma configuração no Gulp:
Gole:
gulp.Task ('sass', function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({style: 'comprimido'})) .pipe (autoprefixer ('last 2 versão', 'safari 5', 'ie 8', ie 9 'ie 9' '' ',' iefixer ('last 2 versão', 'safari 5', 'ie 8', 'ie 9' 'ie 9' ''. .pipe (Gulp.Dest ('Dist/Assets/CSS'))});No Gulp, precisamos apenas inserir um arquivo. Após o processamento do plug-in, ele é passado para o plug-in Autoprefixer e, finalmente, um arquivo é obtido. Esse processo acelera o processo de construção, eliminando os arquivos desnecessários de leitura e escrita e requer apenas um arquivo final.