GulpFile-basico-1

GulpFile-basico-1.markdown

GulpFile-basico-1

Ejemplo de configuración de tareas básicas en Gulp.

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

//=== 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']);