Question

我很高兴与LESS合作数周，在我的package.json中使用grunt-contrib-less（版本0.11.4）依赖项并在gruntfile中初始化它。在最终缩小的styles.css。

的末尾内联生成地图

我离开这个项目已经有几个星期了，当我回到它时，突然间我的浏览器都没有能够显示LESS行号，并且每个样式都映射到第1行（或更准确地说，第5行）因为生成的文件在开头有几行）。

CSS编译很好，源文件显然位于文件的末尾，但我无法再在任何浏览器的开发工具中检查和调试LESS文件。

我最初有一些外部帮助设置gruntfile，不幸的是，这个帮助不再可用。我是Grunt和JSON的新手，正式在我脑海里。我怎么打破了这个？我实际上并没有搞乱包含的代码，但我不确定还有什么可能导致sourceMap问题。

这是我的grunt文件代码：

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。有什么指导吗？

Answer 1

好的，这里的教训是当你的LESS编译由于语法错误而中止时实际注意到。这在某种程度上引起了我的注意。

原来缺少关闭花括号会破坏sourceMaps，这是有道理的。

谢谢大家。

为什么我的内联LESS sourceMap会中断？

1 个答案: