1

我正在使用grunt-contrib-less将我的文件编译.less成单个 CSS 样式表。一切正常，除了源地图，我在任何情况下都无法工作！

这是我的 Gruntfile：

'use strict';

module.exports = function(grunt) {

// Force use of Unix newlines
grunt.util.linefeed = '\n';

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    project: {
        // Add entries to this array to create variables for use by Grunt
        app:        ['app'],
        server:     'http://mysite.app',

        // Components
        bower:      ['<%= project.app %>/bower_components'],
        bootstrap:  ['<%= project.bower %>/bootstrap'],

        // Custom Assets
        assets:     ['<%= project.app %>/assets'],
        css:        ['<%= project.assets %>/css'],
        less:       ['<%= project.assets %>/less'],
        js:         ['<%= project.assets %>/js']
    },
    less: {
        production: {
            options: {
                ieCompat:           true,
                sourceMap:          true,
                sourceMapFilename:  '<%= project.css %>/style.css.map',
                sourceMapURL:       '<%= project.server %>/assets/css/style.css.map',
                sourceMapBasepath:  'app',
                sourceMapRootpath:  '<%= project.server %>'
            },
            files: {
                '<%= project.css %>/style.css': '<%= project.less %>/style.less'
            }
        }
    },
    autoprefixer: {
        dist: {
            files: {
                '<%= project.assets %>/css/style.css': '<%= project.assets %>/css/style.css'
            }
        }
    },
    concat: {
        options: {
            separator: ';\n',
            sourceMap: true
        },
        plugins_head: {
            // Add further Javascript plugins to this array and they will be
            // concatenated in to the plugins-built-head.js file
            src: [
                '<%= project.bower %>/modernizr/modernizr.js'
            ],
            dest: '<%= project.js %>/built/plugins-built-head.js'
        },
        plugins: {
            // Add further Javascript plugins to this array and they will be
            // concatenated in to the plugins-built.js file
            src: [
                '<%= project.bootstrap %>/js/dropdown.js'
            ],
            dest: '<%= project.js %>/built/plugins-built.js'
        },
        custom: {
            // Add further custom-written javascript files to this array and
            // they will be concatenated in to the scripts-built.js file
            src: [
                '<%= project.js %>/scripts.js'
            ],
            dest: '<%= project.js %>/built/scripts-built.js'
        }
    },
    watch: {
        css: {
            files: [
                '<%= project.bootstrap %>/less/*.less',
                '<%= project.less %>/*.less'
            ],
            tasks: [
                'less',
                'autoprefixer'
            ],
            options: {
                livereload: true
            }
        },
        js: {
            files: [
                '<%= project.js %>/scripts.js'
            ],
            tasks: ['concat']
        },
        html: {
            files: [
                '<%= project.app %>/*.html'
            ],
            options: {
                livereload: true
            }
        }
    }
});

grunt.loadNpmTasks('grunt-run-grunt');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-autoprefixer');

grunt.registerTask('default', [
    'watch'
]);

};

发生的事情是 Grunt 正在编写一个正确且正确的style.css.map文件，但它没有将以下行写入已编译style.css文件的末尾：

/*# sourceMappingURL=http://mysite.app/assets/css/style.css.map */

这是缺少的一行。其他一切都得到正确编译和编写。如果我手动将该行添加到已编译 CSS 的末尾，Chrome 会正确地拾取源映射，但它没有被写入。

此外，尝试类似的选项sourceMapFileInline似乎没有任何区别 - 该文件永远不会内联写入。

有任何想法吗？

4

1 回答 1

1

希望您现在已经找到了解决方案。这适用于其他有相同问题的人：

  • 确保源映射将放置在与 css 相同的文件夹中。
  • 仅设置sourceMapUrl为地图文件的名称。
  • 这会将以下行添加到您的 .css 文件中：/*# sourceMappingURL=default.css.map */

这是我的 grunt 文件中的源映射设置：

sourceMap: true,
sourceMapFilename: "src/assets/css/default.css.map",
sourceMapURL: "default.css.map"
于 2015-11-13T10:33:18.363 回答