[JS] Exemplo de um gulpfile

gulpfile.md

Exemplo de estrutura de um gulpfile.js

var gulp        = require('gulp')
  , imagemin    = require('gulp-imagemin')
  , clean       = require('gulp-clean')
  //, concat      = require('gulp-concat')
  //, htmlReplace = require('gulp-html-replace')
  , uglify      = require('gulp-uglify')
  , usemin      = require('gulp-usemin')
  , cssmin      = require('gulp-cssmin')
  , browserSync = require('browser-sync')
  , jshint      = require('gulp-jshint')
  , stylish     = require('jshint-stylish')
  , csslint     = require('gulp-csslint')
  , autoprefix  = require('gulp-autoprefixer')
  , less        = require('gulp-less');

gulp.task('default', ['copy'], function() {
  gulp.start('build-img', 'minificar');
});

gulp.task('server', function(){
  browserSync.init({
    server: {
      baseDir: 'src'
    // proxy: "localhost:3000" // caso tenha que recarregar algo servido por outro servidor (rails por ex)
    }
  });

  // checa se o css esta correto
  gulp.watch('src/css/*.css').on('change', function(event){
    gulp.src(event.path)
      .pipe(csslint())
      .pipe(csslint.reporter());
  });

  // compila os arquivos .less para .css
  gulp.watch('src/less/*.less').on('change', function(event){
    gulp.src(event.path)
      .pipe(less().on('error', function(e){
        console.log('LESS, erro compilação: ' + e.filename);
        console.log(e.message);
      }))
      .pipe(gulp.dest('src/css'));
  });
  
  // checa se o js esta correto
  gulp.watch('src/js/*.js').on('change', function(event){
    gulp.src(event.path)
      .pipe(jshint())
      .pipe(jshint.reporter(stylish));
  });
  // Se alterar qualquer arquivo da pasta src recarrega o navegador
  gulp.watch('src/**/*').on('change', browserSync.reload);
});

gulp.task('clean', function() {
  return gulp.src('dist')
    .pipe(clean());
});

gulp.task('copy', ['clean'], function() {
  return gulp.src('src/**/*')
    .pipe(gulp.dest('dist'));
});

gulp.task('build-img', function() {
  gulp.src('dist/img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});

/*
 * // TASKS substituidas pela task minificar
 *
 * gulp.task('build-js', function(){
 *   gulp.src(['dist/js/jquery.js','dist/js/home.js','dist/js/produto.js'])
 *     .pipe(concat('all.js'))
 *     .pipe(uglify())
 *     .pipe(gulp.dest('dist/js'));
 * });
 * 
 * gulp.task('build-html', function(){
 *   gulp.src('dist/** /*.html') //retirar o espaço
 *     .pipe(htmlReplace({
 *       js: 'js/all.js'
 *     }))
 *     .pipe(gulp.dest('dist'));
 * });
 */

gulp.task('minificar', function(){
  gulp.src('dist/**/*.html')
    .pipe(usemin({
      'js' : [uglify],
      'css': [autoprefix, cssmin] // autoprefix precisa do arquivo 'browserslist' dizendo quantas versões suportar
    }))
    .pipe(gulp.dest('dist'));
});