Traduzido do 日本語 • Ver original Tradicionalmente, CSS e JavaScript, que são os principais ativos da interface WEB, são difíceis de gerenciar no nível da fonte, rapidamente entram em uma área caótica e se tornam difíceis de manter. Para tornar CSS e JavaScript nessa área caótica mais fáceis de manter e gerenciar no nível da fonte, foi criado o mecanismo de compilação chamado Grunt and Gulp. No mundo atual, o método padrão de desenvolvimento no front-end é simplificar a programação CSS e JavaScript com SCSS (SASS, LESS, etc.), CoffeeScript, etc., enquanto facilita a manutenção e o gerenciamento da fonte ao mesmo tempo. Na verdade, quando você tenta estilizar CSS usando variáveis em LESS ou escrever JavaScript em CoffeeScript, que tem uma quantidade dramaticamente baixa de código, você se verá em uma situação em que não precisará mais mudar seus métodos sólidos de programação front-end anteriores devido ao alto nível de produtividade do código. ── Dito isso, gostaria de criar um ambiente para compilação de CSS/JavaScript e construir em um servidor CentOS para provisão de serviços (veja este artigo sobre a introdução de CSS/JavaScript em uma máquina Windows como ambiente local de desenvolvimento).
Aliás, Gulp é lido como "Gulp". No começo, eu li "grupo" ou algo assim... (risos)
Instalando Node.js
Primeiramente, o Gulp é um módulo node.js, então ele não inicia sem instalar node.js. Por isso vou instalar o node.js, mas primeiro vou instalar a partir do NVM, que é um módulo de controle de versão para node.js e bibliotecas. Clone o nvm do GitHub e instale no shell incluído, como mostrado abaixo.
$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ . ~/.nvm/nvm.sh
Em seguida, instale o node.js, mas antes disso, confira o site oficial da Node.js para a versão estável do node.js atual. Aparece "Current Version: v0.12.2" no meio da página TOP, então é seguro instalar essa versão (a versão estável de Node.js era 0.12.2 em 7 de abril de 2015). Depois que a versão de instalação estiver decidida, instale-a com NVM.
$ NVM install v0.12.2
nó $ -v
v0.12.2
Se você verificar a versão e a versão de instalação aparecer, está tudo certo. Por fim, gostaria de adicionar a seguinte declaração ao .bashrc para que o node.js possa ser usado no meu ambiente de console.
$ vim .bashrc
$ cat .bashrc
# .bashrc
# Definições globais de origem
se [ -f /etc/bashrc ]; então
. /etc/bashrc
fi
# Apelidos e funções específicas do usuário
. ~/.nvm/nvm.sh
Uso v0.12.2
export NODE_PATH=${NVM_PATH}_modules
Também vou verificar a versão do npm instalada no pacote.
$ npm -v
2.7.4
A instalação do Node.js já está concluída.
Instalando Gulp
Depois, instale o Gulp globalmente.
$ npm install -g gulp
$ glup -v
[**:**:**] CLI versão 3.8.11
A instalação está pronta. É fácil, não é?
Em seguida, instale localmente. Para instalar localmente, você precisa inicializar o npm. Primeiro, crie um diretório onde você queira rodar o gulp. Neste artigo, vou criar um novo diretório chamado '~/gulp_build' no meu diretório doméstico.
$ mkdir -p gulp_build
$ CD gulp_build
$ npm init
Esse utilitário vai te guiar como criar um arquivo package.json.
Ele cobre apenas os itens mais comuns e tenta adivinhar padrões sensatos.
Veja 'npm help json' para documentação definitiva sobre esses campos
E exatamente o que eles fazem.
Use 'npm install <pkg> --save' depois para instalar um pacote e
Salve como uma dependência no arquivo package.json.
Pressione ^C a qualquer momento para sair.
Nome: (gulp_build) gulp_build
versão: (1.0.0)
Descrição: Teste de construção em Gulp
Ponto de entrada: (index.js)
Comando de Teste:
Repositório git:
Palavras-chave: Engolir
Autor: Maeno
licença: (ISC) MIT
Prestes a escrever para /home/maenok/gulp_build/package.json:
{
"nome": "gulp_build",
"versão": "1.0.0",
"descrição": "Gulp-build-test",
"principal": "index.js",
"roteiros": {
"test": "echo \"Erro: sem teste especificado" && saída 1"
},
"palavras-chave": [
"engolir em seco"
],
"autor": "maeno",
"licença": "MIT"
}
Isso está bom? (sim) sim
Você será solicitado a alguns valores de atributos de forma interativa, para que possa inseri-los arbitrariamente (todos podem ser Enter). Quando a inicialização estiver concluída, instale o gulp localmente.
$ npm install gulp --save-dev gulp gulp-util
$ gulp -v
[**:**:**] CLI versão 3.8.11
[**:**:**] Versão local 3.8.11
A opção '--salvar-dev' especifica se instalar ou não os pacotes de desenvolvimento do gulp, então você não precisa adicionar nada específico. O Gulp já está disponível.
Compilando com Gulp
1. Compilação do SASS
Para compilar SASS com qulp, você precisa de um plugin SASS, então instale-o.
$ npm install gulp-sass --save-dev
Uma vez instalado, crie o arquivo-fonte CSS a partir do qual ele compila.
$ mkdir sass | vi sass/style.scss
$ cat sass/style.scss
a {
Cor: #88f;
&:hover {
decoração de texto: nenhuma;
}
}
Em seguida, crie uma tarefa de compilação. Crie um 'gulpfile.js' diretamente abaixo do diretório onde você instalou o gulp localmente ('~/gulp_build' neste exemplo).
$ vi ~/gulp_build/gulpfile.js
$ gato ~/gulp_build/gulpfile.js
var gulp = requer('gulp');
var gutil = requer('gulp-util');
var sass = exige('gulp-sass');
gulp.task('sass', function() {
gulp.src('sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
Assim que a tarefa estiver concluída, vamos rodar a compilação imediatamente.
$ glup sass
[**:**:**] Usando gulpfile ~/gulp_build/gulpfile.js
[**:**:**] Começando 'atrevida'...
[**:**:**] Terminei 'sass' após 19 ms
Agora você tem uma pasta 'CSS' criada com o arquivo CSS compilado exportado para ela. Se você olhar dentro do arquivo CSS, pode ver que
a {
Cor: #88f; }
a:hover {
decoração de texto: nenhuma; }
Oh~, está construído corretamente. Agora implementamos o ambiente de compilação Gulp + SASS. Agora, vamos tentar criar um ambiente de compilação MENOS.
2. Compilando MENOS
Basicamente, ele vai fluir como SASS. Em outras palavras, você precisa do plugin LESS para compilar LESS com qulp, então instale.
$ npm install gulp-less --save-dev
Uma vez instalado, crie o arquivo-fonte CSS a partir do qual ele compila.
$ mkdir menos | vi menos/estilo. menos
$ gato menos/estilo.
@link cor: #88f;
a {
Cor: @link-cor;
&:hover {
decoração de texto: nenhuma;
}
}
Este é um exemplo de uso de variáveis para valores de propriedades em um estilo que você pode achar mais útil em um ambiente CSS pré-compilado.
Depois, crie uma tarefa de compilação. Edite o 'gulpfile.js' diretamente abaixo do diretório onde você instalou o gulp localmente (neste exemplo, '~/gulp_build').
$ vi ~/gulp_build/gulpfile.js
$ gato ~/gulp_build/gulpfile.js
var gulp = requer('gulp');
var gutil = requer('gulp-util');
var less = exige('sem gole');
gulp.task('less', function() {
gulp.src('menos/**/*.menos')
.pipe(less())
.pipe(gulp.dest('./css'));
});
Agora vamos fazer com que a fonte de destino fique com todos os arquivos '.less' abaixo de 'less/'. Quando tivermos a tarefa, vamos rodar a compilação imediatamente.
$ gole menos
[**:**:**] Usando gulpfile ~/gulp_build/gulpfile.js
[**:**:**] Começando 'menos'...
[**:**:**] Terminei 'menos' após 21 ms
Agora você tem o arquivo CSS compilado exportado para a pasta 'CSS'. Se você olhar dentro do arquivo CSS, pode ver que
$ css/style.css gato
a {
Cor: #8888ff;
}
a:hover {
decoração de texto: nenhuma;
}
A compilação LESS é melhor porque a indentação é mais formatada do que a compilação SASS.
3. Compilando o CoffeeScript
O método é quase igual ao do SASS e MENOS mencionado acima, apenas os plugins usados são diferentes. Primeiro, instale o plugin para compilar o CoffeeScript.
$ npm instalar gulp-coffee --salvar-dev
Uma vez instalado, crie o arquivo original do CoffeeScript.
$ mkdir café | vi café/script.coffee
$ Café do Gato/Script.Coffee
Jogo em casa = ->
$('.button').on 'click', (e) ->
e.preventDefault()
if window.confirm "Tem certeza?"
$(@).trigger 'click'
senão
retorno falso
$(documento).ready(Iniciador)
O conteúdo do exemplo é código jQuery. Quando você clica no elemento da classe '.button', o handler de eventos emitirá um diálogo de confirmação.
Depois, crie uma tarefa de compilação. Edite o 'gulpfile.js' diretamente abaixo do diretório onde você instalou o gulp localmente (neste exemplo, '~/gulp_build').
var gulp = requer('gulp');
var gutil = requer('gulp-util');
var café = requerer ('gole-café');
gulp.task('café', função() {
gulp.src('café/**/*.café')
.pipe(coffee())
.pipe(gulp.dest('./js'));
});
A fonte alvo serão todos os arquivos 'coffee' abaixo de 'coffee/'. Vamos rodar a compilação imediatamente.
$ Gulp café
[**:**:**] Usando gulpfile ~/gulp_build/gulpfile.js
[**:**:**] Começando 'café'...
[**:**:**] Terminei o 'café' após 26 ms
Agora você tem uma pasta 'js' com o arquivo JavaScript compilado exportado para ela. Se você olhar dentro do arquivo JavaScript, pode ver que
(função() {
var Home;
Início = função() {
return $('.button').on('click', function(e) {
e.preventDefault();
if (window.confirm("Tem certeza?")) {
retorne $(isto).trigger('click');
} else {
retorne falso;
}
});
};
$(documento).ready(Iniciador);
}).chama(isto);
Ótimo!
Aliás, plugins do Gulp podem coexistir entre si, então ao mesclar cada tarefa em 'gulpfile.js', você pode criar um ambiente onde pode compilar todo o SASS, LESS e CoffeeScript. Além disso, existem vários outros plugins válidos nos plugins do Gulp que deveriam ser definidos por padrão (como concessão automática de prefixos do fornecedor e minificação), então é uma boa ideia procurá-los de acordo com seu cenário de uso.
Com isso, temos um ambiente moderno de serviço web no qual CSS e JavaScript são gerenciados e desenvolvidos no GitHub e em outras plataformas, enquanto o código-fonte é pré-compilado e implantado no lado do ambiente de serviço, como servidores CentOS.