Iniciando com gulp + stylus
Getting started with gulp + stylus
Atualmente tenho como pré-processador preferido o Sass. Motivado pelo post do Ney Simões sobre Sass vs Stylus, decidi dar uma olhada nesse tal de stylus. Vou compartilhar neste post, como iniciar com gulp + stylus.
Dependências
Supondo que você tenha nodejs e npm instalado. Vamos instalar o gulp-cli globalmente.
npm install --global gulp-cliApós instala-lo vamos precisar instalar o gulp e o gulp-stylus localmente para o nosso projeto. Mas antes disso vamos criar o package.json usando o comando npm init.
npm init
npm install --save-dev gulp gulp-stylusEstrutura de pastas
- index.html
-- styl
- _partials.styl
- main.styl
-- css
- package.json
- Gulpfile.jsGulpfile
// importando dependências
var gulp = require('gulp'),
stylus = require('gulp-stylus');// task para compilar o stylus
gulp.task('stylus', function () {
return gulp.src(['./styl/*.styl','!./styl/_*.styl'])
.pipe(stylus())
.pipe(gulp.dest('./css/'));
});// task default que dispara o watch nos arquivos .styl
gulp.task('default', function() {
gulp.watch(['./styl/**/*.styl'],['stylus']);
});
Com essa configuração básica, conseguimos usar o pré-processador stylus.
Repare que no gulp.src da task stylus, passei no array !./styl/_*.styl, para ele não ignorar _partials.css já que ele será importado dentro de main.styl.
Vamos testar se está tudo funcionando?
No arquivo index.html, vamos criar uma estrutura básica e importar o css que será gerado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello Stylus!</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>Hello Stylus!</h1>
</body>
</html>No arquivo styl/_partials.styl vamos criar algumas variaveis.
$bgcolor = hotpink
$textcolor = yellowNo arquivo styl/main.styl vamos importar o arquivo _partials.styl e utilizar as váriaveis criadas nele.
@import _partialsbody
background $bgcolor
h1
color $textcolor
Agora basta rodar a task gulp stylus para compilar. O watch está configurado na task default, rode gulp e veja por você mesmo!
gulp stylus
gulpCriei um repositório no github com os arquivos do exemplo que pode ser encontrado neste link.
Links úteis:
