web-dev-qa-db-ja.com

grunt.jsを構成してファイルを個別に縮小する方法

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'
   }
 }
javascriptcompressiongruntjs
57
looping

同じ問題があり、すべてのスクリプトを個別に自動的に縮小するソリューションを見つけました。

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

Grunt 0.4では、次のように複数のdest/srcペアを指定できます。

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

または、次のように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 => destination/path2/foo.min.js

17
Rafa Heringer

以下の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']);

};
14
Sharmila

面倒なドキュメントから：

このタスクはマルチタスクです。つまり、ターゲットが指定されていない場合、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」という名前について特別なことはありません。

6
DavidHyogo

いくつかのファイルを個別の出力ファイルに明示的にエクスポートするには（この場合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'
  }
},
4
lubosdz

extオプションを使用して、ファイルに名前を付けます.min.js の代わりに .js

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

私は元のファイルを保持し、またlikeいものを作成するのが好きです：

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

将来このページにアクセスする他の人を助けるために-

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ファイルを縮小し、1つのファイルに結合/連結できます。
    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'
                        }]
                        }
                }
        });     
};
0
user203687

監視タスクの場合にのみ問題になると思います。

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を開始するだけで、すべてが自動的にうまくいきます。

0
bullgare

Copyと grunt-mindirect を使用することもできます。

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

これは動作するはずです。

0
Charles