如何在使用grunt-contrib-less时设置CSS源映射输出目标

时间:2014-12-17 10:04:47

标签: gruntjs less grunt-contrib-less

我正在使用grunt-contrib-less来编译更少的文件。

我在项目文件夹的根目录下安装了grunt。

css文件位于项目文件夹根目录的qa1/avinash/html5/phase1/css/路径。

因此,这是我为无咕噜任务的cwd(当前工作目录),srcdest参数指定的路径。编译css和源地图没有问题。

我面临的唯一问题是源映射是在gruntfile的同一文件夹中生成的。但我生成的css位于我指定的dest路径。由于css和源映射位于不同的位置,我必须手动编辑源映射中较少的路径引用并将其带到生成的css目录中。或使用sourceMapURL指定源地图位置../../../../../style.css.map(向后)。两种方式都不方便。

所以任何人都可以帮助我如何指定源地图输出目标路径,就像我们为生成的css指定目标路径一样

sourceMapDest: 'qa1/avinash/html5/phase1/css/'

-

目前使用 Gruntfile.js:

module.exports = function(grunt) {
    grunt.initConfig({
        less: {
            options: {
                sourceMap:true,
                sourceMapFilename: "style.css.map",
                sourceMapURL: '../../../../../style.css.map'
            },
            src: {
                // no need for files, the config below should work
                expand: true,
                cwd:    "qa1/avinash/html5/phase1/css/",
                src:    "style.less",
                dest:   "qa1/avinash/html5/phase1/css/",
                ext:    ".css"
            }
        },
        watch: {
            js: {
                files: ['qa1/avinash/html5/phase1/css/'],
                tasks: ['default'],
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['less']);
};

1 个答案:

答案 0 :(得分:1)

sourceMapFilename选项也可以包含路径部分。 即只需将其更改为:

sourceMapFilename: "qa1/avinash/html5/phase1/css/style.css.map"