LoginSignup
3
3

More than 5 years have passed since last update.

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

Posted at

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"],

が、個人的なルールとしては、サブディレクトリのファイルはモジュールとして扱い、
ソースディレクトリのルートにある物だけを書き出す形にした方が
捗るのではないかと思っています。(一番はじめの例のように)

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3