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.