How to Use grunt to generate the corresponding source map file and compress online Code to facilitate Debugging Using chrome

How to Use grunt to generate the corresponding source map file and compress online Code to facilitate Debugging Using chrome

First, why do we need to generate the sourcemap file? To put it simply, sourcemap provides convenience for the compressed code mode. For example, the online JS file has been compressed, but there are bugs online, but the code is already compressed, it is not easy to adjust for development, so you want to survive a corresponding map file, and then use Chrome browser to adjust it under the uncompressed JS file of the source file.

So what is the map file? Simply put, it records information, records the location of the JS file before compression, and the compressed file corresponds to the file before compression, the code corresponding to the nth column of the row!

Before explaining how to use grunt to survive the map file, we should simply review how grunt merges and compresses the code. We are no stranger to grunt, we have discussed how to use grunt in several previous articles, but we will explain how to merge, compress, and generate Map Files step by step, and how to adjust the code in the Chrome browser, it also makes it easier for beginners to understand and master!

Grunt is a front-end automation tool based on nodejs. For our front-end, it is generally used in the following aspects:

1. Compress JS or CSS files.

2. Merge JS or CSS files.

1: grunt is based on nodejs, so nodejs is not installed. You need to install nodejs first.

1.Download the installation file::Http://www.nodejs.org/download/As follows:

Download the version based on the number of digits in the operating system. After the download is complete, double-click:

After the installation is complete, run the following command on the terminal:

The version numbers of node and NPM indicate that they have been successfully installed. (Note: the new version of node Installation File already contains NPM. Now, you only need to install the node version file ).

2. Install Grunt: Client installation command NPM install-G grunt-cli (Global installation)

Above: the installation is complete!

The demo is listed as follows:

Suppose there is such a project file as follows:

 I. How to compress files? (Mainly use the plug-in grunt-contrib-uglify)

1.Package. JSONFile

If the project root directory does not have the package. JSON file, we can create one (or use the command NPM init). Here we create one manually. This file is mainly used to store NPM module dependencies, as shown below

The package. JSON code is as follows:

{  "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"  }}

Then run NPM install in the root directory to extract the dependency.

The file has been generated as follows:

Gruntfile. js

If the project root directory does not have gruntfile. JS, You can manually create one. It generally does the following.

1. Read package. JSON information.
2. The plug-in loads and registers tasks to run tasks.

Gruntfile. js information is as follows.

Module. exports = function (grunt) {// configure grunt for the project. initconfig ({PKG: grunt. file. readjson ('package. JSON '), uglify: {build: {SRC: 'src /*. js', DEST: 'dest/DeST. min. js' }}}); // loads the plug-in grunt that provides the "uglify" task. loadnpmtasks ('grunt-contrib-uglify '); // default task grunt. registertask ('default', ['uglify ']);}

The preceding description refers to compressing all JS files under SRC to the DeST. Min. js file under the Dest file.

Run grunt in the root directory to generate the file, as shown below:

Ii. How to merge files?

For example, add "Grunt-contrib-Concat" in package. JSON ":"~ 0.3.0"

Then run NPM install in the project root directory as follows:

You can add the merge plug-in (Grunt-contrib-Concat. As follows:

Then we can add the Concat task configuration in gruntfile. js. In order to comprehensively demonstrate the merging and compression, we merge the tasks and then compress them. The Code is as follows:

Module. exports = function (grunt) {// configure grunt for the project. 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' }}}); // loads the plug-in grunt that provides the "uglify" task. loadnpmtasks ('grunt-contrib-uglify '); grunt. loadnpmtasks ('grunt-contrib-concat'); // default task grunt. registertask ('default', ['concat', 'uglify ']);}

The meaning of the above Code is: first merge all the files under the src directory to the Dest directory under the Dest directory. in JS, go to DeST. javaScript files are compressed to generate DeST. min. the JS file is as follows:

3. compress all JS files under SRC to the Dest directory. The following configuration can be performed:

Module. exports = function (grunt) {grunt. initconfig ({uglify: {my_target: {files: [{expand: True, CWD: 'src', Src :'*. js', DEST: 'dest'}] }}); grunt. loadnpmtasks ('grunt-contrib-uglify '); // default task grunt. registertask ('default', ['uglify ']);}

Run grunt to generate the following:

The above means to generate and compress all src js files in the Dest directory.

The above are the basic knowledge points. Now let's go back to the topic and compress js to generate the corresponding map file.

Or my previous project grunttest.

The package. JSON is the same as before. The Code is as follows:

{  "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"  }}

In the following example, configure gruntfile. js as follows.

Module. exports = function (grunt) {// configure grunt for the build task. initconfig ({// read package. JSON content to form the JSON data PKG: grunt. file. readjson ('package. json'), // clean the build directory clean: {build: {SRC: 'dest/* '}, // merge all JS Concat: {Dist: {SRC: 'src /*. js', DEST: 'dest/DeST. js' }}, // compress all JS files and generate source map uglify: {"my_target": {options: {sourcemap: true}, files: [// all files in the folder {expand: True, CWD: 'dest', Src: ['dest. js'], // the output and input are in the same directory: 'dest'/', ext :'. min. JS '}] }}); // load the specified plug-in task grunt. loadnpmtasks ('grunt-contrib-uglify '); grunt. loadnpmtasks ('grunt-contrib-clean'); grunt. loadnpmtasks ('grunt-contrib-concat'); // The default task grunt. registertask ('default', ['clean', 'concat', 'uglify ']);};

The code above indicates that all JS files under SRC are first merged and then DEST is generated under the Dest directory. and then DeST. the JS file is compressed in the same directory to generate DeST. min. JS, and generate the map file DeST. min. JS. map. As follows:

In Chrome, how do I set the mode?

First, we can see that this is the case when Chrome is not set. In setting-> General->

As shown above, the Enable JavaScript source maps option is not checked. Press F12 in chrome to see this:

The file has been compressed, which is inconvenient for us to adjust Js. Therefore, we need to set the Chrome browser to check the Enable JavaScript source maps file, as shown below:

Let's take a look at the Chrome browser, as shown below:

If there is a problem with the DeST. js code, we can directly tune the uncompressed DeST. js code.

Open the map file and you will see the following information:

{    "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 version. Currently, it is 3.
-File: The converted file name.
-Sourceroot: directory of the file before conversion. If it is in the same directory as the file before conversion, this item is blank.
-Sources: the file before conversion. This is an array, indicating that multiple files may be merged.
-Names: all variable names and attribute names before conversion.
-Mappings: string used to record location information.

Download demo

How to Use grunt to generate the corresponding source map file and compress online Code to facilitate Debugging Using chrome