web-dev-qa-db-ja.com

不要なファイルをすべてcssファイルに置き換える

これを使用して、gruntを使用してすべてのlessファイルをcssファイルに変換します。

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

これはバージョン0.3.0で機能しましたが、v0.4.0にアップグレードしたため、機能しなくなりました。

次のコード（宛先で*を使用しない）は両方のバージョンで機能するため、宛先ファイルのスターに問題があります。

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

何か案が ？

javascriptlessgruntjsglob
26
edi9999

これはバグではありません。 Gruntは、その構成を使用したdestでのグロビングをサポートしなくなりました。ただし、次のように「ファイル配列」形式を使用できます。

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

また、Bootstrap=のようなライブラリを使用していて、各LESSファイル（コンポーネント）を個別の個別のCSSファイルにビルドする場合は、「そのまま」で達成するのは簡単ではありません。その理由は、各LESSファイルが@importとvariables.less（およびmixins.lessとforms.lessのような他の2、3の独自のnavbar.lessステートメントを持つ必要があるためです。他のファイルで参照されているため）。

これを本当に簡単にするには、Gruntプラグイン assemble-less を試してください（免責事項：私はプロジェクトのメンテナーの1人であり、私もコアチームにいますless.js）。 Assemble-lessは、Tyler Kellenによるgrunt-contrib-lessのフォークですが、必要な機能を実現するいくつかの実験的機能が追加されています（安定性が必要な場合は、grunt-contrib-lessを使用してください）。例えば：

// 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'
        }
      ]
    }
  }
  ...
}

imports機能は、指定された@importステートメントを基本的にソースファイルの前に付加します。 referenceオプションを使用すると、ミックスインまたは:extendを介して具体的に参照されるスタイルのみを出力しながら、他の少ないファイルを「参照」できます。 Bootstrapは、forms.less、buttons.lessなどの他のコンポーネントからのスタイルを相互参照するため、ここに示されているよりもいくつかのファイルを参照する必要がある場合があります（ 例として、アセンブルなしのGruntfile 。）

したがって、上記の例の構成でassemble-lessタスクを実行すると、assets/cssフォルダーには次のようになります。

  • 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

これに役立つ他の機能がありますが、imports機能はディレクティブを直接追加できるため、非常に強力ですGruntfile。

45
jonschlinkert