Javascript 如何生成Less和Js的Source map-安度博客

为什么有Source map

    CSS和JS剧本正变得越来越庞大，为相识决网络瓶颈，大部门源代码都需要经由编译、合并、压缩才气运用到实际情况中。为了淘汰网络资源占用，源码一般都市经由以下方式处置惩罚：

    使用css框架合并压缩css文件；
    使用js合并插件，淘汰网络请求次数；
    压缩js文件，降低网络占用；

    这三种方式都可以有效的解决实际问题，但同时在运行调试历程中也带来贫苦，由于css和js都是经由了压缩转换，当报错时我们很难定位到源代码详细位置。为相识决这个问题，Source map由此降生。

什么是Source map

    Source map相当于一个映射文件，它提供了转换后的代码，所对应源代码的位置。也就是说，在调试js历程中，我们可以清楚的看到当前执行代码对应于源代码的详细位置。

    支持的nk" target="_blank">浏览器：现在对Source map支持最好的应该是Chromenk" target="_blank">浏览器。

    如何打开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(&＃39;gulp&＃39;);var sourcemaps = require(&＃39;gulp-sourcemaps&＃39;);var less = require(&＃39;gulp-less&＃39;);

    然后添加gulp的task任务，代码如下：

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

    说明：index.less引入了assets/less下的所有模块less文件：

@import &＃39;login&＃39;;@import &＃39;main&＃39;;

    所以在编译时只用编译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(&＃39;gulp-uglify&＃39;);var concat = require(&＃39;gulp-concat&＃39;);var sourcemaps = require(&＃39;gulp-sourcemaps&＃39;);

    然后添加gulp的task任务，代码如下：

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

    现在，gulpfile.js文件里边已经有less和uglify两个任务了，我们可以使用gulp的watch功效，监听less和js文件是否有更新，有更新连忙执行less和uglify两个任务。到现在gulpfile.js文件的完整代码如下：

/** * 构建任务 */var gulp = require(&＃39;gulp&＃39;);var sourcemaps = require(&＃39;gulp-sourcemaps&＃39;);var less = require(&＃39;gulp-less&＃39;);var uglify = require(&＃39;gulp-uglify&＃39;);var concat = require(&＃39;gulp-concat&＃39;);gulp.task(&＃39;less&＃39; function() { return gulp.src([&＃39;assets/less/index.less&＃39;]) .pipe(sourcemaps.init()) .pipe(less({compress: true})) .pipe(sourcemaps.write(&＃39;./&＃39;)) .pipe(gulp.dest(&＃39;dist/assets/styles&＃39;));});gulp.task(&＃39;uglify&＃39; function () { return gulp.src(&＃39;view/*.js&＃39;) .pipe(sourcemaps.init({loadMaps: true})) .pipe(concat(&＃39;index.min.js&＃39;)) .pipe(uglify()) .pipe(sourcemaps.write(&＃39;/&＃39;)) .pipe(gulp.dest(&＃39;dist/view&＃39;));});gulp.task(&＃39;serve:build&＃39; [&＃39;less&＃39; &＃39;uglify&＃39;] function(){ gulp.watch(&＃39;assets/less/**/*.less&＃39; [&＃39;less&＃39;]); gulp.watch(&＃39;view/*.js&＃39; [&＃39;uglify&＃39;]);});

    配置完成后，我们就可以使用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=&＃39;en&＃39;><head> <meta charset=&＃39;UTF-8&＃39;> <title>BeautJs</title> <link rel=&＃39;stylesheet&＃39; href=&＃39;dist/assets/styles/index.css&＃39; /> <script type=&＃39;text/javascript&＃39; src=&＃39;dist/view/index.min.js&＃39;></script></head><body></body></html>

    下图是我测试项目目录截图：

总结

    以上步骤完成后，我们再也不用体贴js文件或者css文件的引用问题，而且在项目运行时性能也会有提升：通过合并文件淘汰网络请求次数。通过压缩文件减低网络占用率。

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

    如果本篇内容对各人有资助，请点击页面右下角的关注。如果以为欠好，也接待拍砖。你们的评价就是博主的动力！下篇内容，敬请期待！