El resultado normalmente es un archivo .js minimizado, un archivo .css también minimizado, e imágenes y archivos .html "optimizados".
No les voy a enseñar a usarlo, eso lo pueden ver en detalle en los siguientes enlaces (todos en inglés):
- Why I like GulpJS more than GruntJS
- Quick intro to Gulp.js
- Y obviamente en Google ;)
Después de leer algo de documentación para revisar las opciones de los plugins de Gulp que decidí usar, y trás algunas pruebas, llegué al siguiente código, que me ha arrojado los mejores resultados:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var changed = require('gulp-changed');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var stripDebug = require('gulp-strip-debug');
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src(['js/angular.min.js', 'js/Directive/bindonce.min.js', 'js/jquery-2.0.3.min.js', 'js/bootstrap.min.js', 'js/app.js', 'js/*.js', 'js/Service/*.js', 'js/Filter/*.js', 'js/Directive/*.js', 'js/Controller/*.js'])
.pipe(concat('appjs.js'))
.pipe(stripDebug())
.pipe(gulp.dest('dist'))
.pipe(rename('app.min.js'))
.pipe(uglify({ mangle: false }))
.pipe(gulp.dest('dist'));
});
// include plug-ins
var minifyHTML = require('gulp-minify-html');
// minify new or changed HTML pages
gulp.task('htmlpage', function() {
var htmlSrc = '*.html',
htmlDst = 'dist';
gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML({ empty: true, spare:true, quotes: true }))
.pipe(gulp.dest(htmlDst));
});
// include plug-ins
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
gulp.src(['css/bootstrap.min.css', 'css/*.css'])
.pipe(concat('styles.min.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('dist'));
});
// default gulp task
gulp.task('default', ['htmlpage', 'scripts', 'styles'], function() {
});
Lo único que no pude resolver a través de parámetros (y si alguien lo sabe se agradece si comparten el dato) fue el hecho que el plugin minify-html se "come" mis espacios en blanco intencionales (a veces necesarios) y los atributos que no tienen valor (como el bindonce). Tan grave no es si sabes donde ponerlos de vuelta, pero eso ya es parte del trabajo manual.
