Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GulpFile-basico-1
//=== 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']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment