1

我正在使用这个 gruntfile 将我的 .less 文件更改为 .css 文件。

module.exports = function (grunt) {
    grunt.initConfig({

        less: {
            development: {
                files: [{
                    expand: true,
                    cwd: 'assets/less',
                    src: ['*.less'],
                    dest: 'wwwroot/content/css/',
                    ext: '.css'
                }]
            },
            production: {
                files: {
                    "wwwroot/content/css/script.css": ["assets/less/*.less"]
                },
                options: {
                    cleancss: true
                }
            }
        }
    });
    grunt.loadNpmTasks("grunt-contrib-less");
};

对于我的开发版本，如果我有十个 .less 文件，那么这将创建十个 .css 文件，然后我将能够在 Chrome 开发工具中查看这些文件并轻松调试。

我这样做的原因是为了能够在 Chrome 开发工具中调试和查看这十个 .css 文件。

我的推理正确吗？我听说过源映射，但我怎么能在我的开发构建中使用它们，如果我使用这些，那么我仍然能够看到源 .css 文件名，甚至更好地看到十个 .less 文件吗？

4

1 回答 1

1

TL；DR 对您的所有问题都是肯定的；）

要在 Gruntfile 中使用源映射，只需添加如下选项

less: {
    development: {
        options: {
            sourceMap: true
        },
        files: [{
            expand: true,
            cwd: 'assets/less',
            src: ['*.less'],
            dest: 'wwwroot/content/css/',
            ext: '.css'
        }]
    },

有关可用选项的更多信息，请参阅grunt-contrib-less页面。也许，根据您的工作环境，您应该添加sourceMapRootpath选项来指定文件的位置。最后，您的 .css 文件最后应该有一个很长的注释行。那是源地图。

source maps 有两个有点旧但很棒的介绍：使用 Chrome 开发者工具调试 LESS和JavaScript Source Maps 介绍

于 2014-12-20T08:49:37.837 回答