57

在 static/js/ 中有一些 js 文件

    1. a.js
    2. b.js
    3. c.js

如何配置 grunt.js 以获取以下文件：

    1. a.min.js
    2. b.min.js
    3. c.min.js

到目前为止，我必须输入特定的文件名：

  min: {
    dist: {
    src:  'js/**/*.js',
    dest: 'js/min/xxx.min.js'
   }
 }
4

11 回答 11

52

遇到了同样的问题，并找到了一个可以分别自动缩小我所有脚本的解决方案：

uglify: {
      build: {
        files: [{
            expand: true,
            src: '**/*.js',
            dest: 'build/scripts',
            cwd: 'app/scripts'
        }]
      }
    }
于 2013-03-22T17:30:23.887 回答
23

在 grunt 0.4 中，您可以像这样指定多个 dest/src 对：

uglify: {
    dist: {
        files: {
            'dist/main.js': 'src/main.js',
            'dist/widget.js': 'src/widget.js'
        }
    }
}
于 2012-12-03T03:32:48.093 回答
17

或者您可以使用 expandMapping，如下所示：

min: {
    files: grunt.file.expandMapping(['path/*.js', 'path2/*.js'], 'destination/', {
        rename: function(destBase, destPath) {
            return destBase+destPath.replace('.js', '.min.js');
        }
    })
}

和输出：

path/test.js => 目的地/path/test.min.js
path2/foo.js => 目的地/path2/foo.min.js

于 2013-09-02T00:19:31.210 回答
14

下面的 gruntjs 适用于我为目录下的所有 js 文件创建缩小文件

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
    build: {
        files: [{
            expand: true,
            src: '**/*.js',
            dest: 'build/scripts',
            cwd: 'public_html/app',
        ext: '.min.js'
        }]
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};
于 2014-03-07T03:44:06.580 回答
6

来自 min 的 grunt 文档：

此任务是一个多任务，这意味着如果未指定目标，grunt 将自动遍历所有最小目标。

所以你可以这样做：

  min: {
    min_a: {
       src:  'a.js',
       dest: 'a.min.js'
    },
    min_b: {
       src:  'b.js',
       dest: 'b.min.js'
    },
    min_c: {
       src:  'c.js',
       dest: 'c.min.js'
 }

这些任务的名称“dist”没有什么特别之处。

于 2013-02-02T10:22:24.237 回答
4

使用ext选项来命名文件.min.js，而不是.js

uglify: {
      build: {
        files: [{
            expand: true,
            src: '**/*.js',
            dest: 'build/scripts',
            cwd: 'app/scripts',
            ext: '.min.js'
        }]
      }
    }
于 2014-12-16T10:42:33.597 回答
4

要将某些文件显式导出到单独的输出文件（在本例中为 all.min.js和all.jquery.js），请使用：

uglify: {
  js: {
    files : {
        'js/all.min.js' : [
          'js/modernizr.js',
          'js/vendor/modernizr-2.6.2-respond-1.1.0.min.js',
          'js/bootstrap.min.js',
          'js/main.js',
          'js/ZeroClipboard.min.js',
          'js/bootstrap-datepicker/bootstrap-datepicker.js'
        ],

        'js/all.jquery.js' : [
          'js/vendor/jquery-1.9.1.js',
          'js/vendor/jquery-migrate-1.2.1.js',
          'js/vendor/jquery-ui.js'
        ]

    }
  },
  options: {
    banner: '\n/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
    preserveComments: 'some',
    report: 'min'
  }
},
于 2014-12-17T11:07:42.890 回答
1

我喜欢保留原始文件并创建丑陋的文件：

uglify: {
  dist: {
    files: [{
      expand: true,
      src: '**/*.js',
      dest: 'destdir',
      cwd: 'srcdir',
      rename: function(dest, src) { return dest + '/' + src.replace('.js', '.min.js'); }
    }]
  }
},
于 2014-09-01T20:57:04.757 回答
0

你也可以使用 copy 和grunt-mindirect。

copy: {
  dist: {
    src: 'a.js',
    dest: 'a.min.js'
  }
},
minidirect: {
  all: 'js/min/*.min.js'
}

这应该有效。

于 2012-12-04T11:08:03.480 回答
0

我想这只对手表任务很重要。

在 grunt 0.4 中你可以这样做

  var filesA = 'a.js', filesB = 'b.js', filesC = 'c.js';

  ...

  min: {
      min_a: {
         src:  filesA,
         dest: 'a.min.js'
      },
      min_b: {
         src:  filesB,
         dest: 'b.min.js'
      },
      min_c: {
         src:  filesC,
         dest: 'c.min.js'
  }

  watch: {
      min_a: {
         files:  filesA,
         tasks: ['min:min_a']
      },
      min_b: {
         files:  filesB,
         tasks: ['min:min_b']
      },
      min_c: {
         files:  filesC,
         tasks: ['min:min_c']
      }
  }

之后就开始了grunt watch，一切都会自动好起来的。

于 2013-02-27T10:04:09.430 回答
0

为了帮助将来访问此页面的其他人-

我在这里看到了一个视频，它解释了如何使用 Grunt JS 缩小 JS 文件：https ://www.youtube.com/watch?v=Gkv7pA0PMJQ

源代码可在此处获得：http ://www.techcbt.com/Post/359/Grunt-JS/how-to-minify-uglify-javascript-files-using-grunt-js

以防万一，如果上述链接不起作用：

  1. 您可以使用以下脚本缩小所有 javascript 文件并合并/合并为一个文件：

    module.exports = function(grunt){
	grunt.loadNpmTasks('grunt-contrib-uglify');	
	
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),

		uglify:{
			t1:{
				files:{
					'dest/all.min.js': ['src/app.js', 'src/one.js', 'src/t/two.js']
				}
			}
		}
	});	
};

  1. 如果您还想生成源映射，可以启用“sourceMap”选项，如下所示：

    module.exports = function(grunt){
	grunt.loadNpmTasks('grunt-contrib-uglify');	

	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),

		uglify:{
			t1:{
				options : {
        			sourceMap : true,
      			},
				files:{
					'dest/all.min.js': ['src/app.js', 'src/one.js', 'src/t/two.js']
				}
			}
		}
	});	
};

  1. 为了在缩小 JS 文件的同时保留整个文件夹结构，可以使用以下脚本：

    module.exports = function(grunt){
	grunt.loadNpmTasks('grunt-contrib-uglify');	

	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),

		uglify:{
			t1:{
				files: [{
					cwd: 'src/',
               		src: '**/*.js',  
               		dest: 'dest/',    
               		expand: true,    
               		flatten: false,
               		ext: '.min.js'
           		}]
			}
		}
	});	
};

于 2016-08-26T03:24:15.797 回答