grunt.js를 구성하여 파일을 개별적으로 축소하는 방법

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

---

같은 문제가 있었고 모든 스크립트를 개별적으로 자동으로 축소하는 솔루션을 찾았습니다.

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

---

grunt 0.4에서는 다음과 같이 여러 dest / src 쌍을 지정할 수 있습니다.

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

---

또는 다음과 같이 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

---

아래 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']);

};

---

분 동안 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'라는 이름에는 특별한 것이 없습니다.

---

대신 ext파일 이름을 지정 하는 옵션을 사용하십시오..min.js.js

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

---

일부 파일을 별도의 출력 파일 (이 경우 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'
  }
},

---

원본 파일을 유지하고 추악한 파일도 만들고 싶습니다.

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

---

copy 및 grunt-mindirect를 사용할 수도 있습니다 .

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

작동합니다.

---

시계 작업에만 중요하다고 생각합니다.

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하면 모든 것이 자동으로 잘됩니다.

---

앞으로이 페이지를 방문하는 다른 사람들을 돕기 위해-

Grunt JS를 사용하여 JS 파일을 축소하는 방법을 설명하는 비디오를 발견했습니다. https://www.youtube.com/watch?v=Gkv7pA0PMJQ

The source code is made available here: http://www.techcbt.com/Post/359/Grunt-JS/how-to-minify-uglify-javascript-files-using-grunt-js

Just in case, if the above links are not working:

1. You can minify all javascript files and combine/concat into one file using the following script:

    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']
				}
			}
		}
	});	
};

2. If you would like to have source maps also generated, you can enable "sourceMap" option as follows:

    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']
				}
			}
		}
	});	
};

3. In order to retain entire folder structure while minifying JS files, you can use the following script:

    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'
           		}]
			}
		}
	});	
};

ReferenceURL : https://stackoverflow.com/questions/13358680/how-to-config-grunt-js-to-minify-files-separately