Monday, 20 February 2017

Configurar ambiente de projeto com webpack e webpack-dev-server com auto refresh

Vamos configurar um ambiente de projeto, como se fosse ume esqueleto, com webpack e webpack-dev-server com auto refresh para melhor desenvolvimento.

Primeiro vamos ao terminal para instalar o webpack e o webpack-dev-server de maneira global

sudo npm install -g webpack webpack-dev-server

Agora navegamos até a pasta do nosso novo projeto e rodamos o “npm init” para iniciar o projeto e depois, abrimos o arquivo package.json e adicionamos as seguintes dependências

"devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1"
  },

logo depois de adicionarmos essas dependências (que incluem aí o babel e alguns loaders do webpack) nós rodamos no terminal o npm update para baixar as dependências necessárias.

Nesse passo configuramos o webpack.config.js com o source-map, que irá permitir que possamos debugar nosso projeto, com o plugin de auto refresh, com os loaders de babel, url e file loader, css, style e sass loader, além do devServer, que será o servidor de desenvolvimento que irá nos ajudar com o auto compile a auto refresh 🙂 .. mas de maneira simples, é só copiar esse código abaixo


webpack = require('webpack');

module.exports =  {
	devtool: 'source-map',
	entry: './src/js/main.js',
	output: {
		path: __dirname + '/dist',
		filename: 'app.bundle.js',
		publicPath: '/dist/'
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin()
	],
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				loader:'babel-loader',
				query: {
					presets: ['es2015']
				}
			},
			{
				test: /\.(woff|woff2|ttf|svg|eot)$/,
				loader: 'url-loader?limit=100000',
			},
			{
				test: /\.(scss|sass)$/,
				loader: ['style-loader', 'css-loader', 'sass-loader'],
			}
		]
	},
	devServer: {
		// host: '0.0.0.0',
		inline: true,
		watchOptions: {
			poll: true,
			aggregateTimeout: 300
		}
	}
}

prontinho… dessa maneira a gente já tem um pré ambiente de desenvolvimento javascript, com webpack, common.js, debug e auto refresh

Criar gif de um video screencast capturado pelo quicktime

Criei um script para criar meus gifs de videos screencast capturados pelo QuickTime no OSx

Chamei o script de movtogif e coloquei esse código dentro


movtogif(){
ffmpeg -i "$1" -vf scale=800:-1 -r 10 -f image2pipe -vcodec ppm - |\
convert -delay 5 -layers Optimize -loop 0 - "$2"
}
movtogif $1 $1.gif

Como usar?

movtogif input.mov

Dependencias

  • ImageMagick
  • FFMpeg

OSX / Brew

brew install ffmpeg
brew install imagemagick

Instalando o lite-server e o browser sync e tenha o poder do autorefresh

Como instalar o lite-server e o browser sync para ter o poder do autorefresh e melhor produção dos seus projetos

Não é chato você estar escrevendo seus códigos e toda hora tem que dar reload na página?

Chega disso!

Entre no seu ambiente de produção pelo terminal e rode o seguinte código para instalar o lite-server

sudo npm -g  install lite-server

Dessa forma, ao ir na pasta do seu projeto e rodar o comando lite-server, o servidor já estará disponibilizando um endereço para você acessar o seu projeto.

Agora vamos fazer o refresh automático com o poderoso Browser Sync

Configuraremos um novo arquivo dentro da pasta raiz do projeto.

nano bs-config.json

E coloque o seguinte código no arquivo
{
  "host": "0.0.0.0",
  "watchOptions": {
    "usePolling": true
  }
}

Pronto.. agora rode o lite-server novamente e você estará conectado ao browser sync para seus refreshs automáticos

 

Para mais detalhes e instruções avançadas, vá até o scotch.io nesse artigo aqui

Monday, 11 August 2014

Monday, 4 August 2014

Node.js: Servidor sempre online – Keep server always running

Aqui um script pra fazer seu server em Node.js rodar ao iniciar sua máquina e deixá-lo rodando em background. (testei no ubuntu)

description "node.js server"
author      "kvz - http://kevin.vanzonneveld.net"

# used to be: start on startup
# until we found some mounts weren't ready yet while booting:
start on started mountall
stop on shutdown

# Automatically Respawn:
respawn
respawn limit 99 5

script
    export HOME="/root/path/to/your/nodejs/app"
    cd $HOME
    exec yourprogram.js >> $HOME/node.log 2>&1
end script

post-start script
   # Optionally put a script here that will notifiy you node has (re)started
   # /root/bin/hoptoad.sh "node.js has started!"
end script