Concat y minify archivos JS en el nodo

Question

¿Hay algún módulo en NodeJS para concatenar y minificar los archivos JavaScript?

Answer 1

Si está utilizando Connect, entonces he tenido buena suerte con Connect-Assetmanager

Answer 2

Quizás no sea exactamente lo que está buscando pero Enderjs podría funcionar.

Answer 3

UglifyJS es un módulo de nodo que se trata de minar javascript. No creo que también se una a los archivos, pero podría haber una opción que eché de menos.

Editar: Con UglifyJS 2, que ha construido en la concatenación también.

Si desea hacer esto en línea en su aplicación de nodo es realmente fácil. Esto le permite generar dinámicamente su script js miniaturizado/concatenado en el tiempo de ejecución sin utilizar el modo gruñido o de yeoman.

npm install uglify-js 

y en el módulo:

var fs = require('fs'); 
var uglify = require("uglify-js"); 

var uglified = uglify.minify(['file1.js', 'file2.js', 'file3.js']); 

fs.writeFile('concat.min.js', uglified.code, function (err){ 
    if(err) { 
    console.log(err); 
    } else { 
    console.log("Script generated and saved:", 'concat.min.js'); 
    }  
}); 

Answer 4

duda recomiendo el modo sencillo de la Closure Compiler.

Answer 5

Si le gusta el enfoque de canal de activos de Rails 3.1, debe probar mi biblioteca connect-assets.

Answer 6

Será mejor que use algo como gulp/webpack para concat/organizar/agrupar sus activos.

---

el fin de unirse js archivo que puede hacer como hizo en Twitter makefile de arranque

cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js 

Esto es sólo una concatenación de archivos con una salida a un archivo js

A continuación, puede instalar uglify-js para minificar js:

npm -g install uglify-js 

Y realice este comando con su pat h/file.js OFC:

uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.js 

Como se mencionó en los comentarios ya uglifyjs 2 también se puede hacer:

uglifyjs --compress --mangle -- input.js 

Answer 7

recomiendo el uso de UglifyJS que es un/trituradora/compresor biblioteca de JavaScript analizador/embellecedor de NodeJS.

Si usted está interesado en herramientas de automatización que hacen más que simplemente concatenan y archivos minify, existen las siguientes soluciones:

• GruntJS es una herramienta de construcción de línea de comandos basada en tareas para proyectos de JavaScript. La versión actual tiene las siguientes tareas incorporadas:

  1. concat. Concatene los archivos.
  2. init - Genera andamios de proyecto a partir de una plantilla predefinida.
  3. pelusa - Validar archivos con JSHint.
  4. min - Minificar archivos con UglifyJS.
  5. qunit - Ejecute QUnit prueba de unidad en una instancia sin cabeza PhantomJS.
  6. servidor - Inicie un servidor web estático.

Además de estas tareas hay una gran cantidad de plugins disponible.

• Gulp es un conjunto de herramientas que le ayudará a automatizar las tareas dolorosas o que requieren mucho tiempo en su flujo de trabajo de desarrollo. Para el desarrollo web (si eso es lo suyo) puede ayudarlo con el preprocesamiento de CSS, transpiling JS, minificación, recarga en vivo y mucho más. Las integraciones están integradas en todos los principales IDEs y las personas adoran tragar saliva en PHP, .NET, Node.js, Java y más. Con más de 1700 complementos (y mucho que puede hacer sin complementos), trapee, deje de jugar con los sistemas de compilación y vuelva a trabajar.

• Yeoman es un conjunto robusto y obstinado de herramientas, bibliotecas y un flujo de trabajo que puede ayudar a los desarrolladores a crear rápidamente aplicaciones web atractivas y atractivas. andamios

  1. velocidad del rayo - andamio fácilmente nuevos proyectos con plantillas personalizables (por ejemplo HTML5 Boilerplate, Twitter Bootstrap), AMD (a través de RequireJS) y más.
  2. Compilar automáticamente CoffeeScript & Brújula: nuestro proceso de reloj LiveReload compila automáticamente los archivos fuente y actualiza el navegador cada vez que se realiza un cambio para que no sea necesario.
  3. Imprime automáticamente las secuencias de comandos: todas las secuencias de comandos se ejecutan automáticamente en jshint para garantizar que sigan las prácticas recomendadas de idiomas.
  4. Servidor de vista previa incorporado: ya no tendrá que iniciar su propio servidor HTTP. Mi built-in uno puede dispararse con solo un comando.
  5. Optimización de imagen impresionante: optimizo todas las imágenes usando OptiPNG y JPEGTran para que los usuarios puedan perder menos tiempo descargando activos y más tiempo usando su aplicación.
  6. Generación de manifiesto de AppCache: genero los manifiestos de caché de aplicaciones para usted. Solo crea un proyecto y un boom. Lo obtendrás gratis.
  7. Killer build process - No solo obtiene minificación y concatenación; También optimizo todos tus archivos de imagen, HTML, compilo tus archivos CoffeeScript y Compass, te genero un manifiesto de caché de aplicación y, si estás usando AMD, pasaremos esos módulos a través de r.js para que no tengas que hacerlo.
  8. Gestión integrada de paquetes - ¿Necesita una dependencia? Solo está a una tecla de distancia. Le permito buscar fácilmente nuevos paquetes a través de la línea de comandos (por ejemplo, yeoman search jquery), instálelos y manténgalos actualizados sin necesidad de abrir su navegador.
  9. Compatibilidad con la sintaxis del módulo ES6: experimente con la escritura de módulos utilizando la sintaxis del módulo ECMAScript 6 más reciente. Esta es una característica experimental que se transfigura en ES5 para que pueda usar el código en todos los navegadores modernos.
  10. Pruebas unitarias PhantomJS: ejecute fácilmente sus pruebas de unidad en WebKit sin cabeza a través de PhantomJS. Cuando crea una nueva aplicación, también incluyo algunos andamios de prueba para su aplicación.

Answer 8

Pruebe estos dos plugins para ronco

https://www.npmjs.org/package/grunt-contrib-concat

https://www.npmjs.org/package/grunt-contrib-uglify

Puede instalar todo lo necesario, así:

npm install grunt 
npm install grunt-cli 
npm install grunt-contrib-concat 
npm install grunt-contrib-uglify 

A continuación, crear su archivo ronco , me gusta por lo que:

Gruntfile.js

module.exports = function(grunt){ 
    grunt.initConfig({ 
    concat: { 
     options: { 
     process: function(src, path){ 
      return '\n/* Source: ' + path + ' */\n' + src; 
     } 
     }, 
     src: [ 
     '../src/**/*.js' 
     ], 
     dest: '../bin/app-debug.js' 
    }, 
    uglify: { 
     src: '../bin/app-debug.js', 
     dest: '../bin/app.js' 
    }, 
    watch: { 
     options: { 
     atBegin: true, 
     event: ['all'] 
     }, 
     src: { 
     files: '../src/**/*.js', 
     tasks: ['concat'] 
     }, 
     dist: { 
     files: '../bin/app-debug.js', 
     tasks: ['uglify'] 
     }, 
    } 
    } 

    grunt.loadNpmTasks('grunt-contrib-concat'); 
    grunt.loadNpmTasks('grunt-contrib-uglify'); 

    grunt.registerTask('default', ['watch']); 
} 

Por último, el tipo grunt en el terminal y Grunt empezar a ver sus archivos JavaScript para cambios y automáticamente concat y afear ellos (cada vez que guarde un cambio en sus archivos js en ../src/

Answer 9

Si ya tiene uglify-js, el código utiliza algunas de las últimas ES6 features (ECMAScript 2015) y que sólo se dio vuelta errores de análisis en la primera ejecución, a continuación, instalar uglify- e s:

npm install uglify-es -g 

O:

npm install mishoo/UglifyJS2#harmony 

La explicación está en uglify-js-es6 package:

Este es un paquete temporal que contiene la última versión de la 'harmony' branch de uglifyjs (UglifyJS2).

Todavía puede ejecutarlo normalmente con el comando uglifyjs. Un ejemplo de comprimir y manipular:

uglifyjs -c -m -o js/es6stuff.js -- js/es6stuff/*.js 

Que producirá un único archivo con todos los archivos JS de una carpeta. El doble guión (--) solo evita que los archivos de entrada se usen como argumentos de opciones.