Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GulpFile-basico-2

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.

//=== 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']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment