Traduzido do 日本語 • Ver original Tenho uma forte sensação agora, mas no mundo, o método de desenvolvimento usando SCSS (SASS, LESS, etc.), CoffeeScript, etc. para melhorar a eficiência da programação CSS e JavaScript no desenvolvimento front-end tornou-se o padrão, e ao mesmo tempo facilita a manutenção e o gerenciamento da fonte. Eu costumava ser muito teimoso nessa área, e costumava programar CSS e JavaScript raw, mas quando tentei escrever JavaScript com CoffeeScript no desenvolvimento do Ruby on Rails recentemente, cheguei a um ponto em que não tive escolha a não ser mudar meu método sólido de programação front-end anterior devido ao alto nível de produtividade do código (não, finalmente...). ── Dito isso, gostaria de criar imediatamente um ambiente para compilar e construir CSS/JavaScript em uma máquina Windows, que é uma máquina de negócios (veja este artigo para apresentar o lado dos serviços web no ambiente CentOS (Linux)).
Além disso, o motivo pelo qual escolhi Gulp em vez de Grunt é que me pergunto se a tendência atual é Gulp... É um motivo vago, mas bem, é mais fácil escrever arquivos de configuração do que Grunt, e mesmo que você tenha múltiplas configurações de recursos, as configurações não ficam complicadas.
Instalando Node.js
Primeiramente, o Gulp é um módulo node.js, então você não pode iniciar sem instalar node.js. Por isso vou instalar node.js. A instalação é fácil, basta baixar o instalador no site oficial da Node.js. Minha máquina profissional era o "Windows 7 (versão 64-bit)", então o arquivo 'node-v0.12.0-x64.msi' é elegível (a versão Node.js em 4 de março de 2015 é 0.12.0). Depois que o instalador for baixado, inicie-o imediatamente. Haverá alguma interação, mas não há configurações de instalação que você precise prestar atenção especial. Quando a instalação estiver concluída, verifique a versão Node.js no prompt de comando (ou no Power Shell).
> nó -v
v0.12.0
Também vou verificar a versão do npm instalada no pacote.
> npm -v
2.5.1
A instalação do Node.js já está concluída.
Instalando Gulp
Depois, instale o Gulp globalmente.
> instalação npm -g gulp
> glup -v
[**:**:**] CLI versão 3.8.11
A instalação está agora concluída. Se a instalação falhar,
> instalação de npm -g gulp --mscs_version=2012
── e a opção pode funcionar. 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, vamos criar um novo diretório chamado 'C:\npm\node_modules\gulp'.
> mkdir -p C:\npm\node_modules\gulp
> CD C:\npm\node_modules\gulp
> 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 --save' depois para instalar um pacote e
Salve como uma dependência no arquivo package.json.
Pressione ^C a qualquer momento para sair.
Nome: (engole em seco) 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 C:\npm\node_modules\gulp\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
> glup -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.
> instalação npm gulp-sass --save-dev
Uma vez instalado, crie o arquivo-fonte CSS a partir do qual ele compila.
> mkdir sass | touch sass/style.scss
Conteúdo do arquivo SCSS:
a {
Cor: #88f;
&:hover {
decoração de texto: nenhuma;
}
}
Em seguida, crie uma tarefa de compilação. Crie um 'gulpfile.js' logo abaixo do diretório onde você instalou o gulp localmente (neste exemplo, 'C:\npm\node_modules\gulp').
var gulp = requer('gulp');
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.
> engolir em seco com sarcasmo
[**:**:**] Usando gulpfile C:npmnode_modulesgulpgulpfile.js
[**:**:**] Começando 'sass'...
[**:**:**] Terminei 'sass' após 6,5 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.
> instalação npm sem gulp --salvar-dev
Uma vez instalado, crie o arquivo-fonte CSS a partir do qual ele compila.
> mkdir less | toque menos/style.less
MENOS conteúdo do arquivo:
@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, 'C:\npm\node_modules\gulp').
var gulp = requer('gulp');
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.
> engole menos
[**:**:**] Usando gulpfile C:npmnode_modulesgulpgulpfile.js
[**:**:**] Começando 'menos'...
[**:**:**] Terminou 'menos' após 8,43 ms
Agora você tem o arquivo CSS compilado exportado para a pasta 'CSS'. Se você olhar dentro do arquivo CSS, pode ver que
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.
> instala npm gulp-coffee --save-dev
Uma vez instalado, crie o arquivo original do CoffeeScript.
> café mkdir | touch coffee/script.coffee
O que está no arquivo CoffeeScript:
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 gerenciador de eventos enviará 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, 'C:\npm\node_modules\gulp').
var gulp = requer('gulp');
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.
> tomar café
[**:**:**] Usando o Gulpfile C:npmnode_modulesgulpgulpfile.js
[**:**:**] Começando 'café'...
[**:**:**] Terminei o 'café' após 7,68 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.
Agora finalmente temos o ambiente mínimo necessário para o desenvolvimento front-end de hoje.