Cómo concatenar y minificar múltiples archivos CSS y JavaScript con Grunt.js(0.3.x)

concatenation minify

Question

Nota: esta pregunta solo es relevante para Grunt 0.3.xy se ha dejado como referencia. Para obtener ayuda con la última versión de Grunt 1.x, consulte mi comentario debajo de esta pregunta.

Actualmente estoy tratando de usar Grunt.js para configurar un proceso de compilación automático para primero concatenar y luego minificar los archivos CSS y JavaScript.

Pude concatenar y minificar mis archivos de JavaScript con éxito, aunque cada vez que ejecuto gruñidos, parece que solo se agrega al archivo en lugar de sobrescribirlos.

En cuanto a la CSS minimizadora o incluso concatenada, ¡no he podido hacer esto todavía!

En términos de módulos de grunt CSS he intentado usar consolidate-css , grunt-css y cssmin pero fue en vano. ¡No podía entender cómo usarlos!

Mi estructura de directorios es la siguiente (siendo una aplicación node.js típica):

• app.js
• grunt.js
• /public/index.html
• / public / css / [varios archivos css]
• / public / js / [varios archivos de javascript]

Aquí está mi archivo grunt.js en la carpeta raíz de mi aplicación:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: ''<json:package.json>'',
    concat: {
      dist: {
        src: ''public/js/*.js'',
        dest: ''public/js/concat.js''
      }
    },
    min: {
      dist: {
        src: ''public/js/concat.js'',
        dest: ''public/js/concat.min.js''
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        node: true
      },
      globals: {
        exports: true,
        module: false
      }
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask(''default'', ''concat min'');

};

Solo para resumir necesito ayuda con dos preguntas:

1. Cómo concatenar y minificar todos mis archivos css en la carpeta /public/css/ en un archivo, diga main.min.css
2. ¿Por qué grunt.js sigue adjuntando los archivos de javascript concatenado y minificado concat.js y concat.min.js en /public/js/ lugar de sobrescribirlos cada vez que se ejecuta el comando grunt ?

Actualizado el 5 de julio de 2016: actualización de Grunt 0.3.x a Grunt 0.4.xo 1.x.

Grunt.js ha movido a una nueva estructura en Grunt 0.4.x (el archivo ahora se llama Gruntfile.js ). Por favor, consulte mi proyecto de código abierto Grunt.js Skeleton para obtener ayuda con la configuración de un proceso de compilación para Grunt 1.x

Pasar de Grunt 0.4.x a Grunt 1.x no debería introducir muchos cambios importantes .

Answer 1

Creo que puede ser más automático, utilice la tarea ronca usemin y haga todos estos trabajos por usted, solo necesita alguna configuración:

https://.com/a/33481683/1897196

Answer 2

Estoy de acuerdo con la respuesta anterior. Pero aquí hay otra forma de compresión de CSS.

Puedes concaturar tu CSS usando el compresor YUI :

module.exports = function(grunt) {
  var exec = require(''child_process'').exec;
   grunt.registerTask(''cssmin'', function() {
    var cmd = ''java -jar -Xss2048k ''
      + __dirname + ''/../yuicompressor-2.4.7.jar --type css ''
      + grunt.template.process(''/css/style.css'') + '' -o ''
      + grunt.template.process(''/css/style.min.css'')
    exec(cmd, function(err, stdout, stderr) {
      if(err) throw err;
    });
  });
}; 

Answer 3

No necesita agregar el paquete concat, puede hacerlo mediante cssmin de esta manera:

cssmin : {
      options: {
            keepSpecialComments: 0
      },
      minify : {
            expand : true,
            cwd : ''/library/css'',
            src : [''*.css'', ''!*.min.css''],
            dest : ''/library/css'',
            ext : ''.min.css''
      },
      combine : {
        files: {
            ''/library/css/app.combined.min.css'': [''/library/css/main.min.css'', ''/library/css/font-awesome.min.css'']
        }
      }
    }

Y para js, usa uglify así:

uglify: {
      my_target: {
        files: {
            ''/library/js/app.combined.min.js'' : [''/app.js'', ''/controllers/*.js'']
        }
      }
    }

Answer 4

Quiero mencionar aquí una técnica MUY interesante que se está utilizando en grandes proyectos como jQuery y Modernizr para concatenar cosas.

Ambos proyectos están completamente desarrollados con módulos requirejs (puede ver eso en sus repositorios github) y luego usan el optimizador requirejs como un concatenador muy inteligente. Lo interesante es que, como puede ver, ni jQuery ni Modernizr necesitan que los requisitos para trabajar, y esto sucede porque borran el ritual sintáctico necesario para deshacerse de requireks en su código. ¡Así que terminan con una biblioteca independiente desarrollada con los módulos de requirejs! Gracias a esto pueden realizar versiones de sus bibliotecas, entre otras ventajas.

Para todos aquellos interesados ​​en la concatenación con el optimizador requirejs, revisen esta publicación

También hay una pequeña herramienta que abstrae todo el texto repetitivo del proceso: AlbanilJS

Answer 5

concat.js se está incluyendo en los archivos fuente de la tarea concat public/js/*.js . Podría tener una tarea que elimine concat.js (si el archivo existe) antes de volver a concatenar, pasar una matriz para definir explícitamente qué archivos desea concatenar y su orden, o cambiar la estructura de su proyecto.

Si hace esto último, puede poner todas sus fuentes bajo ./src y sus archivos ./dest bajo ./dest

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

Luego configura tu tarea concat

concat: {
  js: {
    src: ''src/js/*.js'',
    dest: ''dest/js/concat.js''
  },
  css: {
    src: ''src/css/*.css'',
    dest: ''dest/css/concat.css''
  }
},

Tu tarea mínima

min: {
  js: {
    src: ''dest/js/concat.js'',
    dest: ''dest/js/concat.min.js''
  }
},

La tarea mínima incorporada utiliza UglifyJS, por lo que necesita un reemplazo. Encontré a grunt-css bastante bueno. Después de instalarlo, cárgalo en tu archivo de ronco

grunt.loadNpmTasks(''grunt-css'');

Y luego configurarlo

cssmin: {
  css:{
    src: ''dest/css/concat.css'',
    dest: ''dest/css/concat.min.css''
  }
}

Tenga en cuenta que el uso es similar al mínimo incorporado.

Cambie su tarea default a

grunt.registerTask(''default'', ''concat min cssmin'');

Ahora, ejecutar grunt producirá los resultados que desee.

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js