javascript - puede - grunt reemplaza todos los archivos menos en archivos css

ofuscar javascript online

Question

Yo uso ronco para convertir todos mis menos archivos en archivos css, usando esto:

less: {
development: {
files: {
"css/*.css": "less/*.less"
}
}
}

Esto funcionó en la versión 0.3.0, pero ahora que me actualicé a v0.4.0 ya no funciona.

El siguiente código (que no usa * en el destino) funciona en ambas versiones, por lo que el problema es con la estrella en el archivo de destino.

less: {
development: {
files: {
"css/test.css": "less/*.less"
}
}
}

Alguna idea ?

Answer 1

Esto no es un error. Grunt ya no admite globbing en dest utilizando esa configuración. Sin embargo, puede usar el formato de "matriz de archivos", como este:

files: [
{
expand: true,
cwd: ''src'',
src: [''*.less''],
dest: ''assets/css/'',
ext: ''.css''
}
]

Además, si utiliza una biblioteca como Bootstrap y desea crear cada archivo LESS (componente) en un archivo CSS individual y separado, no es muy fácil de lograr "de fábrica". La razón es que cada archivo LESS debería tener sus propias declaraciones @import para variables.less y mixins.less (y un par de otras como forms.less y navbar.less , ya que están referenciadas en otros archivos).

Para que esto sea realmente fácil, prueba el plugin Grunt, assemble-less (descargo de responsabilidad: soy uno de los mantenedores del proyecto, y también estoy en el equipo central para less.js). assemble-less es una bifurcación de grunt-contrib-less de Tyler Kellen, pero agrega algunas características experimentales que lograrán lo que usted necesita (si desea estabilidad, por favor, no use grunt-contrib-less). Por ejemplo:

// Project configuration.
grunt.initConfig({
less: {
// Compile all targeted LESS files individually
components: {
options: {
imports: {
// Use the new "reference" directive, e.g.
// @import (reference) "variables.less";
reference: [
"bootstrap/mixins.less",
"bootstrap/variables.less"
]
}
},
files: [
{
expand: true,
cwd: ''bootstrap/less'',
// Compile each LESS component excluding "bootstrap.less",
// "mixins.less" and "variables.less"
src: [''*.less'', ''!{boot,var,mix}*.less''],
dest: ''assets/css/'',
ext: ''.css''
}
]
}
}
...
}

La característica de imports esencialmente antepone las declaraciones @import especificadas en los archivos fuente. La opción de reference permite "referenciar" otros archivos menos al tiempo que solo genera estilos a los que se hace referencia específicamente mediante mixins o :extend . Es posible que deba hacer referencia a algunos archivos más que los que se muestran aquí, ya que Bootstrap hace referencias cruzadas de estilos de otros componentes, como forms.less, buttons.less, etc. (Consulte el Gruntfile en assemble-less para obtener ejemplos).

Entonces, después de ejecutar la tarea sin assemble-less con la configuración en el ejemplo anterior, la carpeta assets/css tendría:

• alerts.css
• badges.css
• breadcrumbs.css
• button-groups.css
• buttons.css
• carousel.css
• close.css
• code.css
• component-animations.css
• dropdowns.css
• forms.css
• glyphicons.css
• grid.css
• input-groups.css
• jumbotron.css
• labels.css
• list-group.css
• media.css
• modals.css
• navbar.css
• navs.css
• normalize.css
• pager.css
• pagination.css
• panels.css
• popovers.css
• print.css
• progress-bars.css
• responsive-utilities.css
• scaffolding.css
• tables.css
• theme.css
• thumbnails.css
• tooltip.css
• type.css
• utilities.css
• wells.css

Hay otras características que deberían ayudarlo con esto, pero la función de imports es muy poderosa ya que le permite agregar directivas directamente al Gruntfile.