less
grunt

grunt-contrib-less でダイナミックなファイル生成

More than 3 years have passed since last update.

less に限った事ではないですが Configuring tasks - Grunt: The JavaScript Task Runner の通り、

マッチしたファイルの名前にあわせてCSSファイルを書き出す方法。

grunt.initConfig({

less: {
dev: {
files: [
{
expand: true, // 展開を有効に
cwd: "less/", // ソースファイルのディレクトリ(プレフィクス)
src: ["*.less"], // ソースファイルのルール
dest: "css/", // 出力先ディレクトリ
ext: ".css" // 出力ファイルの拡張子
}
]
}
}

});

これで less/*.less にマッチするファイルは Less でコンパイルされて、

css/ に各々のファイル名で保存されます。

サブディレクトリまで書き出したい場合は

src: ["**/*.less"],

などとすると行けます。

「アンダースコアから始まるファイルはモジュール」などといったルールがある場合は、

それらのファイルだけ除外してもよいですね。

src: ["**/*.less", "!**/_*.less"],

が、個人的なルールとしては、サブディレクトリのファイルはモジュールとして扱い、

ソースディレクトリのルートにある物だけを書き出す形にした方が

捗るのではないかと思っています。(一番はじめの例のように)