- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控更新时间：2019-01-07 15:44:55正确使用CSS预处理器(如Sass)，以及JS预处理器和转换器可以大大提升你的开发效率。本文讲解如何设置设置CSS和JS预处理器。
Source Maps(源映射)将原始源文件映射到渲染输出文件。Source Maps(源映射)。使用支持的预处理器自动生成Source Maps(源映射)。预处理器接受任意源文件，并将其转换为浏览器可以理解的东西。
输出CSS，它们添加很多浏览器原生不支持（或尚未支持）的功能，比如CSS变量，嵌套和多层嵌套。这个类别中值得注意的例子有Sass，Less和Stylus。
输出JavaScript，他们是从JavaScript或者从另一种完全不同的语言转换（编译）过来的，或将超集或新语言标准转换到当前的标准。 此类别中的值得注意的例子有CoffeeScript和ES6（通过Babel转换）。
只要你在浏览器中并使用DevTools编辑你的CSS或调试你的JavaScript， 一个问题变得很明显：你看到的不是真正的源代码，并不真正帮助你解决问题。
为了解决这个问题，大多数现代预处理器都支持称为Source Maps(源映射)的功能。
Source Maps(源映射)source map(源映射)是基于JSON的映射格式，它在编译压缩的文件和其源文件之间创建关联。当你为生产环境构建时，它会为你压缩并且合并JavaScript文件，并且为你生成一个包含源文件信息的源映射。
对于每个生成的CSS文件，除了编译的CSS之外，CSS预处理器还生成源映射文件（.map）。源映射文件是一个JSON文件，用于定义每个生成的CSS声明之间的映射和源文件的相应行。每个CSS文件包含一个注释，指定其源映射文件的URL，嵌在文件的最后一行的特殊注释中：
/*# sourceMappingURL=<url> */
举个例子，给定一个名为styles.scss的Sass源文件：
%$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
font-size: $textSize;
color: $fontColor;
background: $bgColor;
}Sass生成一个CSS文件，styles.css，带有sourceMappingURL注释：
h2 { font-size: 26px; color: red; background-color: whitesmoke;
}/*# sourceMappingURL=styles.css.map */下面是源映射文件的示例：
{ "version": "3", "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK", "sources": ["sass/styles.scss"], "file": "styles.css"}一些Web服务器，例如 Google App Engine，需要对每个提供的文件类型进行显式配置。在这种情况下，您的 Source Maps 应该提供一个application/json的MIME类型，但Chrome实际上接受任何内容类型，例如application/octet-stream。
如果您不想在输出的文件中添加额外的注释，在压缩的JavaScript文件上使用 HTTP header 字段告诉DevTools在哪里可以找到源映射。这需要配置或自定义您的Web服务器，这超出本文档的范围。
X-SourceMap: /path/to/file.js.map
类似于注释，这会告诉DevTools和其他工具在哪里查找与JavaScript文件相关联的 Source Maps(源映射)。这个 header 字段还绕过了在不支持单行注释的语言中引用Source Maps(源映射)的问题。
几乎所有能编译到JavaScript语言的处理器，都有一个选项来生成 Source Maps(源映射) - 包括Coffeescript，TypeScript，JSX等等。您还可以在 Node 服务器端使用 Source Maps(源映射)，我们的CSS中通过Sass, Less等预处理，使用 browserify 给你带来节点式（node-style）的 require 能力，并通过诸如uglify-js的压缩工具，这也增加了生成多级 Source Maps(源映射)的能力。
| 编译器 | 命令 | 说明 |
|---|---|---|
| CoffeeScript | $ coffee -c square.coffee -m | `-m` (`--map`)标志是编译器输出Source Maps(源映射)所必须的，它还将为你输出的文件添加sourceMapURL注释。 |
| TypeScript | $ tsc -sourcemap square.ts | -sourcemap标志将生成映射并添加编译指示注释。 |
| Traceur | $ traceur --source-maps=[file|inline] | 使用--source-maps=file，以.js结尾的每个输出文件都将有一个以.map结尾的Source Maps(源映射)文件;使用 source-maps='inline'，以.js结尾的每个输出文件都将以包含在data:URL编码中的sourcemap的注释结束。 |
| Babel | $ babel script.js --out-file script-compiled.js --source-maps | 使用--source-maps或-s生成Source Maps(源映射)。对于内联的Source Maps(源映射)使用--source-maps inline。 |
| UglifyJS | $ uglifyjs file.js -o file.min.js --source-map file.min.js.map | 这是生成file.js Source Maps(源映射)所需的基本命令。这也将添加添加编译指示注释到输出文件中。 |
| 编译器 | 命令 | 说明 |
|---|---|---|
| Sass | $ scss --sourcemap styles.scss styles.css | 从Sass 3.3开始支持 Source Maps(源映射)。 |
| Less | $ lessc styles.less > styles.css --source-map styles.css.map | 在1.5.0中实现。 有关详细信息和使用模式，请参阅issue #1050。 |
| Stylus | $ stylus --sourcemaps styles.style styles.css | 这将把 sourcemap 作为一个base64编码字符串直接嵌入到输出文件中。 |
| Compass | $ sass --compass --sourcemap --watch scss:css | 或者，您可以添加sourcemap: true到您的config.rb文件。 |
| Autoprefixer | 点击链接查看如何使用它并解析输入sourcemap。 |
现在您已经可以正确地设置Source Maps(源映射)了，当你知道 Chrome DevTools 已内置支持基于CSS和JS的Source Maps(源映射)的时候，你可能会很高兴。
点击查看编辑Sass，Less或Stylus，以了解如何直接在DevTools中编辑和刷新链接到源映射的样式。
详细了解如何在Sources(源文件)面板中调试压缩，编译或转译后的JavaScript代码。
将预处理的代码映射到源代码。
在将预处理的代码映射到源代码文章中，详细了解如何在地图预处理代码的源代码面板中调试manified，compiled或transpiled JavaScript到源代码。
推荐手册