如何利用Grunt生成对应的Source Map文件,线上代码压缩使用

如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式

    首先咱们来讲说为什么要生成sourceMap文件呢？简单的说，sourceMap是为了压缩后的代码调式提供方便，好比线上的JS文件已经压缩了，可是线上好比说有bug，可是代码已是压缩后的，对于开发并很差调式，因此想生存一个对应的Map文件，而后使用chrome浏览器在源文件未压缩的JS文件下调式。

  那么Map文件究竟是什么呢？简单的来说它就是记录信息，记录一些为压缩以前的js文件的位置，及压缩后的文件对应未压缩以前的文件,对应第几行第几列的那些代码！

  在讲解使用grunt生存Map文件以前，咱们仍是来简单复习下grunt如何合并及压缩代码，对于grunt咱们并不陌生，以前有几篇文章咱们也讲过如何使用grunt 可是咱们这边仍是一步一步先来说解下grunt合并，压缩及生成Map文件，及在chrome浏览器下如何调式代码的整个过程吧，也更使初学者更容易理解及掌握！

　　Grunt是一套前端自动化工具，基于nodeJS基础之上，对于咱们前端通常用于如下几点：

　　1． 压缩JS或者CSS文件。

　　2． 合并JS或者CSS文件。

1：Grunt是基于nodeJS,因此未安装nodeJS，先须要安装nodeJS。

     1.下载安装文件：下载地址：http://www.nodejs.org/download/以下：

      

根据操做系统的多少位 下载那个版本。下载完成后，双击：

执行相应的安装，完成后，在终端命令下，作以下操做：

Node 和 npm的版本号，说明都已经安装成功了(注：新版本的node安装文件已经包含了npm，因此如今只须要安装这个node版本的文件就ok)。

2. Grunt安装：客户端安装命令npm install -g grunt-cli (全局安装)

如上：安装已完成！

Demo实列以下：

假若有以下这么一个项目文件，以下：

 一：如何压缩文件？(主要使用插件grunt-contrib-uglify)

     1.package.json文件

      若是项目根目录没有package.json文件，咱们能够建立一个(或者使用命令 npm init),在这里咱们手动建立一个。这个文件主要用来存储npm模块的依赖项，以下          

      package.json代码以下：

{   "name": "demo",   "version": "0.1.0",   "description": "demo",   "license": "MIT",   "devDependencies": {     "grunt": "~0.4.1",     "grunt-contrib-jshint": "~0.6.3",     "grunt-contrib-uglify": " ~0.5.1",     "grunt-contrib-clean": "~0.5.0"   } }

接着咱们进入根目录直接运行npm install就能提取依赖项。

以下已经生成了文件：

Gruntfile.js

  若是项目的根目录没有Gruntfile.js,咱们能够手动建立一个，它通常作如下事情。

1. 读取package.json信息。

2. 插件加载、注册任务，运行任务.

Gruntfile.js信息以下。

module.exports = function (grunt) {        // 项目配置         grunt.initConfig({            pkg: grunt.file.readJSON('package.json'),            uglify: {                build: {                   src: 'src/*.js',                   dest: 'dest/dest.min.js'               }           }     });       // 加载提供"uglify"任务的插件       grunt.loadNpmTasks('grunt-contrib-uglify');      // 默认任务       grunt.registerTask('default', ['uglify']); }

上面的含义是指：把全部src下面的js文件压缩到dest文件下的dest.min.js文件。

在根目录下运行grunt 就能够生成，以下：

二：如何对文件合并？

仍是以上面的项目文件为例，在package.json增长一项 "grunt-contrib-concat": "~0.3.0"

 便可，而后在项目根目录再运行 npm install 以下：

便可把合并插件(grunt-contrib-concat)添加进来。以下：

接着咱们能够在Gruntfile.js增长concat任务配置，这边为了综合演示合并及压缩，因此一块儿先合并，再压缩了。代码以下：

module.exports = function (grunt) {   // 项目配置   grunt.initConfig({     pkg: grunt.file.readJSON('package.json'),      concat: {       options: {         separator: ';'       },       dist: {         src: 'src/*.js',         dest: 'dest/dest.js'       }     },      uglify: {       build: {         src: 'dest/dest.js',         dest: 'dest/dest.min.js'       }     }   });   // 加载提供"uglify"任务的插件   grunt.loadNpmTasks('grunt-contrib-uglify');   grunt.loadNpmTasks('grunt-contrib-concat');   // 默认任务   grunt.registerTask('default', ['concat', 'uglify']); }

上面代码的含义是：先合并src目录下全部的文件到dest目录下的dest.js里面去，接着对dest.js文件进行压缩，生成dest.min.js文件，以下所示：

三：压缩src下的全部JS到dest目录下生成，能够以下配置：

module.exports = function (grunt) {   grunt.initConfig({     uglify: {       my_target: {         files: [{           expand: true,           cwd: 'src',           src: '*.js',           dest: 'dest'         }]       }     }   });   grunt.loadNpmTasks('grunt-contrib-uglify');   // 默认任务    grunt.registerTask('default', ['uglify']); }

执行grunt，便可生成以下：

上面的意思是指把src全部的js，在dest目录下生成且压缩。

以上是基本知识点，好了，下面咱们来回到主题，压缩JS后，如何来生成对应的map文件。

仍是我以前的项目gruntTest。

Package.json仍是以前同样的，以下代码：

{   "name": "demo",   "version": "0.1.0",   "description": "demo",   "license": "MIT",   "devDependencies": {     "grunt": "~0.4.1",     "grunt-contrib-jshint": "~0.6.3",     "grunt-contrib-uglify": "~0.5.1",     "grunt-contrib-concat": "~0.3.0",     "grunt-contrib-clean": "~0.5.0"   } }

下面咱们只要在Gruntfile.js配置成以下便可。

module.exports = function (grunt) {     // 构建任务配置      grunt.initConfig({         //读取package.json的内容，造成json数据          pkg: grunt.file.readJSON('package.json'),      // 对build目录进行清理          clean: {             build: {                 src: 'dest/*'          }         },      // 合并全部的JS       concat:{          dist: {              src: 'src/*.js',              dest: 'dest/dest.js'          }      },      // 压缩全部js并生成source map          uglify: {             "my_target": {                 options: {                     sourceMap: true                 },                 files: [                     // 能够直接做用于文件夹下全部文件                      {                         expand: true,                         cwd: 'dest/',                         src: ['dest.js'],                         // 输出和输入在同一目录                          dest: 'dest/',                         ext: '.min.js'                     }                 ]             }         }     });     // 加载指定插件任务      grunt.loadNpmTasks('grunt-contrib-uglify');    grunt.loadNpmTasks('grunt-contrib-clean');    grunt.loadNpmTasks('grunt-contrib-concat');     // 默认执行的任务      grunt.registerTask('default', ['clean','concat','uglify']); };

上面的代码的意思是：对src下的全部JS文件 先合并后 在dest目录下生成dest.js的合并文件，接着对dest.js文件在同一目录下压缩生成dest.min.js,同时生成map文件dest.min.js.map。以下所示：

在chrome浏览器下如何设置调式？

  首先咱们来看看对chrome不设置状况下 是这样的 ，在Setting -> General ->

如上，没有勾选Enable javascript source maps选项，咱们在chrome浏览器下 按F12看到这样的：

文件已经压缩了的，对于咱们调式JS很是不方便，因此咱们须要对chrome浏览器设置下，勾选上Enable javascript source maps文件，以下所示：

咱们再来看下chrome浏览器，以下：

若是dest.js代码有问题的话，咱们能够直接对未压缩的dest.js进行调式代码。

咱们打开map文件 看到以下信息：

{     "version": 3,     "file": "dest.min.js",     sourceRoot:'',     "sources": [         "dest.js"     ],     "names": [         "Test1",         "test1",         "init",         "console",         "log",         "Test2",         "test2"     ],     "mappings": "AAKC,QAASA,SACT,GAAIC,IACHC,KAAM,WACLC,QAAQC,IAAI,UAGd,OAAOH,GAGR,QAASI,SACR,GAAIC,IACHJ,KAAM,WACLC,QAAQC,IAAI,UAGd,OAAOE" }

- version：Source map的版本，目前为3。 - file：转换后的文件名。 - sourceRoot：转换前的文件所在的目录。若是与转换前的文件在同一目录，该项为空。 - sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。 - names：转换前的全部变量名和属性名。 - mappings：记录位置信息的字符串.