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', function() {
 browserSync.init({
  server: {
   baseDir: "./"
  }
 });
});

/**Cria o watch dos arquivos js, css e html, que ao salvar/alterar/criar qualquer uma dessas extensões da um reload na página*/
gulp.task('watch-html-js-css', function() {
 gulp.watch(['./**/*.js','./**/*.html', 'css/**/*.css'], reload);
});

/** Task para teste dos arquivos javascript(Classes e Módulos)*/
gulp.task('mocha', function() {
 return gulp.src(['test/**/*.js'], { read: false })
  .pipe(mocha({ reporter: 'list' }))
  .on('error', gutil.log);
});

/**Cria o watch na pasta de test para verificar todos os testes depois de algum js salvo*/
gulp.task('watch-mocha', function() {
 gulp.watch(['test/**'], ['mocha']);
});

/** Task para compilar o SASS, compila a extensão .scss para .css*/
gulp.task('sass', function () {
 gulp.src('./sass/**/*.scss')
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./css'));
});

/**Cria o watch dos arquivos dos SASS, para que quando salvar compilar os arquivos*/
gulp.task('watch-sass', function() {
 gulp.watch(['./sass/**'], ['sass']);
});

/** Oque vai ser executado quando digitar "gulp" no terminal*/
gulp.task('default', ['browser-sync','watch-html-js-css','watch-mocha', 'watch-sass']);

Vou explicar como ficou o funcionamento que acho que será melhor para entender como ficou, eu abro ou navego com o terminal até minha pasta de desenvolvimento e executo o comando "gulp"
com isso ele vai executar a task "default" que no meu caso é a ultima do arquivo, a task por sua vez vai executar as taks 'browser-sync','watch-html-js-css','watch-mocha' e 'watch-sass'.

• Browser-sync: Cria um servidor web na minha pasta atual (ficou no lugar do live-reload).
• Watch-html-js-css: Ele fica verificando se foi salvo algum arquivo com as extensões: html, js ou css, caso tenha sido salvo algo ou adicionado na pastas ele atualiza meu navegador.
• Watch-mocha: Verifica se algum arquivo foi alterado na pasta "test", caso seja mude executa a task "mocha", que por sua vez executa os testes que estão nesta pasta "test".
• Watch-sass: Verifica se algum arquivo com a extensão .scss foi alterado na pasta "scss" e executa a task "sass" e ela compila todos os meus arquivos .scss para css e salva na minha pasta "css".

É isso ai galera, qualquer dúvida só comentar!