erknrio of Programming Guanches
10/25/2016 - 3:19 PM

Minify todos los js y css de las rutas especificadas evitandos los min. FROM: http://julienrenaux.fr/2014/05/25/introduction-to-gulp-js-with

Minify todos los js y css de las rutas especificadas evitandos los min. FROM: http://julienrenaux.fr/2014/05/25/introduction-to-gulp-js-with-practical-examples/ http://stackoverflow.com/questions/24805323/gulp-minifies-already-minified-file#answer-24805438 https://www.npmjs.com/package/gulp-clean-css

gulpfile.js
content_copyfile_download
// including plugins
var gulp = require('gulp'),
uglify = require("gulp-uglify"),
cleanCSS = require("gulp-clean-css"),
rename = require("gulp-rename");

// task
gulp.task('minify-js', function () {
    gulp.src(['js/*.js', '!js/*.min.js']) // path to your files
    .pipe(uglify())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest('js/'));
});

// task
gulp.task('minify-css', function () {
    gulp.src(['css/*.css', '!css/*.min.css']) // path to your files
    .pipe(cleanCSS({debug: true}, function(details) {
        console.log("Original: " + details.name + ': ' + details.stats.originalSize);
        console.log("Minify: " +details.name + ': ' + details.stats.minifiedSize);
    }))
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest('css/'));
});
README.md
content_copyfile_download
  • Rendered
  • Source

Introducción

En este fichero entenderás como minificar todos los JS de una ruta específica.

Prerequisitos

  1. Instalar gulp: npm install -g gulp.
  2. Instalar uglify para minificar: npm install --save-dev gulp-uglify.
  3. Instalar rename para generar los .min: npm install --save-dev gulp-rename.
  4. Enjoy!.

Uso

Generalidades

  • Copia el fichero gulpfile.js.
  • Modifica las carpetas de fuente gulp.src y destino gulp.dest con tus propias fuentes y destinos.
  • Si quieres cambiar el .min por otro sufijo modifica la línea suffix correspondiente (js y/o css).
  • Si quieres eliminar el renombrado a .min.js elimina el .pipe(rename.

Minify CSS

  • Para quitar el debug y no ver los ficheros modificados elimina:
{debug: true}
function(details) {