uglify node minificar example compress javascript node.js minify

javascript - node - Concat y minify archivos JS en nodo



uglify-js (9)

Definitivamente, sugeriría el modo simple del compilador de cierres.

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

Prueba estos dos complementos para Grunt

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

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

Puede instalar todo lo que necesita así:

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

Luego crea tu archivo gruñido, así:

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'']); }

Finalmente, escriba grunt en el terminal y Grunt comenzará a ver sus archivos de JavaScript para ver los cambios y automáticamente los combinará y reutilizará (cada vez que guarde un cambio en sus archivos js en ../src/

Recomiendo usar UglifyJS que es una biblioteca de parser / mangler / compressor / beautifier de JavaScript para NodeJS.

Si está interesado en herramientas de automatización que no solo concatenan y minimizan archivos, existen las siguientes soluciones:

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

    1. concat - Concatenar 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: ejecuta las pruebas de la unidad QUnit en una instancia de PhantomJS sin cabeza.
    6. servidor: inicie un servidor web estático.

Además de estas tareas, hay muchos plugins disponibles.

  • Gulp es un conjunto de herramientas que lo ayudará a automatizar 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.

    1. Andamio rapidísimo: andamia fácilmente nuevos proyectos con plantillas personalizables (por ejemplo, HTML5 Boilerplate , Twitter Bootstrap ), AMD (a través de RequireJS ) y más.
    2. Compila automáticamente CoffeeScript & Compass: nuestro proceso de visualización LiveReload compila automáticamente los archivos fuente y actualiza tu navegador cada vez que se realiza un cambio para que no tengas que hacerlo.
    3. Falsifique automáticamente sus scripts: todos los scripts se ejecutan automáticamente contra JSHint para garantizar que sigan las mejores prácticas del idioma.
    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 impresionante de imágenes: OptiPNG todas tus imágenes usando OptiPNG y JPEGTran para que tus usuarios puedan perder menos tiempo descargando activos y más tiempo usando tu aplicación.
    6. Generación de manifiesto de AppCache: genero sus manifiestos de caché de aplicaciones para usted. Solo crea un proyecto y un boom. Lo obtendrás gratis.
    7. Proceso de compilación Killer: no solo obtiene minificación y concatenación; También optimizo todos tus archivos de imagen, HTML, compilo tus archivos de 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 paquetes nuevos a través de la línea de comandos (por ejemplo, yeoman search jquery ), instalarlos y mantenerlos actualizados sin necesidad de abrir su navegador.
    9. Compatibilidad con la sintaxis del módulo ES6: experimente con módulos de escritura 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 las pruebas de su unidad en WebKit sin PhantomJS través de PhantomJS . Cuando crea una nueva aplicación, también incluyo algunos andamios de prueba para su aplicación.

Será mejor que uses algo como gulp / webpack para conjuntar / organizar / agrupar tus activos.

Para unir el archivo js puede hacer lo que se hace en twitter arrancar makefile

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 solo una concatenación de archivos con una salida a un archivo js

Luego puedes instalar uglify-js para minimizar js:

npm -g install uglify-js

Y realice este comando con su ruta / archivo.js ofc:

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

Como mencioné en los comentarios desde uglifyjs 2, también puedes:

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

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

Si ya tiene uglify-js , su código utiliza algunas de las últimas características de ES6 (ECMAScript 2015) y simplemente le devolvió los errores de análisis en la primera ejecución, luego instaló uglify- e s :

npm install uglify-es -g

O:

npm install mishoo/UglifyJS2#harmony

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

Este es un paquete temporal que contiene la última versión de la rama ''armonía'' de uglifyjs ( UglifyJS2 ).

Todavía puede ejecutarlo normalmente con el comando uglifyjs . Un ejemplo de compresión y mangle:

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.

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

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 , también ha incorporado la concatenación.

Si quieres hacer esto en línea en tu 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 tu 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''); } });