Vengo utilizando Gulp.js desde hace ya bastante y lo cierto es que simplifica mucho el flujo de trabajo del desarrollo front-end. Si todavía no has utilizado este task runner o «automatizador de tareas», u otro similar como Grunt, y trabajas como desarrollador front-end te recomiendo que por lo menos lo pruebes.
Lo que hace Gulp.js es automatizar tareas repetitivas tales como concatenación de archivos, compilar Sass, LESS, …, minificar css y js, recargar el navegador en cuanto haya un cambio, renombrar archivos, y muchas cosas mas, que puedes comprobar revisando su larga lista de plugins.
Para facilitar el uso de Gulp.js se me ha ocurrido crear una plantilla básica para desarrollo que puede venirte bien para el trabajo y para entender el funcionamiento de Gulp.js. Puedes ver el proyecto aquí.
El contenido del fichero gulpfile.js es el siguiente:
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var browserSync = require('browser-sync');
var uglify = require('gulp-uglify');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('css'));
});
gulp.task('compress', function() {
gulp.src('src/js/*.js')
.pipe(gulp.dest('js'))
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(gulp.dest('js'));
});
gulp.task('browser-sync', function() {
browserSync.init(["css/*.css", "js/*.js", "*.html"], {
server: {
baseDir: "./"
}
});
});
gulp.task('default', ['sass', 'browser-sync', 'compress'], function () {
gulp.watch("src/scss/*.scss", ['sass']);
gulp.watch("src/js/*.js", ['compress']);
});Para instalar el proyecto, con la misma estructura de directorios, puedes hacerlo siguiendo estos pasos:
1. Instalar gulp globalmente
sudo npm install gulp -g
2. Clonar el repositorio en tu espacio de trabajo:
git clone git@github.com:vicentegarcia/gulp-starter-template.git
3. Instalar las dependencias (puedes verlas en el package.json)
npm install
4. Arrancar el servidor web quedándose a la escucha de los nuevos cambios
gulp
En este último paso arrancará el servidor web escuchando en el puerto 3002.
Una vez instalado puedes probar a hacer modificaciones en los archivos .js y .scss que hay en el directorio src. Comprobarás que si por ejemplo modificas el fichero /src/scss/styles.scss y guardas los cambios, automáticamente gulp compilará scss a css, minificando el fichero y dejando el resultado styles.min.css en el directorio /css, a la vez que recargar el navegador. De manera análoga con el fichero /src/js/scripts.js.