[DICA] Utilizando Gulp com ES6!

Fala galera!! Hoje estou aqui para mostrar como podemos usar as novas features do ES6 no nosso arquivo Gulpfile.

Para começarmos a escrever ES6 no nosso Gulpfile, precisamos adicionar alguns pacotes no nosso package.json
Rode o seguinte comando no seu terminal

npm install --save-dev gulp babel-core babel-preset-es2015

Agora vamos criar um arquivo .babelrc e nele vai conter:

{
  "presets": ["es2015"]
}

Tudo pronto, já podemos começar a escrever nosso Gulpfile com as novas features do ES6!!

Let’s Code

Vamos criar nosso gulpfile.babel.js e dentro dele vai ter o seguinte código:

import gulp from 'gulp';
import stylus from 'gulp-stylus';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import imagemin from 'gulp-imagemin';

// Task Stylus
gulp.task('stylus', () => {
  return gulp.src('./assets/styl/main.styl')
        .pipe(stylus({ compress: true}))
        .pipe(gulp.dest('./build/assets/css/main.min.css'));
});

// Task Concat
gulp.task('concat:js', () => {
  return gulp.src('./assets/js/**/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest('./assets/js/main.js'));
});

// Task Uglify
gulp.task('uglify', () => {
  return gulp.src('./assets/js/main.js')
        .pipe(uglify())
        .pipe(gulp.dest('./build/assets/js/main.min.js'));
});

// Task Imagmin
gulp.task('imagemin', () => {
  return gulp.src('./assets/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./build/assets/images/'))
});

gulp.task('default', ['stylus', 'concat:js', 'uglify', 'imagemin']);

Rodando o comando gulp, devemos obter o seguinte resultado

[09:27:51] Requiring external module babel-register
[09:27:52] Using gulpfile ~/Documentos/BlogExamples/GulpComES6/gulpfile.babel.js
[09:27:52] Starting 'stylus'...
[09:27:52] Starting 'concat:js'...
[09:27:52] Starting 'uglify'...
[09:27:52] Starting 'imagemin'...
[09:27:52] Finished 'stylus' after 33 ms
[09:27:52] Finished 'concat:js' after 19 ms
[09:27:52] Finished 'uglify' after 17 ms
[09:27:52] gulp-imagemin: Minified 0 images
[09:27:52] Finished 'imagemin' after 41 ms
[09:27:52] Starting 'default'...
[09:27:52] Finished 'default' after 41 μs

Conclusão

Bom pessoal, esse foi um post bem simples só para mostrar como você utiliza ES6 com o Gulp, em breve pretendo abordar mais features dessa versão do EcmaScript!!! Por favor não se esqueçam de deixar um feedback nos comentários ou no meu Twitter