Grunt concat + uglify与源代码 [英] Grunt concat + uglify with sourcemaps

问题描述

我使用concat将JS文件合并到一个文件中，并使用uglify来最小化JavaScript。如何创建使用源JS文件的源文件？

我目前的gruntfile：
$ b

  concat：{
 options：{
 //定义串联输出中每个文件之间的字符串
分隔符：';'
}，
 dist：{ 
 //连接
的文件src：['<％= config.src％> / js / ** / *。js']，
 //位置生成的JS文件
 dest：'<％= config.dist％> /js/main.js'
} 
}，
 
 uglify：{
 dist：{
文件：{
'<％= config.dist％> /js/main.min.js'：['<％= concat.dist.dest％ >'] 
} 
} 
}，
  

解决方案

您需要在 concat 和 uglify 任务上启用源映射，并且你必须为uglify任务指定 sourceMapIn 选项。

下面是一个示例grunt confi g：
$ b

  concat：{
 options：{
 sourceMap：true 
}，
 dist：{
 src：['www / js / ** / *。js']，
 dest：'.tmp / main.js'
 
 
 uglify {
 options：{
 sourceMap：true，
 sourceMapIncludeSources：true，
 sourceMapIn：'.tmp / main .js.map'
}，
 dist：{
 src：'<％= concat.dist.dest％>'，
 dest：'www / main。 min.js'
} 
} 
  

I use concat to merge JS files into one file and uglify to minimize the JavaScript. How can I create a sourcemaps file that uses the source JS files?

My current gruntfile:

concat: {
    options: {
        // define a string to put between each file in the concatenated output
        separator: ';'
    },
    dist: {
        // the files to concatenate
        src: ['<%= config.src %>/js/**/*.js'],
        // the location of the resulting JS file
         dest: '<%= config.dist %>/js/main.js'
    }
},

uglify: {
    dist: {
        files: {
            '<%= config.dist %>/js/main.min.js': ['<%= concat.dist.dest %>']
        }
    }
},

解决方案

You need to enable source maps on both the concat and uglify tasks, and you must specify the sourceMapIn option for the uglify task.

Here's a sample grunt config:

concat : {
  options : {
    sourceMap :true
  },
  dist : {
    src  : ['www/js/**/*.js'],
    dest : '.tmp/main.js'
  }
},
uglify : {
  options : {
    sourceMap : true,
    sourceMapIncludeSources : true,
    sourceMapIn : '.tmp/main.js.map'
  },
  dist : {
    src  : '<%= concat.dist.dest %>',
    dest : 'www/main.min.js'
  }
}

这篇关于Grunt concat + uglify与源代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！