javascript - initconfig - grunt serve

Cómo grunt-uglify múltiples archivos de script manteniendo la estructura de carpetas (5)

No he encontrado una buena manera de grunt-uglify múltiples archivos de script repartidos en varias carpetas, manteniendo intacta la estructura de la carpeta, incluyendo los archivos uglified. La única razón por la que quiero hacer esto es poder aumentar el rendimiento de la parte "heredada" de la página web en la que estoy trabajando.

He encontrado una forma de evitar esto, que no quiero hacer, ya que tomará mucho tiempo, y es hacerlo como en esta respuesta (especifican cada src y dest pair por separado): cómo configurar el gruñido. js para reducir archivos por separado

Un ejemplo de lo que quiero lograr:

Por cierto, desea hacer lo mismo para los archivos CSS si es posible.

¿Alguien sabe si esto es posible?

El principio en la respuesta de Rafa Heringer en la publicación que vinculó a parece prometedor, con un pequeño giro:

uglify: { min: { files: grunt.file.expandMapping([''path/**/*.js'', ''path2/**/*.js''], ''destination/'', { rename: function(destBase, destPath) { return destBase+destPath.replace(''.js'', ''.min.js''); } }) } }

La única diferencia aquí es el doble asterisco entre la ruta base y el nombre de archivo comodín con su extensión. Esto pasará por todas las subcarpetas y, con suerte, generará cada hallazgo que encuentre en la carpeta que le corresponde.

La salida sería:

path/test.js => destination/path/test.min.js path/subpath1/abc.js => destination/path/subpath1/abc.min.js path/subpath2/yey.js => destination/path/subpath2/yey.min.js path2/foo.js => destination/path2/foo.min.js

Cuando se trata de hacer lo mismo con CSS (usando el complemento grunt-contrib-cssmin ), el enfoque mencionado anteriormente aún funcionaría, pero tendría que combinarlo con las configuraciones de complementos relevantes que deben estar en su lugar para generar el CSS minificado. como tu quieras

PD: no he intentado correrlo yo mismo!

En realidad se puede utilizar el siguiente enfoque:

uglify: { all: { files: [{ expand: true, cwd: ''js/'', src: [''*.js'', ''**/*.js''], dest: ''js-min/'', ext: ''.min.js'', }], }, }

La respuesta de Wallace es excelente, pero si los archivos que intenta minimizar no existen antes de que empiece el gruñido (es decir, si depende de otra tarea), no funcionará porque el mapa se genera antes de que se ejecute cualquier tarea.

Se me ocurrió una solución para minimizar los archivos generados individualmente, utilizando el paquete de nodos uglify-js en lugar de grunt-contrib-uglify.

Agregue uglify-js a su package.json
Agregue uno de los siguientes ejemplos a su archivo Grunfile (simplemente reemplace "SUS ARCHIVOS AQUÍ" por los globos apropiados si está utilizando el Ejemplo 1).
Si necesita cambiar el destino o la extensión del archivo minimizado, use el Ejemplo 2 en su lugar. Utiliza grunt.file.recurse con una devolución de llamada que le proporciona el directorio raíz, el subdirectorio y el nombre de archivo de cada archivo (es más fácil construir una ruta de destino personalizada). Reemplace "FOLDER" por el directorio que desea escanear, y cree su propio "CUSTOM PATH AQUÍ".

Ejemplo 1: con grunt.file.expand

grunt.registerTask(''uglifyFiles'', ''Uglifies files'', function () { var jsp = require("uglify-js").parser, pro = require("uglify-js").uglify, count = 0; grunt.file.expand([''YOUR FILES HERE'']).forEach(function (abspath) { // Exclude already minified files (with extension .min.js) if (!abspath.match(//.min/.js$/i)) { // Get Abstract Syntax Tree var ast = jsp.parse(grunt.file.read(abspath)); // If mangling // ast = pro.ast_mangle(ast); // If squeezing ast = pro.ast_squeeze(ast); // Write new file grunt.file.write(abspath.replace(//.js$/i, ''.min.js''), pro.gen_code(ast)); count += 1; } }); grunt.log.oklns("Successfully uglified " + count + " files"); });

Ejemplo 2: con grunt.file.recurse

grunt.registerTask(''uglifyFiles'', ''Uglifies files'', function () { var jsp = require("uglify-js").parser, pro = require("uglify-js").uglify, count = 0; grunt.file.recurse(''FOLDER'', function callback(abspath, rootdir, subdir, filename) { // Exclude already minified files (with extension .min.js) if (!abspath.match(//.min/.js$/i)) { // Get Abstract Syntax Tree var ast = jsp.parse(grunt.file.read(abspath)); // If mangling // ast = pro.ast_mangle(ast); // If squeezing ast = pro.ast_squeeze(ast); // Write new file, using abspath or rootdir, subdir and filename grunt.file.write(''CUSTOM PATH HERE'', pro.gen_code(ast)); count += 1; } }); grunt.log.oklns("Successfully uglified " + count + " files"); });

Similar a la respuesta de @DioNNiS, pero almacena los archivos minificados en la misma carpeta :

uglify: { all: { files: [{ expand: true, cwd: ''path/to/js/'', src: [''*.js'', ''!*.min.js''], dest: ''path/to/js/'', ext: ''.min.js'' }] } }

Esta solución no funciona para mí.

Este es un ejemplo de trabajo:

path: { build: { src: ''assets'', js: ''js'', css: ''css'' }, js: ''js'', css: ''css'' }, uglify: { scripts: { expand: true, cwd: ''<%= path.js %>/'', src: [ ''**/*.js'', ''*.js'', //skip minified scripts ''**/!*.min.js'', ''!*.min.js'' ], dest: ''<%= path.build.src %>/<%= path.build.js %>/'', rename: function (destBase, destPath) { return destBase + destPath.replace(''.js'', ''.min.js''); } } }, //same options for css minify cssmin: { styles: { expand: true, cwd: ''<%= path.css %>/'', src: [ ''**/*.css'', ''*.css'', //skip minified styles ''**/!*.min.css'', ''!*.min.css'' ], dest: ''<%= path.build.src %>/<%= path.build.css %>/'', rename: function (destBase, destPath) { return destBase + destPath.replace(''.css'', ''.min.css''); } } }, //and watch it for changes watch: { js: { files: [ ''<%= path.js %>/*.js'', ''<%= path.js %>/**/*.js'' ], tasks: [ ''uglify:scripts'' ], options: { livereload: true } }, css: { files: [ ''<%= path.css %>/*.css'', ''<%= path.css %>/**/*.css'' ], tasks: [ ''cssmin:styles'' ], options: { livereload: true } } }