Para quem não sabe, automatizador de tarefas é uma ferramenta que agiliza o processo de desenvolvimento em ações repetitivas. Exemplo, minificar arquivos Javascript e CSS. Testar se o código Javascript está correto, agrupar diversos arquivos em um, ofuscar código Javascript… São diversas opções, você pode conferir todos os pacotes visitando o link de Plugins.

Chega de explicações e vamos fazer na prática.

Obrigatório ter o node.js instalado, caso não tenha, entre no site node.js, faça download e instale.

Crie uma pasta com um nome desejado, entre nesta pasta e crie o arquivo package.json com o conteúdo abaixo:

{
  "name": "aprendendo",
  "version": "1.0.0",
  "description": "Aprendendo Gulp",
  "author": "Seu nome<seu@email.com.br>",
  "devDependencies": {
	"gulp": "*",
	"gulp-uglify" : "*",
	"gulp-concat" : "*"
  }
}

Após o arquivo criado, adicione seu nome e e-mail na linha “author” de acordo com o formato exemplificado. Depois, instale as dependências via linha de comando ( obrigatório estar na pasta criada ):

npm install

Agora, crie o arquivo gulp.js que será onde ficará as configurações do Gulp e insira o conteúdo:

var js  = [
    './js-source/vendor/jquery/*',         // Todos os arquivos do diretório Jquery
    './js-source/vendor/bootstrap/*.*',     // Todos os arquivos do diretório bootstrap e sub diretórios
    './js-source/main.js'                  // Arquivo único
];

// Núcleo do Gulp
var gulp = require('gulp');

// Transforma o javascript em formato ilegível para humanos
var uglify = require("gulp-uglify");

// Agrupa todos os arquivos em um
var concat = require("gulp-concat");

// Tarefa de minificação do Javascript
gulp.task('minify-js', function () {
    gulp.src(js)                        // Arquivos que serão carregados, veja variável 'js' no início
    .pipe(concat('script.min.js'))      // Arquivo único de saída
    .pipe(uglify())                     // Transforma para formato ilegível
    .pipe(gulp.dest('./js/'));          // pasta de destino do arquivo(s)
});

// Tarefa padrão quando executado o comando GULP
gulp.task('default',['minify-js']);

// Tarefa de monitoração caso algum arquivo seja modificado, deve ser executado e deixado aberto, comando "gulp watch".
gulp.task('watch', function() {
    gulp.watch(js, ['minify-js']);
});

Neste arquivo, estamos supondo que estamos com a seguinte estrutura:

js-source
    vendor
        jquery
            jquery.js
        bootstrap
            bootstrap.main.js
            bootstrap.plugins.js
    main.js
js(pasta vazia)
gulp.js
package.json

Execute o comando abaixo:

gulp

Após executar o comando gulp, será gerado o arquivo script.min.js na pasta js. Desta forma, após alterações nos arquivos o comando deverá ser disparado novamente para gerar a nova versão. Um pouco trabalhoso, mas existe uma maneira de automatizar isto.

Vamos utilizar a TASK “watch” para fazer isto por nós. Digite “gulp watch” e deixe a janela aberta, não cancele pois o processo ficará monitorando os arquivos, caso algum tenha alguma alteração, o arquivo final será gerado novamente.

Este exemplo é válido para compactar, ofuscar e gerar um arquivo único de javascript. No próximo tutorial vamos mostrar como fazer isto com arquivos CSS.

PLANEJAMENTO

Na grande maioria dos projetos web, tudo se inicia pela Arquitetura de Informação (UX) e mesmo que talvez esta não seja a sua área, eventualmente organizar e entender um website por inteiro, também possa ser uma necessidade.

Sem considerar todos os argumentos aplicados às melhores metodologias, criar um sitemap* pode ser algo bastante útil então, a dica é, uma das ferramentas online que trabalha bem com esse tipo de documento é o Coggle.it que ainda está em sua versão beta, mas já pode ser usado e aplicado.

*Sitemap: organograma contendo todas as páginas que o site/portal irá conter. Este documento especifica as várias telas. Geralmente é produzido no início do projeto e refinada durante todas as etapas conforme as demandas posteriores. Referência: http://webinsider.com.br

Outra ferramenta para o planejamento de projetos, especial para brainstorms e referências (para os designers de plantão) é o Mural.ly, que além de funcional tem uma interface de fácil uso que te permite, literalmente, arrastar um website para o seu mural de ideias.

DESIGN

Nos dias de inspiração, o design de uma interface simplesmente flui sem paradas e pausas em branco, mas em alguns dias as coisas ficam um pouco mais difíceis e até mesmo escolher as melhores cores, torna-se uma coisa bastante complexa. Pensando nisso a ColorScheme e a ColorSchemer.com são ótimas ferramentas de paletas de cores para seu website. Você insere o código hexadecimal da cor principal e a ferramenta te mostra as demais combinações. Vale a pena.

Além de pensar em interface, com as técnicas de Design Responsivo, é inevitável em algum momento pensar em grids (mesmo que você seja um daqueles contra o uso deles  ). Para isso, existe o Grid Calculator e o Grid Pak onde você insere a medida de largura padrão de seu website e ele cria as medidas das colunas divididas igualmente. Você ainda pode fazer o download do grid em PSD e PNG.

FRONT-END

Essa talvez seja a etapa de um projeto melhor auxiliada neste quesito ferramentas. Graças ao perfil colaborativos dos Front-Ends do mundo, as possibilidades são quase infinitas (estamos chegando lá :D) e esta fase de transição HTML 4 -> HTML 5 e CSS 2 -> CSS3, proporciona ainda mais que novas ferramentas surjam.

Iniciando pelos auxiliadores de CSS3 :D. Sim! Eles são ótimos e poupam nossa memória em lembrar exatamente como as novas propriedades precisam ser declaradas para gerarem efeitos na interface.
A primeira dica fica para o Create CSS3, que é bastante completo e contém a maior parte das novas características mais usadas. A forma de usá-lo é bem simples: clica no item de seu interesse, configura com os dados necessários para você e voialá, um trecho de propriedades css pronto para ser implementado.

Ainda falando em css, que tal deixar o css feio, bonito? Isso mesmo! O Css Beautifier reorganiza a distribuição de linhas e tabs do seu arquivo css. Basicamente, ele deixa mais agradável a leitura.

Mas, se apenas deixar bonito não resolve e você também quer um css otimizado, no CSS Compressor, você copia, cola e sai um css minimizado e pronto para ser implementado. Aliás, você ainda pode determinar o nível das “facadas” que você dará nas linhas do seu arquivo.

Na mesma linha, porém um pouco mais completo, tem o CSS Minifier que também minimiza, tem API de integração e o bônus de outras 3 ferramentas, Javascript Minifier, PNG Crush (para redução de arquivos png) e o JPG Optimiser (para otimização de arquivos JPEG).

Aproveitando o bônus da ferramenta anterior, outra ferramenta que pode auxiliar na questão de performance de imagens, é o Image Optim, um software de fácil instalação para Mac, que reduz o peso de arquivos de imagens. Caso você não utilize um Mac, sem problema, ele possui uma versão Windows e outra Linux. Vale a pena.

Que tal testar seus códigos antes de implementá-los em seu projeto?
Isso lhe garante a segurança de saber se vai dar tudo certo na execução daquele javascript ou na inserção daquela propriedade no css.
Para isso, lhes apresento o CodePen, um editor de código live que funciona de forma bem direta e de fácil manuseio. Tem muita gente testando por lá ;).

Para os front-ends ligados nas novidades, a ferramenta indicada é o HTML5Please que vai informando quais novas tags e propriedades de HTML5 e CSS3 já podem ser implementadas neste período de transição.

E para fechar, front-end para site responsivo.
Quando um projeto também será responsivo (prática cada vez mais comum e mais profissional) esta estratégia precisa ser planejada antes de sua execução para que ao invés de gerar problemas você consiga gerar códigos bem feitos e o efeito esperado. Para isso, uma das preocupações que aparecerão será com as imagens do seu projeto e como elas responderão aos diferentes dispositivos. Neste aspecto, o Adaptive Images te auxilia detectando a resolução do usuário e apresentando a imagem com a melhor resolução possível ao dispositivo.

Completando a linha responsivo, outra preocupação é questão dos textos e sua adaptação à diferentes tamanhos de telas e neste caso, entra em cena o FitText, um script que fará seu font-size realmente flexível.

VALIDAÇÃO

Tudo pronto, tudo certinho, site publicado em ambiente de homologação ou até mesmo em ambiente final, que tal validar seu sites para ver se ele está de acordo com os padrões?

Para web standars tem o já conhecido (e as vezes temido) W3C Validator e outra opção não tão conhecida, mas funcional, o HTML Inspector.

Para os padrões de acessibilidade, você pode utilizar o A Checker que em alguns segundos diz quais padrões não estão sendo seguidos para que seu site seja acessível por navegadores textuais e de audio e ainda indica as melhores práticas para reverter os problemas.

Outra ferramenta importante para quem pensa em validações é a Webmaster Tools da Google, que permite verificar como o robô do buscador está se comportando em seu site, além de dizer quais páginas estão sendo indexadas. Além disso, te possibilita informar mudanças de URL ou até mesmo retorno de sites que foram invadidos. A ferramenta é robusta e de extrema valia. Confere lá!

Fonte: Tableless

Quer uma Hospedagem de Site Barata e confiável? www.turbosite.com.br