Pra quem não conhece, o DOTENV é um package do NPM para armazenar de forma local informações que não devem ser compartilhadas em seus repositórios.
Vamos à um exemplo bem simples:
Você está atuando em um projeto, e precisa inserir dados de acesso para que você possa de forma tranquila utilizar uma tarefa do gulp onde ela observa o arquivo alterado e faz upload do mesmo para o ambiente do cliente, seja em produção ou desenvolvimento.
O .ENV fica na raiz do seu projeto, e nele você pode colocar informações de login, tokens e etc. Quando um repositório é criado, geralmente é gerado um arquivo chamado .gitignore.
Para que serve?
Como utilizar o .ENV?
npm i dotenv
Depois disso, aguarde a instalação do mesmo.
Agora, na raiz do seu projeto, crie um arquivo chamado .ENV (Sim, com ponto mesmo);
A syntaxe dele é bem simples. Com # você comenta as linhas;
# esta é uma linha de comentário NOME = Canaleta Web URL = https://canaletaweb.blogspot.com USERNAME = login_username PASS = password_aqui
Essas propriedades (nome, url, username, pass) você que irá configurar através do process.env;
No nosso caso utilizamos um arquivo na raiz em javascript chamado settings.js, onde carregamos a configuração do dotenv, e utilizamos o module.exports para configurar as propriedades, para poder repassa-las ao gulp;
// importando dotenv;
require('dotenv').config();
//configurando prorpiedades;
module.exports = {
siteUrl: process.env.URL,
username: process.env.USERNAME,
password: process.env.PASS,
}
console.log(`Você esta no ambiente do cliente "${process.env.NOME}"!`)
Este código acima, pode ser salvo em um arquivo javascript na raiz do repositório também. Com isso você pode criar o arquivo gulpfile.js que será responsável por pegar as informações dentro do module.exports e repassar para o gulp-spsave, por exemplo.
Vou dar um exemplo simples do gulpfile. Lembrando que para usar este exemplo você também precisa ter o gulp e o gulp-spsave instalado em seu repositório.
let settings = require('./settings'),
gulp = require(`gulp`),
spsave = require(`gulp-spsave`),
browserify = require('browserify');
gulp.task(`watch-js`, function(){
gulp.watch([`./src/js/**/*.js`], function(event){
var b = browserify({
entries: event.path,
debug: true
});
return b
.pipe(spsave({
checkin: true,
checkinType: 1,
siteUrl: settings.siteUrl,
folder: `/style library/js/`
});
});
});
Vejamos o código acima;
- Importamos as dependências que iremos utilizar; (gulp, gulp-spsave, browserify)
- Importamos as propriedades definidas no arquivo settings.js;
- Criamos uma tarefa chamada watch-js que observa todos os arquivos js localizados na pasta raiz src/js;
- Ao modificar um arquivo, ele armazena na variavel b os dados do arquivo modificado;
- No retorno, executamos a extensão spsave que recebe algumas propriedades, que são:
- checkin - se quer fazer checkin após altera-lo no SharePoint;
- checkinType - qual tipo de checkin você pretente fazer: check-in apenas para você ou checkin publico para todos;
- siteUrl: carrega os dados do module.exports lá no arquivo settings.js, que este, recebe o process.env.URL que foi configurado no arquivo .ENV
- folder - local onde você deseja salvar este arquivo no SharePoint;
