GulpFile-basico-1
Ejemplo de configuración de tareas básicas en Gulp.
//=== 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 | |
//=== tareas ===// | |
//=== sass ===// | |
gulp.task('sass', function() { | |
//origen desarrollo (solo archivo final generado) | |
return gulp.src('source/scss/app.scss') | |
.pipe(plumber()) //logs en consola | |
.pipe(sass({outputStyle: 'nested'})) //compresión | |
.pipe(autoprefixer('last 2 versions')) //auto-prefijos | |
.pipe(gulp.dest('dist/css/')); //destino producción | |
}); | |
gulp.task('scripts', function() { | |
//origen desarrollo (poner archivos en orden de concatenación) | |
return gulp.src(['source/scripts/external/*.js', 'source/scripts/main.js']) | |
.pipe(plumber()) //logs en consola | |
.pipe(concat('main.js')) //concatena | |
.pipe(uglify()) //minifica | |
.pipe(gulp.dest('dist/js/')); //destino producción | |
}); | |
//=== watch ===// | |
//vigila archivos en busca de cambios y aplica tareas | |
gulp.task('watch', function() { | |
//busca archivos scss y aplica la tarea sass | |
gulp.watch('source/scss/**/*.scss', ['sass']); | |
//busca archivos js propios y aplica las tareas scripts y jshint | |
gulp.watch('source/scripts/*.js', ['scripts']); | |
}); | |
//=== 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']); | |