4

現在、LESS ファイルのコンパイルを Grunt タスクとして処理するために grunt-contrib-less を使用しています。less ファイルは、次のような構造で保存されます。

assets/
    styles/
        base.less
        client/
            client.less
            device/
                tablet.less
                phone.less

Grunt 構成には次のものがあります。

less: {
    options: {
        paths: 'assets/',
        yuicompress: false,
        ieCompat: true,
        require: [
            'assets/styles/base.less'
        ]
    },
    src: {
        expand: true,
        cwd: 'assets/',
        src: [
            'styles/**/*.less'
        ],
        ext: '.css',
        dest: 'assets/'
    }
},

現在、これにより、生成されたすべての css ファイルが元の less ファイルと同じディレクトリにインストールされます。私たちがやりたいのは、それらを /assets/css/ ディレクトリに吐き出すことですが、相対的な構造は同じです。例えば：

assets/
    css/
        base.css
        client/
            client.css
            device/
                tablet.css
                phone.css

これを達成できる grunt-contrib-less 構成はありますか?

4

2 に答える 2

3

次の方法で目的の効果を達成できましたGruntfile.js

var path = require('path');

module.exports = function(grunt) {

  grunt.initConfig({
    less: {
      options: {
        paths: 'assets/',
        yuicompress: false,
        ieCompat: true,
        require: [
          'assets/styles/base.less'
        ]
      },
      src: {
        expand: true,
        cwd: 'assets/',
        src: [
            'styles/**/*.less'
        ],
        ext: '.css',
        dest: 'assets',
        rename: function(dest, src) {
          return path.join(dest, src.replace(/^styles/, 'css'));
        }
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-less');

}

説明

ドキュメントにはありませんが、grunt-contrib-lessファイル オブジェクトで使用できる機能は他にもたくさんあります。この質問に答えようとするまで、これほど多くの人がいることに気づきませんでした。それらのドキュメントへのリンクはリソースの下にあります。

資力

タスクの構成 - ファイル オブジェクトを動的に構築する

于 2013-07-25T16:04:52.587 に答える