Postagens

Mostrando postagens de 2015

Usando o gulp para fazer o deploy da sua aplicação

Fala pessoal, desculpa por ficar tanto tempo sem fazer uma postagem mas é porque estou com muitos projetos em andamento. Mas vamos a dica de hoje, depois de usar o Gulp no desenvolvimento, podemos também fazer uma task de deploy, utilizando a junção do gulp-util e gulp-shell, vamos ao exemplo para elucidar. gulp deploy --mensagem "Mensagem do commit no git" É o comando que iremos utilizar para fazer o deploy e adicionamos a seguinte task no gulpfile.js: /*Carregamento das váriavies*/ var gulp = require('gulp'); var shell = require('gulp-shell'); //Pacote utilizado para executar comando shell na task var util = require('gulp-util'); //Pacote utilizado para pegar a variável "message" passada como parâmetro gulp.task('deploy', function (){ var variavel = 'mensagem'; /**Verifica se a variável foi passada como parametro*/ if(util.env[variavel] === undefined){ util.log(util.colors.red('Não foi…

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!

Lazy load no Angular using Jquery

Fala galera, estou fazendo uma nova versão do portal da empresa usando angularjs e estava com bastante dificuldade de utilizar o padrão Lazy load no angular, identifiquei diversas soluções utilizando RequireJS e ocLazyLoad, mas achei muito código e complicado a forma de fazer então depois de ler a documentação do $routeProvider identifiquei que tinha a opção 'resolve', que executa um objeto que tem uma função antes da renderização da route, com isso pode utilizar a função do jquery, para dar um load no  controller antes da renderização da tela utilizando o comando '$.getScript()'.

Vamos ao exemplo para melhor entendimento.

app.js
/*Criação do Módulo*/ angular.module('app', ['ngRoute']); app.config(['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider){ /*Criação de uma forma mais sintetizada do service do $controllerProvider.register*/ app.registerCtrl = $controllerProvider.register; …