Как настроить sourceMaps для LESS с помощью Grunt?

Я использую grunt 0.4.2 и grunt-contrib-less 0.9.0. Я хочу, чтобы мой LESS был скомпилирован в CSS с поддержкой исходных карт.

Мои файлы LESS находятся в public/less, а главный из них называется main.less.

Компиляция public/less/main.less в public/css/main.css работает, но исходные карты не работают.

Что не так с моей конфигурацией Grunt ниже?

{
    less: {
        dev: {
            options: {
                compress: true,
                yuicompress: true,
                optimization: 2,
                sourceMap: true,
                sourceMapFilename: "public/css/main.css.source-map.json", //Write the source map to a separate file with the given filename.
                sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map.
                sourceMapRootpath: "/"//Adds this path onto the Less file paths in the source map.
            },
            files: {
                "public/css/main.css": "public/less/main.less"
            }
        }
    },
    watch: {
        styles: {
            files: ["public/less/*"],
            tasks: ['less'],
            options: {
                livereload: true,
                nospaces: true
            }
        }
    }
}

Я не хочу, чтобы мой CSS создавался в моей папке /public/less; Я хочу поместить его в /public/css. В противном случае я мог бы использовать эту другую конфигурацию, которая работает:

{
    less: {
        dev: {
            options: {
                compress: true,
                yuicompress: true,
                optimization: 2,
                sourceMap: true,
                sourceMapFilename: "public/less/main.css.map", //I DO NOT WANT THE CSS MAP HERE
                sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map.
            },
            files: {
                "public/less/main.css": "public/less/main.less"//I DO NOT WANT THE CSS HERE
            }
        }
    },
    watch: {
        styles: {
            files: ["public/less/*"],
            tasks: ['less'],
            options: {
                livereload: true,
                nospaces: true
            }
        }
    }
}

css less source-maps gruntjs
person Ryan    schedule 13.02.2014    source источник

Ответы (2)


arrow_upward
17
arrow_downward

Я обнаружил, что документация сайта LESS более понятна в отношении параметров, используемых grunt-contrib-less.

LESS: использование командной строки http://lesscss.org/usage/#command-line-usage-installing-lessc

NPM: grunt-contrib-less https://www.npmjs.org/package/grunt-contrib-less

Структура файла:

laravel/gruntfile.js
laravel/public/less/main.less
laravel/public/css/main.css
laravel/public/css/main.css.map

Примечание к файлу main.css.map:

  • При желании можно переименовать в: main.css.source-map.json
  • Я предполагаю, что у вас есть какая-то настройка правила сервера, которая неправильно серверирует файлы *.map из папки «css».

Примечания к сжатию:

  • cleancss: true = удалит комментарий sourceMappingURL из main.css
  • yuicompress: true = НЕ будет удалять комментарий sourceMappingURL из main.css

Gruntfile.js

less: {
    dev: {
        options: {
            compress: true,
            yuicompress: true,
            optimization: 2,
            sourceMap: true,
            sourceMapFilename: 'public/css/main.css.map', // where file is generated and located
            sourceMapURL: '/css/main.css.map', // the complete url and filename put in the compiled css file
            sourceMapBasepath: 'public', // Sets sourcemap base path, defaults to current working directory.
            sourceMapRootpath: '/', // adds this path onto the sourcemap filename and less file paths
        },
        files: {
            'public/css/main.css': 'public/less/main.less',
        }
    }
},

watch: {
    styles: {
        files: ["public/less/*"],
        tasks: ['less'],
        options: {
            livereload: true,
            nospaces: true
        }
    }
},

laravel/public/css/main.css

.class{ compiled css here } /*# sourceMappingURL=/css/main.css.map */

laravel/public/css/main.css.map

{"version":3,"sources":["/less/main.less"], etc...
person jpblancoder    schedule 14.02.2014
comment
Кажется, это работает для меня! Большое спасибо! Я пропустил строку sourceMapURL, так как она кажется ненужной. - person Ryan; 15.02.2014

arrow_upward
4
arrow_downward

Если у вас по-прежнему возникают проблемы с этим, попробуйте указать полный путь для SourceMapURL, например:

http://www.yourdomain.com/assets/css/styles.css.map

Очевидно, что это немного неудобно, так как это не относительно, поэтому, когда вы перемещаете свой сайт, его нужно будет изменить. У меня была та же проблема, что и у вас, и это помогло мне.

Еще один момент, который я обнаружил, заключается в том, что вы не можете загружать SourceMaps из файловой системы. Это должно быть с веб-сервера. Чтобы обойти проблему с файловой системой, я считаю, что вы можете встроить SourceMap.

Эта ветка на GitHub содержит много информации.

https://github.com/less/less.js/issues/1050#issuecomment-25621390

person Adam Hughes    schedule 14.02.2014