0

几周以来一直在愉快地使用 LESS，在我的 package.json 中使用 grunt-contrib-less（版本 0.11.4）依赖项并在 gruntfile 中对其进行初始化。地图在最终缩小的 styles.css 的末尾内联生成。

我被这个项目拉了几个星期，当我回到它时，突然我的浏览器都无法显示 LESS 行号，并且每种样式都映射到第 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。有什么指导吗？

4

1 回答 1

1

好的，这里的教训是当你的 LESS 编译由于语法错误而中止时要真正注意。这不知怎的逃过了我的注意。

结果发现缺少右花括号会破坏 sourceMaps，这是有道理的。

谢谢大家。

于 2014-11-13T21:25:31.023 回答