如何利用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：記錄位置信息的字符串.