Почему мой встроенный LESS sourceMap сломался?
Я успешно работал с LESS уже несколько недель, используя зависимость grunt-contrib-less (версия 0.11.4) в моем package.json и инициализируя ее в файле gruntfile. Карта генерируется встроенной в конце финального минимизированного файла styles.css.
Я был отстранен от этого проекта на несколько недель, и когда я вернулся к нему, вдруг ни один из моих браузеров не смог отобразить номера строк МЕНЬШЕ, и каждый стиль отображается на строку 1 (или, точнее, строку 5 как сгенерированную). файл имеет несколько строк в начале).
CSS компилируется нормально, и исходная карта явно находится в конце файла, но я больше не могу проверять и отлаживать файлы LESS в инструментах разработчика любого браузера.
Сначала у меня была какая-то посторонняя помощь в настройке gruntfile, и, к сожалению, эта помощь больше не доступна. Я новичок в Grunt и JSON и официально над моей головой. Как, черт возьми, я сломал это? Я на самом деле не связывался с включенным кодом, но я не уверен, что еще может вызывать проблемы с sourceMap.
Вот мой ворчливый код файла:
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
paths: ["less"],
sourceMap: true,
compress: true
},
files: {
"dist/css/styles.css": "less/styles.less"
}
}
},
watch: {
styles: {
files: ["less/*.less"],
tasks: ["less"]
},
javascripts: {
files: ["js/**.js"],
tasks: ['build']
}
},
shell: {
addstory: {
command: function(arg) {
return 'node node_scripts/addstory.js ' + arg;
}
}
},
concat: {
dist: {
src: ["js/lib/ie10-viewport-bug-workaround.js","js/lib/lazyload.min.js", "js/lib/jquery.dotdotdot.min.js", "js/lib/pointerevents.js", "js/lib/megafolio/js/jquery.themepunch.plugins.min.js", "js/lib/megafolio/js/jquery.themepunch.megafoliopro.js", "js/app.js"],
dest: 'dist/js/main.js'
}
},
uglify: {
options: {
mangle: false
},
dist: {
files: {
'dist/js/main.min.js': ['dist/js/main.js']
}
}
}
});
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('addstory', function(arg) {
if (arg === undefined) {
throw new Error('NO HTML FILE SPECIFIED!')
} else {
grunt.task.run('shell:addstory:'+arg);
}
});
grunt.registerTask('build', ['concat', 'uglify']);
};
И package.json:
{
"name": "ilium-web-bootstrap-team-ec",
"version": "0.0.0",
"description": "the ilium website redesign",
"main": "dist/index.html",
"dependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.5.0",
"grunt-contrib-compress": "^0.11.0",
"grunt-contrib-concat": "^0.4.0",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-csslint": "^0.2.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-less": "^0.11.4",
"grunt-contrib-uglify": "^0.5.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-shell": "^1.1.1",
"jquery": "^2.1.1",
"jsdom": "^0.11.1",
"prompt": "^0.2.14"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": " "
},
"author": "matt kristiansen and ryan juve",
"license": "ISC"
}
Я надеюсь, что допустил какую-то распространенную ошибку, которая привела к невозможности увидеть LESS в инструментах разработки. Любое руководство?
1 ответ
Хорошо, урок здесь заключается в том, чтобы на самом деле замечать, когда ваша LESS-компиляция прерывается из-за синтаксических ошибок. Это как-то ускользнуло от моего внимания.
Оказывается, отсутствующая закрывающая фигурная скобка сломает sourceMaps, что имеет смысл.
Спасибо всем.