anglodiseno.github.io/gulpfile.js at master · AngloDiseno/anglodiseno.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
'use strict';

/**
 * Dependencias
 */
var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    sass = require('gulp-sass'),
    jade = require('gulp-jade'),
    connect = require('gulp-connect'),
    notify = require('gulp-notify');

/**
 * Variable de entorno.
 * En la terminal se puede definir de manera opcional el puerto para cualquiera
 * de las tareas watch, un ejemplo de uso sería:
 * PORT=8080 gulp watch:all
 */
 var PORT = process.env.PORT || 7070;


/**
 * Compila los archivos sass hijos directos de la carpeta `scss/`.
 * Agrega los prefijos propietarios de los navegadores.
 * Los archivos CSS generados se guardan en la carpeta `css/`.
 */
gulp.task('sass', function () {
  var processors = [
    autoprefixer({ browsers: ['last 2 versions'] })
  ];

  return gulp.src('./scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .on('error', notify.onError( { message: 'Fallo - SCSS' }))
    .pipe(plumber())
    .pipe(postcss(processors))
    .pipe(gulp.dest('./css'))
    .pipe(connect.reload());
});


/**
 * Compila los archivos jade hijos directos de la carpeta `jade/`.
 * Los archivos HTML generados se guardan en la carpeta raíz del proyecto.
 */
gulp.task('jade', function() {
  gulp.src('./jade/*.jade')
    .pipe(plumber())
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('./'))
    .pipe(connect.reload())
    .on('error', notify.onError( { message: 'Fallo - JADE' }));
});


/**
 * Recarga el HTML en el navegador.
 * Creado para quienes no usen Jade.
 */
gulp.task('html', function () {
  gulp.src('./*.html')
    .pipe(connect.reload());
});


/**
 * Crea un servidor local livereload
 * http://localhost:7070
 */
gulp.task('connect', function() {
  connect.server({
    // root: '.',
    port: PORT,
    livereload: true
  });
});


/**
 * Ejecuta las tareas connect y sass, queda escuchando los cambios de todos
 * los archivos Sass de la carpeta `scss/` y subcarpetas.
 */
gulp.task('watch:sass', ['connect', 'sass'], function () {
  gulp.watch('./scss/**/*.scss', ['sass']);
});


/**
 * Ejecuta las tareas connect y jade, queda escuchando los cambios de todos
 * los archivos jade de la carpeta `jade/` y subcarpetas.
 */
gulp.task('watch:jade', ['connect', 'jade'], function () {
  gulp.watch('./jade/**/*.jade', ['jade']);
});


/**
 * Ejecuta las tareas connect y html, queda escuchando los cambios de todos
 * los archivos HTML de la carpeta raíz del proyecto.
 * Creado para quienes no usen Jade.
 */
gulp.task('watch:html', ['connect', 'html'], function () {
  gulp.watch('./*.html', ['html']);
});


/**
 * Ejecuta las tareas watch:html y watch:sass
 * Creado para quienes no usen Jade.
 */
gulp.task('watch:html-sass', ['watch:html', 'watch:sass']);


/**
 * Ejecuta las tareas watch:sass y watch:jade.
 */
gulp.task('watch:all', ['watch:sass', 'watch:jade']);


/**
 * Ejecuta la tarea watch:sass.
 */
gulp.task('default', ['watch:sass']);