Como otimizar seu projeto com Gulp

Coffe Break by  Locaweb 2° Coffe Break by  Locaweb

Palloi Hofmann Desenvolvedor em Produtos da Locaweb #2

Como otimizar seu projeto com

Boas práticas com HTML - CSS - JavaScript 1° Coffe
Break by  Locaweb http://bit.ly/2blxO82

<!DOCTYPE html> http://www.w3.org/TR/html5/

<html lang="pt-br"> http://www.w3c.br/ O atributo LANG é necessário para que
os user-agents saibam qual a linguagem principal do documento.

HEAD Registrando a inteligÃªncia da sua pÃ¡gina. Metadados UTF-8 Sua
página com inteligência e elegância. <meta charset="UTF-8">

Meta Robots https://yoast.com/articles/robots-meta-tags/

Open Graph - Facebook 1. <meta property="og:title" content=“Titulo da página"
/> 2. <meta property="og:locale" content="pt_BR" /> 3. <meta property="og:type" content="website" /> 4. <meta property="og:keywords" content=“html5, css3, javascript, sublime” /> 5. <meta property="og:description" content=“Descrição da página sobre html…” /> 6. <meta property="og:url" content=“http://palloi.com.br“ /> 7. <meta property="og:image" content=“http://palloi.com.br/fotodopalloi.jpg“ /> 8. <meta property="og:image:type" content="image/jpeg"> 9. <meta property="og:image:width" content="500"> 10.<meta property="og:image:height" content="300"> http://ogp.me/

Header Footer Section Media / Gallery O site em módulos

Header Nav Icon List Gallery Form Modal Tabs Alert Button
Collapse Datepicker O site em módulos

Componente de Alerta <div class=“ls-alert-success"></div> <div class="ls-alert-info"></div> <div class="ls-alert-warning"></div> <div
class="ls-alert-danger"></div> [class*="ls-alert-"] { padding: 15px; margin-bottom: 20px; border-style: solid; border-width: 1px; border-radius: 5px; font-size: 14px; } .ls-alert-success { color: #388f39; border-color: #7db67e; background-color: #d7e8d7; }

Estrutura de pastas

http://gulpjs.com/ Automatizador de tarefas http://gruntjs.com/

1. Simples de usar 2. É muito rápido  Por que
gulp?

1. HTML 2. Sass - CSS 3. Javascript 4. Apache
- PHP 5. Gulp O projeto

O projeto - HTML

O projeto - CSS

O projeto - JS

Conﬁgurando Node.js https://nodejs.org/en/download/ NPM https://docs.npmjs.com/getting-started/installing-node

Primeiros comandos 1. npm init 2. npm install --global bower
3. npm install --save-dev bower 4. bower init

Primeiros comandos 1. npm install --global gulp-cli 2. npm install
--save-dev gulp 3. Criar na raiz da aplicação o arquivo  `gulpﬁle.js` 

API do gulp 1. task - Deﬁne uma tarefa.

API do gulp 1. task - Deﬁne uma tarefa. 2.
src - representa uma estrutura  de arquivo ou diretório. 

src - representa uma estrutura  de arquivo ou diretório. 3. pipe - para transmissão de dados.  A saída do processo anterior torna-se  a entrada para o próximo processo.

src - representa uma estrutura  de arquivo ou diretório. 3. pipe - para transmissão de dados.  A saída do processo anterior torna-se  a entrada para o próximo processo. 4. dest - Grava os arquivos no diretório  desejado.

1. task - Deﬁne uma tarefa. 2. src - representa
uma estrutura  de arquivo ou diretório. 3. pipe - para transmissão de dados.  A saída do processo anterior torna-se  a entrada para o próximo processo. 4. dest - Grava os arquivos no diretório  desejado. 5. watch - Observa os arquivos e executa  algo quando um arquivo for alterado.  API do gulp

Instalando as dependências 1. bower install zepto --save 2. bower
install bourbon --save 3. npm install gulp-sass --save-dev 4. npm install gulp-concat --save-dev 5. npm install gulp-minify --save-dev 6. npm install gulp-minify-css --save-dev 7. npm install gulp-rename --save-dev 8. npm install gulp-watch --save-dev 9. npm install gulp-imagemin --save-dev 10. npm install node-bourbon --save-dev http://bourbon.io/ http://zeptojs.com/ http://gulpjs.com/plugins/ https://bower.io/search/

Conﬁgurando o gulpﬁle.js var gulp = require('gulp'); var sass =
require(‘gulp-sass'); var minify = require('gulp-minify'); var minifyCss = require('gulp-minify-css'); var rename = require('gulp-rename'); var concat = require('gulp-concat'); var watch = require(‘gulp-watch'); var imagemin = require('gulp-imagemin'); Dependências: http://gulpjs.com/plugins/

var stylesheets = { files: [“./bower_components/**/*.scss", "./source/assets/stylesheets/**/*.sass"], dest: './source/assets/stylesheets/', build:
'./../blog/wp-content/themes/culturainglesa/assets/stylesheets/' }; Diretórios: Configurando o gulpfile.js

'./../blog/wp-content/themes/culturainglesa/assets/stylesheets/' }; var javascripts = { files: [ “./bower_components/**/*.min.js", "./source/assets/javascripts/blog-cultura.js"], dest: './source/assets/javascripts/', build: './../blog/wp-content/themes/culturainglesa/assets/javascripts/' }; Diretórios: Configurando o gulpfile.js

'./../blog/wp-content/themes/culturainglesa/assets/stylesheets/' }; var javascripts = { files: [ “./bower_components/**/*.min.js", "./source/assets/javascripts/blog-cultura.js"], dest: './source/assets/javascripts/', build: './../blog/wp-content/themes/culturainglesa/assets/javascripts/' };    var images = { files: [“./source/assets/images/**/*”], dest: ‘./source/assets/images/min/‘, build: ‘./../blog/wp-content/themes/culturainglesa/assets/images/min/‘ }; Diretórios: Configurando o gulpfile.js

Configurando o gulpfile.js gulp.task('sass', function() { return gulp.src(stylesheets.files) .pipe(sass({ includePaths:
require('node-bourbon').includePaths }).on('error', sass.logError)) .pipe(gulp.dest(stylesheets.dest)); }); Task para CSS:

Configurando o gulpfile.js gulp.task('javascript', function() { gulp.src(javascripts.files) .pipe(concat('blog-cultura.dev.js')) .pipe(gulp.dest(javascripts.dest)); });
Task para Javascript:

Configurando o gulpfile.js gulp.task('images', function() { gulp.src(images.files) .pipe(imagemin()) .pipe(gulp.dest(images.dest)); });
Task para Imagens:

Configurando o gulpfile.js gulp.task('watch', function() { gulp.watch(stylesheets.files, ['sass']); gulp.watch(javascripts.files, ['javascript'']); 
gulp.watch(images.files, ['images'']); }); Task para observar arquivos ou diretórios:

Configurando o gulpfile.js gulp.task('default', ['javascript', ‘sass’, ‘images’, 'watch']); Task default
para executar as demais configuradas:

Pronto, agora é só rodar gulp default ou gulp No
terminal, executar sua task default:

Rodando individualmente gulp images gulp sass gulp javascript gulp watch
No terminal, executar suas task`s:

Em produção gulp.task('sassbuild', function() { return gulp.src(stylesheets.ﬁles) .pipe(sass({ includePaths: require('node-bourbon').includePaths
}).on('error', sass.logError)) .pipe(minifyCss()) .pipe(rename({sufﬁx: '.min'})) .pipe(gulp.dest(stylesheets.build)); }); Task para CSS:

Em produção Task para Javascript: gulp.task('javascriptbuild', function() { gulp.src(javascripts.ﬁles) .pipe(concat(‘blog-cultura.min.js'))
.pipe(minify()) .pipe(gulp.dest(javascripts.build)); });

gulp.task('imagesbuild', function() { gulp.src(images.ﬁles) .pipe(imagemin()) .pipe(gulp.dest(images.build)); }); Task para Imagens:
Em produção

gulp.task('build', ['javascriptbuild', ‘sassbuild’, ‘imagesbuild’]); Task build para executar as modiﬁcações
ﬁnais: Em produção Pronto, agora é gerar o build no terminal: gulp build

Resultado CSS 33kb 23kb 556 bytes

Resultado JS 26kb 26kb 810 bytes

Fácil integração para novos desenvolvedores na equipe 1. npm install
2. bower install 3. gulp

Obrigado • http://palloi.com.br • @palloi

Como otimizar seu projeto com Gulp

Como otimizar seu projeto com Gulp

More Decks by Palloi Hofmann

Other Decks in Programming

Featured

Transcript