Postagens

Mostrando postagens de Maio, 2015

Utilizando o Gulp para facilitar seu desenvolvimento front-end

Olá!

No último artigo eu falei sobre o live-reload, que ficava "escultando" uma pasta e atualizava o seu navegador padrão quando salvasse algo na pasta que ele tiver rodando, com isso comecei a utilizar SASS através do SCSS, pois é com o CSS normal, depois precisei automatizar essa tarefa de compilação do SCSS para CSS e achei o GRUNT e o GULP, eles são task runners, ou seja, eles executam uma ou várias ações para ti, chamadas de "Task" de forma automatizada através de um comando seu.

Depois te tudo isso escolhi o Gulp e ele pede um arquivo de configuração chamado de gulpfile.js, o que estou usando atualmente é esse:

/*Carregamento das váriavies*/ var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload; var mocha = require('gulp-mocha'); var sass = require('gulp-sass'); var gutil = require('gulp-util'); /** Task para dar reload no browser*/ gulp.task('browser-sync'…

Atualizando o navegador assim que salva arquivos css, js e html (live-server)

Fala galera! desculpa ai ficar tanto tempo sem postar nada, estava muito aprendendo alguns conceitos novos e pretendo logo fazer alguns artigos sobre eles.

Pesquisando sobre es6-module achei uma ferramenta chamada live-server, que ela fica "escultando" as alterações de arquivos com extensões js, css e html e atualiza o seu navegador padrão assim que identifica a alteração. É necessário ter o NPM instalado, para fazer a instalação deste modulo.

Então instala ele de forma global com o seguinte comando:

npm install -g live-server
Depois só executar o comando live-server  dentro da pasta que está desenvolvendo que ele fará as alteações no navegador.


É isso ai galera, espero ter ajudado vocês, qualquer dúvida é só comentar!