GulpFile-basico-2

GulpFile-basico-2.markdown

GulpFile-basico-2

Añadido control de calidad JavaScript, notificaciones a través del sitema, corregido error en la tarea sass.

A Pen by BCasal.es on CodePen.

License.

script.js

//=== IMPORTS ===//

'use strict';

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'), //agrega prefijos css
    uglify = require('gulp-uglify'), //minifica js
    concat = require('gulp-concat'), //une js
    sass = require('gulp-sass'), //minifica y une css
    plumber = require('gulp-plumber'), //control de errores plugins
    notify = require('gulp-notify'), //notificaciones en sistema
    jshint = require('gulp-jshint'); //control de calidad js

//=== TAREAS ===//

  //=== MANEJO DE ERRORES ===// 
  //=== encontrado en : https://gist.github.com/floatdrop/8269868 ===//

  // * 1 * // crea una variable _gulpsrc
  // * 2 * // añade una función a gulp.src
  // * 3 * // encadena plumber
  // * 4 * // pasa los errores a notify
  // * 5 * // termina notify
  // * 6 * // termina plumber (añadido para corregir error)

  var _gulpsrc = gulp.src; // * 1 * //
    gulp.src = function() { // * 2 * //
      return _gulpsrc.apply(gulp, arguments)        
        .pipe(plumber({ // * 3 * //
          errorHandler: function(err) {
            notify.onError({ // * 4 * //
              title:    "Gulp Error",
              message:  "Error: <%= error.message %>",
              sound:    "Bottle"
            })(err);
              this.emit('end'); // * 5 * //
          }
        }));
    this.emit('end'); // * 6 * // // * corrige error * //
    };

    // * corrige error * //
    // solución encontrada en: 
    // http://stackoverflow.com/questions/30506786/gulp-plumber-breaking-sass-pipe
    
    // necesario para la tarea de sass
    // si no se finaliza la tarea de plumber
    // la tarea de sass detiene el watch
    // cuando detecta un error en el código  

    //=== SASS ===//

    // * 1 * // origen desarrollo (solo archivo final generado)
    // * 2 * // compresión desarrollo (legible)
    // * 3 * // compresión producción (minificada)
    // * 4 * // auto-prefijos
    // * 5 * // destino producción
    // * 6 * // notificación en sistema

    gulp.task('sass', function() {

      return gulp.src('source/scss/app.scss') // * 1 * //
            .pipe(sass({outputStyle: 'nested'})) // * 2 * //
            //.pipe(sass({outputStyle: 'compressed'})) // * 3 * //
            .pipe(autoprefixer('last 2 versions')) // * 4 * //
            .pipe(gulp.dest('dist/css/')) // * 5 * //
            .pipe(notify({ message: 'Tarea sass finalizada' })); // * 7 * //
    });

    //=== CONTROL DE CALIDAD JS ===//

    // * 1 * // origen desarrollo (solo archivos propios)
    // * 2 * // revisa el js en busca de errores
    // * 3 * // notificación en sistema

    gulp.task('jshint', function() {

      return gulp.src('source/scripts/*.js') // * 1 * //
            .pipe(jshint()) // * 2 * //          
            .pipe(notify({ message: 'Tarea jshint finalizada' })); // * 3 * //
    });

    //=== scripts ===//

    gulp.task('scripts', function() {

      // * 1 * // origen desarrollo (poner archivos en orden de concatenación)
      // * 2 * // concatena los archivos
      // * 3 * // minifica los archivos
      // * 4 * // destino producción
      // * 5 * // notificación de sistema

      return gulp.src(['source/scripts/external/*.js', 'source/scripts/main.js']) // * 1 * //
            .pipe(concat('main.js')) // * 2 * //
            .pipe(uglify()) // * 3 * //
            .pipe(gulp.dest('dist/js/')) // * 4 * //
            .pipe(notify({ message: 'Tarea scripts finalizada' })); // * 5 * //
    });

    //=== watch ===//

    // * 1 * // vigila archivos en busca de cambios y aplica tareas
    // * 2 * // vigila cambios en archivos scss y aplica la tarea sass
    // * 3 * // vigila cambios en archivos js (propios) y aplica las tareas scripts y jshint

    gulp.task('watch', function() { // * 1 * //
      gulp.watch('source/scss/**/*.scss', ['sass']); // * 2 * //
      gulp.watch('source/scripts/*.js', ['scripts', 'jshint']); // * 3 * //

    });

    //=== tarea por defecto ===//

    //watch ya ejecuta las tareas sass y scripts
    //si se hacen cambios en los archivos con el watch detenido
    //no aplica los cambios a los archivos
    //si se añaden las 2 tareas al default
    //cuando arranca el watch aplica esos cambios

    gulp.task('default', ['watch', 'sass', 'scripts']);