grunt-contrib-less で sourceMap

grunt-contrib-less で sourceMap を生成してみる。

• ドキュメントルートは html
• lessファイルは /assets/less に保存
• cssファイルは /assets/css に保存
• マップファイルは /assets/css/map.json に保存

grunt.initConfig({

    less: {
        dev: {
            options: {
                sourceMap: true,
                sourceMapFilename: "html/assets/css/map.json",
                sourceMapURL: "/assets/css/map.json",
                sourceMapBasepath: "html",
                sourceMapRootpath: "/"
            },
            files: [
                {
                    expand: true,
                    cwd: "html/assets/less",
                    src: ["*.less"],
                    dest: "html/assets/css",
                    ext: ".css"
                }
            ]
        }
    },

    watch: {
       less: {
            files: ["./html/assets/less/**/*.less"],
            tasks: ["less:dev"]
        }
    },

    connect: {
        dev: {
            options: {
                base: "./html/",
                keepalive: false,
                port: 8080
            }
        }
    }

});

grunt.registerTask("dev", ["connect:dev", "watch:less"]);

localhost:8080 で確認すると、
開発者ツールで less ファイルを辿れるようになります。

sourceMapFilename を省略すると css ファイルに直接ソースマップが埋め込まれます。

オプションの名前が sourceMapFilename であって sourceMapFileName ではないのが、
個人的にはちょっと気持ち悪くもあり。