Para instalarmos o Gulp precisamos ter instalado o
NodeJs.
Para instalar o Gulp utilizamos o comando:
$:/npm install --global gulp-cli (instalação global).
Em seguida criamos o arquivo package.json com o comando:
$ echo {} > package.json.
O próximo passo é instalar as dependencias do Gulp no projeto
com o comando:
$ npm install --save-dev gulp
Esse comando vai instalar as dependencias e registrar as
configurações no arquivo package.json.
Criamos um arquivo gulpfile.js com o conteúdo retirado do
site Gulp conforme abaixo:
function defaultTask(cb) {
// place code for your default task here
cb();
}
exports.default = defaultTask
Na aula o código era diferente (utilizava ainda o
require agora utiliza o extends)(verificar mudanças
no Javascript) .
var gulp = require('gulp');
gulp.task('default', function () {
// place code for your default task here
});
No cursos utilizaremos o require para ativarmos as
tasks do Gulp. Preciso ver como tratar isso durante
o curso. No curso foi utilizada a versão '3.9.1'. Minha versão
instalada foi a '4.0.2'.
A instalação também cria as dependencias no arquivo
package.json.
A API do Gulp se limita a quatro funções principais (na
verdade são plugins) utilizadas pelo Sass:
gulp-sass
ir para o site
source, task, dest e watch.
Inicialmente recriei os arquivos de instalação do Gulp. Em
seguida criamos um arquivo html com o link para o arquivo de
estilo que ficará em ./assets/css/style.css (este arquivo
será criado depois).
Ainda na pasta assets criamos as pastas '/src/sass/'. Nesta
pasta será criado o arquivo style.scss que será tratado pelo
Sass para gerar o arquivo style.css.
Note que no curso é feita a referencia ao plugin
gulp-ruby-sass entretanto no próprio site do Gulp esse
plugin consta como deprecated sendo o plugin
gulp-sass o principal atualmente.
Para instalar o Sass utilizamos o comando:
$ npm install node-sass gulp-sass --save-dev
(a opção --save-dev serve para incluir no arquivo
packages.json as informações do pacote instalado).
Após a instalação do gulp-sass devemos adicionar a seguinte
função no arquivo gulpfile.js:
var gulp = require('gulp'); (Não sei se é necessária essa importação)
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
Esta instrução habilita a compilação dos arquivos do Sass e
indica o destino do arquivo gerado através do comando dest.
Devemos substituir os './' pelos caminhos onde estão os arquivos
de instruções do Sass e de destino do CSS.
Agora eu removi a função exports pois nessa aula também foi
removida a function(). Como já criamos a var gulp utilizando o
require tavel não precisemos mais do exports.
Foi adicionada a task ['sass'] após a task 'default'.
Criamos em seguida o arquivo style.scss cujo conteudo foi
retirado do material da aula.
Em seguida ao executar o comando $/:gulp no projeto teremos a
geração do arquivo style.css.
Tive que fazer diversas modificações para que o arquivo style.css
fosse gerado como na aula. Como dito anteriormente a versão do
Gulp utilizada na aula édesatualizada em relação a versão
atual e trabalha ainda com require. Na versão atual o
Sass deve ser passado por função. Não sei direito como
continuar esse módulo.
Para instalação do Gulp na versão 3.9.1:
$ npm install [email protected] && npm install [email protected]