gulp common plug-ins use the gulp-sourcemaps

More gulp common plug-ins use please visit: gulp common plug-ins summary

gulp-sourcemaps This is a plug used to generate a map file, SourceMap file records a file storing the information source code and compiled code corresponding to the location map. We are in no way like when debugging source code debugging as easily, which requires SourceMap help us convert source in the console, to perform debug.

gulp-sourcemaps in front of the work is mainly used to debug solve three problems arise:

Code compressed confusion

Use sass, typeScriptand other languages compiled into css or after JS
Use webpackthe packaging tools such as multi-file merge

gulp-sourcemaps currently supports three categories:

Generic
JS
CSS

Greater use of the document, please click visit gulp-sourcemaps tool official website .

installation

A key installation much explanation

npm install --save-dev gulp-sourcemaps

principle

JSON is actually a key pair, using a specific encoding rules VLQ storage location information.

　　{
　　　　version : 3,        //Source map的版本
　　　　file: "out.js",      //转换后的文件名
　　　　sourceRoot : "",   //转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空
　　　　sources: ["foo.js", "bar.js"],   //转换前的文件。该项是一个数组，表示可能存在多个文件合并
　　　　names: ["src", "maps", "are", "fun"],   //转换前的所有变量名和属性名
　　　　mappings: "AAgBC,SAAQ,CAAEA"  //记录位置信息的字符串
　　}

use

Prepared by United sourcemaps source mapping to the source file.

E.g:

var gulp = require('gulp');
var plugin1 = require('gulp-plugin1');
var plugin2 = require('gulp-plugin2');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('javascript', function() {
  gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())  //标记 map 记录始发点
      .pipe(plugin1())    //其他任务插件运行
      .pipe(plugin2())      //其他任务插件运行
    .pipe(sourcemaps.write())  //输出 .map 文件
    .pipe(gulp.dest('dist'));  
});

The above code logic is .map will become a form of JSON data stream to write in the file, when you open the original file can see such a comment:

//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJhLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIlxuXG5sZXQgeGlhb21pbmcgPSAneG0nXG5sZXQgemhhbmdzYW4gPSAnenMnXG5sZXQgbGlzaSA9ICdscydcbmxldCBmaXZlID0gJydcbmNvbnN0IGhhaGEgPSAxMFxuXG5mdW5jdGlvbiBhZGQoKXtcbiAgXG4gIGNvbnNvbGUubG9nKCdsb2cgYWRkIGZpdmUgLS0tLScsZml2ZSlcblxuICByZXR1cm4gZml2ZSA9IHpoYW5nc2FuICsgbGlzaVxufVxuXG5hZGQoKVxuY29uc29sZS5sb2coJ2xvZyBmaXZlIC0tLS0nLGZpdmUpXG5cbmZpdmUgKz0gaGFoYVxuXG5jb25zb2xlLmxvZygnbG9nIGZpdmUrKyAtLS0tJyxmaXZlKVxuXG5jb25zb2xlLmxvZygnYS5qcycpXG5cbiJdLCJmaWxlIjoiYS5qcyJ9

This indicates that the corresponding .map file address, if the address is a data stream flow will turn into a string, so that we can turn on debugging in chrome in it

Detailed gulp-sourcemaps API
as the appeal of this approach is to use a simple .map can not meet development needs. The above is a compressed demand, .map should be separated, not with the source files, or compressed bigger than before compressed.

sourcemaps.init()
sourcemaps.write()
sourcemaps.mapSources()
sourcemaps.identityMap()

sourcemaps.init()

As literally sourcemaps initialization API, wherein the configuration items:

sourcemaps.init({
      loadMaps: true,  //是否加载以前的 .map 
      largeFile: true,   //是否以流的方式处理大文件
}

loadMaps
Set to true to load an existing map source files. Support the following:
- Inline source map
- sourceMappingURL=Note reference source map file
- Map source files in the same directory with the same name (plus .map) of
identityMap
not recommend this option. We recommend upgrading to use sourcemap.identityMapAPI.

sourcemaps.write()

sourcemaps. write( url , {option} ) The output configuration API

url

sourcemaps.write( 'maps' )Fill relative to the url address gulpfile.js for storing .map file

{option}

sourcemaps.write('maps', {
      addComment: false,   //为源文件添加 .map 地址注释，当你设为 false 时则禁用注释（比如你想要通过 header 加载映射源）
      includeContent：false,  //默认情况下，源映射包括源代码，通过false来使用原始文件。推荐包含内容，因为它“有效”。设置为`false`时，您必须托管源文件并设置正确的`sourceRoot`。 
      sourceRoot: url , //配合上面的 includeContent：false ；指定原始文件位置。这通常是URL（或绝对URL路径），而不是本地文件系统路径。默认情况下，源根目录是''，或者在`destPath`设置了大小写的情况下，从源映射到源基本目录的相对路径（这在许多开发环境中都应适用）。如果使用相对路径（空字符串或以a开头.的路径），则将其解释为相对于目标的路径。该插件将其重写为相对于每个源映射的路径。
      sourceRoot: function(file) {
         return '/src';   //同时支持方法函数
      },
      destPath: url,  //指定另外的输出地址，可以不靠 gulp.dist() 输出
      sourceMappingURLPrefix: url ,   //在编写外部源映射时，指定前缀到源映射URL上,相对路径将把它们的主要点去掉（非常有用），也就是改变那个注释的 URL 前缀。
      sourceMappingURL: function(file){ ,   //如果您需要完全控制源映射URL，您可以传递函数到此选项。函数的输出必须是源映射的完整URL(在输出文件的函数中)。
          return ;
      }，
      mapFile:  function(mapFilePath) {     //重名 .map 文件
        // source map files are named *.map instead of *.js.map
        return mapFilePath.replace('.js.map', '.map');
      },
      charset: utf8 ,    //指定编码格式
      clone : {deep:false,contents:false}    //克隆原始原件，并用克隆文件来创建映射文件，参数参照 file.clone()  
})

sourcemaps.mapSources()

Giving way to more defined source path

sourcemaps.mapSources(function(sourcePath, file) {
        return '../src/' + sourcePath;   //为原文件地址提供前缀，该应该场景应该是，当你所使用的插件需要生产别的文件
})

sourcemaps.identityMap()

For a JS and CSS can only produce a complete map of SourceMap, relative to the default of the air source SourceMap better prevent loss of information.

gulp.task('javascript', function() {
  var stream = gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      // An identity sourcemap will be generated at this step
      .pipe(sourcemaps.identityMap())
      .pipe(plugin1())
      .pipe(plugin2())
    .pipe(sourcemaps.write('../maps')
    .pipe(gulp.dest('public/scripts'));
});