Javascript 如何生成Less和Js的Source map

為什么有Source map

    CSS和JS腳本正變得越來越復雜，為了解決網絡瓶頸，大部分源代碼都需要經過編譯、合並、壓縮才能運用到實際環境中。為了減少網絡資源占用，源碼一般都會經過以下方式處理：

    使用css框架合並壓縮css文件；
    使用js合並插件，減少網絡請求次數；
    壓縮js文件，降低網絡占用；

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

什么是Source map

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

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

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

如何在項目中使用Source map

    一般有兩類文件需要使用Source map：css和js。由於我的項目使用gulp環境。所有我主要介紹生成Source map的gulp插件。
要使用gulp，先得使用npm下載gulp：gulp下載。

 

    在下載插件之前，先創建一個項目,命名為beautJs。項目目錄結構如下：

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

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

    接下來，看看如何生成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>

    下圖是我測試項目目錄截圖：

   

總結

    以上步驟完成后，我們再也不用關心js文件或者css文件的引用問題，並且在項目運行時性能也會有提升：通過合並文件減少網絡請求次數。通過壓縮文件減低網絡占用率。

    最后附上測試工程的git地址：https://github.com/heavis/BeautJs。

   

   如果本篇內容對大家有幫助，請點擊頁面右下角的關注。如果覺得不好，也歡迎拍磚。你們的評價就是博主的動力！下篇內容，敬請期待！