如何配置grunt.js分别缩小文件

时间:2012-11-13 10:00:29

标签: javascript compression gruntjs

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'
   }
 }

11 个答案:

答案 0 :(得分:52)

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

uglify: {
      build: {
        files: [{
            expand: true,
            src: '**/*.js',
            dest: 'build/scripts',
            cwd: 'app/scripts'
        }]
      }
    }

答案 1 :(得分:22)

在grunt 0.4中,您可以指定多个dest / src对,如下所示:

uglify: {
    dist: {
        files: {
            'dist/main.js': 'src/main.js',
            'dist/widget.js': 'src/widget.js'
        }
    }
}

答案 2 :(得分: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 => destination / path / test.min.js
path2 / foo.js =>目的地/路径2 / foo.min.js

答案 3 :(得分:14)

以下gruntjs适合我为dir下的所有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']);

};

答案 4 :(得分:6)

来自min的grunt doc:

  

此任务是一项多任务,意味着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'没什么特别的。

答案 5 :(得分:4)

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

uglify: {
      build: {
        files: [{
            expand: true,
            src: '**/*.js',
            dest: 'build/scripts',
            cwd: 'app/scripts',
            ext: '.min.js'
        }]
      }
    }

答案 6 :(得分: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'
  }
},

答案 7 :(得分:1)

我喜欢保留原始文件并创建丑化的文件:

uglify: {
  dist: {
    files: [{
      expand: true,
      src: '**/*.js',
      dest: 'destdir',
      cwd: 'srcdir',
      rename: function(dest, src) { return dest + '/' + src.replace('.js', '.min.js'); }
    }]
  }
},

答案 8 :(得分:0)

您还可以使用复制和grunt-mindirect

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

这应该有用。

答案 9 :(得分: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,一切都会自动完成。

答案 10 :(得分: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文件并将/ concat合并到一个文件中:
  2.     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”选项:
    2.     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文件的同时保留整个文件夹结构,您可以使用以下脚本:
      2.     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'
                   		}]
        			}
        		}
        	});	
        };