Javascript 如何生成Less和Js的Source map

時間 2019-11-08

標籤 javascript 如何生成 source map 欄目 JavaScript 简体版

原文原文鏈接

爲何有Source map

CSS和JS腳本正變得愈來愈複雜，爲了解決網絡瓶頸，大部分源代碼都須要通過編譯、合併、壓縮才能運用到實際環境中。爲了減小網絡資源佔用，源碼通常都會通過如下方式處理：javascript

    使用css框架合併壓縮css文件；
    使用js合併插件，減小網絡請求次數；
    壓縮js文件，下降網絡佔用；css

這三種方式均可以有效的解決實際問題，但同時在運行調試過程當中也帶來麻煩，因爲css和js都是通過了壓縮轉換，當報錯時咱們很難定位到源代碼具體位置。爲了解決這個問題，Source map由此誕生。html

什麼是Source map

Source map至關於一個映射文件，它提供了轉換後的代碼，所對應源代碼的位置。也就是說，在調試js過程當中，咱們能夠清楚的看到當前執行代碼對應於源代碼的具體位置。java

支持的瀏覽器：目前對Source map支持最好的應該是Chrome瀏覽器。node

    如何打開Chrome的Source map功能：
    第一步，打開Developer Tools工具，選擇菜單View -> Developer -> Developer Tools
    第二步，選擇右上角的Settings菜單
    第三步，選擇General頁籤，勾選Enable source maps。git

如何在項目中使用Source map

通常有兩類文件須要使用Source map：css和js。因爲個人項目使用gulp環境。全部我主要介紹生成Source map的gulp插件。
要使用gulp，先得使用npm下載gulp：gulp下載。github

在下載插件以前，先建立一個項目,命名爲beautJs。項目目錄結構以下：chrome

    beautJs
    ----assets
        ----less
            ----login.less
            ----main.less
    ----view
        ----login.js
        ----main.jsnpm

----node_modules
----gulpfile.js
----index.html
----package.jsonjson

接下來，看看如何生成Source map文件。

Less如何生成Source map

    css編碼，我使用了less框架。要生成css的Source map文件，須要下載gulp-less和gulp-sourcemaps插件：
    gulp-less：css編碼框架，使用介紹。
    gulp-sourcemaps：css生成source map，使用介紹。

接下來就須要配置gulpfile.js文件，在使用gulp插件先得引入進來。在文件的頭部添加代碼：

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var less = require('gulp-less');

而後添加gulp的task任務，代碼以下：

gulp.task('less', function() {
    return gulp.src(['assets/less/index.less'])
        .pipe(sourcemaps.init())
        .pipe(less({compress: true}))
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest('dist/assets/styles'));
});

說明：index.less引入了assets/less下的全部模塊less文件：

@import "login";
@import "main";

因此在編譯時只用編譯index.less文件便可。配置完成後，咱們就可使用node.js命令行工具執行命令：

gulp less

最終在根目錄下生成了一個dist文件夾，目錄結構以下：

    dist
    ----assets
    ----index.css
    ----index.css.map

打開index.css文件，查看代碼：

.login-body{background:#fff}.login-body .login-item{background:#fff}.main-body{background:#fff}.main-body .main-item{background:#fff}
/*# sourceMappingURL=index.css.map */

在文件的最後一行能看到下面的代碼：

/*# sourceMappingURL=index.css.map */

這含代碼是Source map的關鍵所在，有了這行代碼，咱們在使用chrome瀏覽器時就能夠看到index.css對應的源代碼所在位置。固然，在上線項目時，咱們也能夠移除改行代碼。
如今只須要在index.html文件中引入index.css文件就可使用全部的樣式資源了。

Js如何生成Source map

    Js文件在項目中是經過模塊劃分，一個模塊一個文件。隨着項目的複雜度增長，模塊數量也逐漸增多。可使用gulp-concat插件合併js文件。須要使用的插件以下：
    gulp-concat: 文件合併，使用介紹。
    gulp-uglify：js文件壓縮，使用介紹。
    gulp-sourcemaps：js生成source map，使用介紹。

接下來就配置gulpfile.js文件，在使用gulp插件先得引入進來。在文件的頭部添加代碼：

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

而後添加gulp的task任務，代碼以下：

gulp.task('uglify', function () {
    return gulp.src('view/*.js')
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(concat('index.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('dist/view'));
});

目前，gulpfile.js文件裏邊已經有less和uglify兩個任務了，咱們可使用gulp的watch功能，監聽less和js文件是否有更新，有更新當即執行less和uglify兩個任務。到目前gulpfile.js文件的完整代碼以下：

/**
 * 構建任務
 */
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var less = require('gulp-less');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('less', function() {
    return gulp.src(['assets/less/index.less'])
        .pipe(sourcemaps.init())
        .pipe(less({compress: true}))
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest('dist/assets/styles'));
});

gulp.task('uglify', function () {
    return gulp.src('view/*.js')
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(concat('index.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('dist/view'));
});

gulp.task("serve:build", ['less', 'uglify'], function(){
    gulp.watch("assets/less/**/*.less", ['less']);
    gulp.watch("view/*.js", ['uglify']);
});

配置完成後，咱們就可使用node.js命令行工具下面的命令：

gulp serve: build

最終在根目錄dist文件夾下生成views文件夾，dist目錄結構以下：

    dist
    ----assets
        ----index.css
        ----index.css.map
    ----views
        ----index.js
        ----index.js.map

打開index.js文件，查看源碼：

function login(){}function main(){}
//# sourceMappingURL=index.min.js.map

在文件的最後一行能看到下面的代碼：

/*# sourceMappingURL=index.js.map */

如今只須要在index.html文件中引入index.js文件便可。源碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BeautJs</title>
    <link rel="stylesheet" href="dist/assets/styles/index.css" />
    <script type="text/javascript" src="dist/view/index.min.js"></script>
</head>
<body>
</body>
</html>