He aqui una lista de plugins que nos podrían brindar mucha ayuda a la hora de comenzar un proyecto web (FrontEnd) o posiblemente cualquier tipo de proyecto, al final del dia es una herramienta muy utilizada por frontend developers pero puede ser adaptada para cualquier otra cosa, solo hay que tener los plugins correctos a mano y saber como utilizarlos claro para sacarles el mayor provecho.
Inject
Este plugin para mi considerado como uno de los mejores plugin que gulp pueda tener, te da la capacidad de como su nombre lo dice Inject rutas de archivos dentro de archivos específicos delimitados por ciertos Tags, la capacidad de este plugin es realmente y es altamente configurable, podría realizar un tutorial solo hablando de este plugin.
Un ejemplo de como usar este plugin y sabes de sus maravillas:
Plantilla HTML
<!DOCTYPE html> <html> <head> <title>My index</title> <!-- inject:css --> <!-- endinject --> </head> <body> <!-- inject:js --> <!-- endinject --> </body> </html>
GULP Task
var gulp = require('gulp');
var inject = require("gulp-inject");
gulp.task('index', function () {
var target = gulp.src('./index.html');
var sources = gulp.src(['./js/*.js', './css/*.css'], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
});
Este GULP Task lo que realiza es buscar todos los archivos en los directorios seleccionados, una vez seleccionados los archivos seleccionara los archivos con extensiones js y colocaras esas rutas en el archivo index entre las tags y asi sucesivamente con los archivos .css.
Este plugin de gulp es muy util, una forma en la que lo utilizo es combinarlo con otros plugins como Uglify para tener varias task donde si es para desarrollo pues incluyo todos los archivos y si es para produccion minifico y luego incluyo ese archivo generado, pero ya hablare luego de este plugin.
Repositorio Github con una excelente documentación del mismo.
Concat
Este plugin como su nombre hace referencia es para concatenar archivos en un solo, muy util para «concatenar» todos nuestros archivos estáticos valga la redundancia.
Un ejemplo simple del uso del mismo seria algo como el siguiente:
var concat = require('gulp-concat');
gulp.task('scripts', function() {
gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'))
});
Rename
Plugin bien simple y facil de usar para renombrar archivos.
Ejemplo
var rename = require("gulp-rename");
gulp.src("./src/main/text/hello.txt")
.pipe(rename("main/text/ciao/goodbye.md"))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md
gulp.src("./src/**/hello.txt")
.pipe(rename(function (path) {
path.dirname += "/ciao";
path.basename += "-goodbye";
path.extname = ".md"
}))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
.pipe(rename({
dirname: "main/text/ciao",
basename: "aloha",
prefix: "bonjour-",
suffix: "-hola",
extname: ".md"
}))
.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md
Este plugin puede servir para simplemente cambiar el nombre y/o ruta de un archivo, o puede ir mas complejo de hasta moverlo a un directorio X y/o trabajar con su nombre y extensión.
Uglify
Este plugin bastante usado en la comunidad de javascript y como no si lo que hace es minificar archivos js, combinado con otro plugin puede ser bastante util el mismo.
Ejemplo
var uglify = require('gulp-uglify');
gulp.task('compress', function() {
gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
});
En este plugin no hay mucha ciencia, es simplemente bajarlo y usarlo.
Repositorio Github
gulp-plumber
Este plugin mas que una utilidad para prevenir posibles errores de ciertos plugin. Asi se solo se usa para una cosa.
Ejemplo
var plumber = require('gulp-plumber');
var coffee = require('gulp-coffee');
gulp.src('./src/*.ext')
.pipe(plumber())
.pipe(coffee())
.pipe(gulp.dest('./dist'));