Edited at

grunt-contrib-less で sourceMap

More than 3 years have passed since last update.

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 ではないのが、

個人的にはちょっと気持ち悪くもあり。