Útiles plugins para gulp

Cada día amo un poco más usar gulp. Poder automatizar un gran rango de tareas a un solo comando en la consola simplifica mucho el desarrollo. Aquí dejo una lista de plugins que estoy usando en casi todo proyecto:

gulp-load-plugins

En lugar de tener que estar cargando cada plugin a mano, este se encarga de hacerlo automáticamente.

var plugins = require('gulp-load-plugins')();

gulp.task('js', function () {
	gulp.src('file.js').pipe(plugins.uglify()).pipe(gulp.dest('file.min.js'));
});

gulp-uglify

Minifica javascript para tener un código más ligero para ponerlo en producción.

gulp-sass / gulp-less

Los nombres lo dicen, ¿no? Compila Less o Sass al CSS de todos los días.

gulp-autoprefixer

Deja de escribir a mano los prefijos para estilos en distintos navegadores, tampoco uses mixins de sass o less. ¡Mejor aplica Autoprefixer a tu CSS y olvídate de problemas!

gulp.task('css', function () {
	gulp.src('file.css')
		.pipe(
			plugins.autoprefixer({
				browsers: ['last 3 versions', '> 1%', 'ie >= 8'],
				cascade: false,
			}),
		)
		.pipe(gulp.dest('file.build.css'));
});

gulp-combine-media-queries

No me gusta tener muchos @media en mi archivo CSS final, una manía. El otro día encontré este plugin que nos junta los media queries que tengamos y que se repitan. Pase de 81 @media a solamente 11. Un poco menos de peso :D

gulp-csso

Minifica CSS de una forma un poco diferente a otros plugins. Ver CSSO para mas información.

gulp-if

Simple condiciones para decidir que tareas realizar en base a variables.

.pipe( plugins.if(production, plugins.csso()) )

gulp-sourcemaps

Nos permite generar sourcemaps en base a los archivos fuente, sin importar el procesado (compilar, autoprefixer, minificar, etc) que hagamos. Útil para debug.

gulp-concat

Para juntar varios archivos en uno mismo. ¡Menos peticiones al servidor!

gulp-watch

Se queda observando cambios a nuestros archivos para compilarlos de nuevo de forma automática.

Al final, un ejemplo de mi gulpfile.js podría ser algo así:

var gulp = require('gulp'),
	plugins = require('gulp-load-plugins')(),
	production = plugins.util.env._[0] === 'build';

var paths = {
	css: {
		src: ['./src/less/**.*'],
		dist: './assets/css/',
	},
	js: {
		src: ['./src/js/**.*'],
		dist: './assets/js/',
	},
};

gulp.task('css', function () {
	gulp.src(paths.css.src)
		.pipe(plugins.if(!production, plugins.sourcemaps.init()))
		.pipe(plugins.less())
		.pipe(
			plugins.autoprefixer({
				browsers: ['last 3 versions', '> 1%', 'ie >= 8'],
				cascade: false,
			}),
		)
		.pipe(plugins.combineMediaQueries({ log: false }))
		.pipe(plugins.concat('style.css'))
		.pipe(plugins.if(production, plugins.csso()))
		.pipe(plugins.if(!production, plugins.sourcemaps.write()))
		.pipe(gulp.dest(paths.css.dist))
		.on('error', plugins.util.log);
});

gulp.task('js', function () {
	gulp.src(paths.js.src)
		.pipe(plugins.if(!production, plugins.sourcemaps.init()))
		.pipe(plugins.concat('app.js'))
		.pipe(plugins.if(production, plugins.uglify()))
		.pipe(plugins.if(!production, plugins.sourcemaps.write()))
		.pipe(gulp.dest(paths.js.dist))
		.on('error', plugins.util.log);
});

gulp.task('watch', function () {
	gulp.watch(paths.css.src, ['css']);
	gulp.watch(paths.js.src, ['js']);
});

gulp.task('build', ['css', 'js']);

gulp.task('default', ['build', 'watch']);