grunt-contrib-uglify

게시자: 대문 demun 카테고리: 퍼블리셔/Grunt 2015.06.22 07:00

grunt-contrib-uglify

grunt-contrib-uglify 원문

UglifyJS 는 파일을 작게 만듭니다.


Getting Started

  • 시작하기

이 플러그인은 Grunt ~0.4.0 버젼이상이 필요.

Grunt 를 시작하기 전에 Grunt 시작하기를 확인해야 합니다. 이 문서는 Gruntfile 뿐만 아니라 설치하고 Grunt 플러그인을 사용합니다.

이 과정에 익숙하다면, 당신은 다음 명령으로 이 플러그인을 설치할 수 있습니다:

npm install grunt-contrib-uglify --save-dev

플러그인이 설치되면, Gruntfile 내에서 자바스크립트의 코드로 아래의 명령을 사용할 수 있습니다 :

grunt.loadNpmTasks('grunt-contrib-uglify');

Uglify task

이 작업은 grunt uglify 명령을 실행합니다.

Grunt 작업구성 가이드에 따라 작업대상, 파일 및 옵션을 지정할 수 있다.

2.x에서 3.x으로 마이그레이션 하기

버전 3.x 은 소스 맵 구성에 대한 변경 사항을 소개했습니다. 소스 맵 옵션을 사용하지 않는 경우, 당신은 완벽하게 업그레이드 할 수 있어야 한다. 소스 맵을 사용 할 경우, 아래를 참조하십시오.

제거된 옵션

sourceMappingURL - This is calculated automatically now sourceMapPrefix - No longer necessary for the above reason

변경된 옵션

sourceMap - 부울값만 받음. sourceMapRoot 에 기본 이름을 가진 맵을 생성 - sourceMaptrue로 설정되어있을 때, 소스의 위치는 계산되지만 필요한 경우 수동으로 소스 루트를 설정할 수 있습니다

새로운 옵션

sourceMapName - 문자열이나 함수는 맵에 sourceMapIncludeSources의 위치나 이름을 변경하는것을 허용합니다. - 직접 맵 표현식으로 소스 파일의 내용을 삽입합니다. - 부울값을 받습니다. 한개의 표현식(JSON 이나 단일함수)으로 quoteStyle 를 분석합니다. - 정수 0(기본값) 1,2,3 적용 또는 따옴표 스타일을 유지하는것을 허용합니다.


Options

이 작업은 기본적으로 UglifyJS2 이하기에, 고급구성에 대한 읽기와 UglifyJS 문서를 고려하시기 바랍니다.

mangle

Type: Boolean Object , Default: {}

기본적으로 mangling 을 키거나 끕니다.(on or off) 객체가 지정되어있는 경우, ast.mangle_names()ast.compute_char_frequency() 을 직접 전달합니다.(동작[behavior] 명령행 모방) 모든 옵션 보기

compress

Type: Boolean Object , Default: {}

기본적으로 compress 을 키거나 끕니다.(on or off) 객체가 지정되어있는 경우, UglifyJS.Compressor() 에 옵션으로 전달됩니다. 모든 옵션 보기

beautify

Type: Boolean Object , Default: false

생성된 소스코드의 beautification(정렬해서 보기) 를 켭니다. UglifyJS.OutputStream()로 객체를 병합하고 옵션과 함께 전달됩니다. 모든 옵션 보기

expression

Type: Boolean , Default: false

프로그램보다는 표현식을 분석(json을 통해)합니다.

report

Choices: 'min', 'gzip' , Default: 'min'

gzip 결과와 압축한 보고서 또는 축소한 결과 하나만 보고한다. clean-css 을 사용하여 작업하여 정확하게 볼 수 있지만 gzip 으로 작업하면 작업을 완료하기위히 5-10x 정도 더 오래걸린다.

출력예제

sourceMap

Type: Boolean , Default: false

true의 경우, 소스맵 파일은 dest 파일과 같은 디렉토리에 생성됩니다. 기본적으로 dest 파일과 같은 베이스 이름을 가지고 있지만 .map 확장자을 가지고 있을 것이다.

sourceMapName

Type: String Function , Default: undefined

이름 또는 생성된 소스지도의 위치를 사용자정의 하려면, 원본지도를 작성하는 위치를 표시하는 문자열을 전달해야 합니다. 함수가 제공되는 경우, 목적지는 uglify 인수로 전달되며, 리턴값은 파일명으로 사용된다.

sourceMapIn

Type: String Function , Default: undefined

함수가 제공되는 경우, 목적지는 uglify 인수로 전달되며, 리턴값은 소스맵 이름으로 사용된다. 하나의 소스 파일이 있을 경우에만 의미가 있습니다.

이전의 compilation 으로부터 입력 소스맵의 위치. 예를들면 커피스크립트에서

sourceMapIncludeSources

Type: Boolean , Default: false

sourcesContent 속성과 소스맵에서 소스 파일의 내용을 포함 할 경우 이 플래그를 전달합니다.

sourceMapRoot

Type: String , Default: undefined

이 옵션을 사용하면 소스를 찾을 때 브라우저가 사용하는 루트 URL을 사용자 정의 할 수 있습니다.

절대 URL이 아닌 경우 소스 sourceMapRoot의 앞에 추가한 후, 소스는 소스맵과 관련하여 해석된다.

enclose

Type: Object , Default: undefined

인수/매개 변수 목록을 설정한 클로져에 모든 코드를 감싼다. 둘러싼 객체안의 키-값의 각쌍이 효과적인 인수-매개변수 쌍이다

wrap

Type: String , Default: undefined

아무것도 유출되지 않게 하기 위해 모든 코드를 감싸는 것이 가장 쉬운 방법입니다. 공통 보내기(export)와 글로벌 변수를 사용할 수 있다. wrap의 값은 글로벌 변수 보내기(export) 등을 사용할 수있다.

maxLineLen

Type: Number , Default: 32000

문자의 행 길이를 제한합니다. 이 안전 기능을 비활성화하면 maxLineLen = 0을 전달합니다.

ASCIIOnly

Type: Boolean , Default: false

\uXXXX와 같이 non-ASCII 문자를 인코딩 할 수 있습니다.

exportAll

Type: Boolean , Default: false

wrap을 사용하는 경우 이 export 변수를 통해 모든 전역 함수와 변수를 사용할 수 있도록 합니다.

preserveComments

Type: Boolean String Function , Default: undefined , Options: false 'all' 'some'

주석을 어떤형식으로 남길지 설정합니다.

  • false 모든 주석을 제거합니다.
  • 'all' 모든 주석을 유지합니다.
  • 'some' ! 로 시작하는 주석은 유지합니다. 또는 컴파일러 스타일의 지시문은 유지합니다.(@preserve @license @cc_on)
  • Function 는 자신의 주석을 보존할지 지정합니다. 현재 노드와 현재의 의견을 전달하고 true 또는 false를 반환 할 것으로 예상된다

Type: String , Default: empty string

축소된 출력(output) 에 문자열을 덧붙입니다. 템플릿 문자열(예: <%= config.value %>) 은 자동으로 확장됩니다.

Type: String ,Default: empty string

축소된 출력(output) 에 문자열을 추가합니다. 템플릿 문자열(예: <%= config.value %>) 은 자동으로 확장됩니다.

screwIE8

Type: Boolean , Default: false

인터넷 익스플로러 6~8 까지 단점을 완벽하게 준수하지 않아도 되는 경우 이 플래그를 전달합니다.

mangleProperties

Type: Boolean , Default: false

객체 속성 이름 mangling을 사용할때 이 플래그를 사용하십시오.

reserveDOMProperties

Type: Boolean , Default: false

내장 브라우저 개체 속성을 방지하기 위해 mangleProperties와 함께 이 플래그를 사용하십시오.

exceptionsFiles

Type: Array , Default: []

mangleProperties로 는 변수와 개체 속성의 목록을 포함하는 하나 이상의 JSON 파일을 전달합니다. 파일 구문에 대한 자세한 정보를 원하시면 UglifyJS의 문서를 참조하십시오.

nameCache

Type: String , Default: empty string

uglify의 여러 실행간에 mangling의 기호를 조정하는데 사용하고, 작성할 uglify JSON 캐시 파일의 경로인 문자열. Note: 이 생성된 파일은 exceptionsFiles 파일과 같은 JSON 포맷을 사용한다.

quoteStyle

Type: Integer , Default: 0

따옴표 스타이릉 유지 또는 적용한다.

  • 0 은 바이트 수를 최소화하기 위해 작은 따옴표 나 큰 따옴표를 사용합니다(모두 사용할 때 따옴표를 선호한다)
  • 1 은 작은 따옴표를 사용한다.
  • 2 는 큰 따옴표를 사용한다.
  • 3 은 인용부호를 사용한다.

Usage examples

  • 사용 예

Basic compression

디폴트 옵션을 사용하여 입력 파일을 압축하는 것이다.

// 프로젝트 구성
grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});

No mangling

Specify mangle: 변수와 함수 이름을 변경되는 것을 방지하기 위해 false 를 사용.

// 프로젝트 구성
grunt.initConfig({
  uglify: {
    options: {
      mangle: false
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

예약 식별자

mangle 옵션의 배열을 제외하고 손길이 닿지 않는 식별자를 지정할 수 있습니다.

// 프로젝트 구성
grunt.initConfig({
  uglify: {
    options: {
      mangle: {
        except: ['jQuery', 'Backbone']
      }
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

Source maps

sourceMap 옵션을 true로 설정하여 소스 맵을 생성합니다. 생성된 소스맵은 대상 파일과 같은 디렉토리에 있을 것입니다. 그것의 이름은 .map 확장자를 가진 대상 파일의 기본 이름이 될 것입니다. sourceMapName 속성이 이러한 기본값을 재정의합니다.

// 환경구성
grunt.initConfig({
  uglify: {
    my_target: {
      options: {
        sourceMap: true,
        sourceMapName: 'path/to/sourcemap.map'
      },
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

Advanced source maps

sourceMapIncludeSourcestrue 로 설정하면 맵에 소스를 직접 포함합니다. 이전 편집에서 소스맵을 포함하려면 sourceMapIn 옵션의 값으로 전달합니다.

// 환경구성
grunt.initConfig({
  uglify: {
    my_target: {
      options: {
        sourceMap: true,
        sourceMapIncludeSources: true,
        sourceMapIn: 'example/coffeescript-sourcemap.js', // input sourcemap from a previous compilation 
      },
      files: {
        'dest/output.min.js': ['src/input.js'],
      },
    },
  },
});

자세한 내용은 UglifyJS SourceMap 문서를 참조하십시오.

Turn off console warnings

콘솔 경고를 해제

true 는 압축 옵션의 일부로 * 기능은 콘솔에서 호출하는 것을 무시합니다.

// 환경구성
grunt.initConfig({
  uglify: {
    options: {
      compress: {
        drop_console: true
      }
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

Beautify

Specify beautify: 디버깅이나 문제 해결을 위해 코드를 아릅답게 하는 경우 true 로 지정. UglifyJS.OutputStream() 로 직접 전달하면 다른 출력 옵션을 구성하는 개체를 전달한다.

자세한 것은 UglifyJS Codegen 문서 를 참조하십시요.

출력 코드가 정리되어 표현되길 원하면, 옵션에서 수동으로 beautify: true 로 설정하면 명시적으로 코드를 잘 정리되어 표현되어 집니다.

// 환경구성
grunt.initConfig({
  uglify: {
    my_target: {
      options: {
        beautify: true
      },
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    },
    my_advanced_target: {
      options: {
        beautify: {
          width: 80,
          beautify: true
        }
      },
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

이 예에서, uglify:my_target 의 객체 구성은 banner 템플릿 문자열을 참조하여 생성된 banner 를 앞쪽에 추가합니다. 그 속성이 오늘날짜(pkg 구성 속성을 통해 사용할 수 있습니다.)는 package.json 파일에서 가져온 값입니다.

참고 : 외부 JSON 파일을 사용할 필요가 없습니다. 이 설정에서 PKG 객체에서 인라인으로 만드는것도 유효합니다. JSON 파일이 있는경우 이것을 참조할 수 있습니다.

// 환경구성
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %> */'
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

Conditional compilation

-조건부 컴파일

UglifyJS 조건부 컴파일을 활성화 할 수 있습니다. 이것은 일반적으로 제품 빌드에 디버그 코드 블록을 제거하는 데 사용됩니다.

자세한 내용은 UglifyJS 글로벌 정의 설명서를 참조하십시오.

// 환경구성
grunt.initConfig({
  uglify: {
    options: {
      compress: {
        global_defs: {
          "DEBUG": false
        },
        dead_code: true
      }
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

Compiling all files in a folder dynamically

  • 동적 폴더에있는 모든 파일을 컴파일

이 구성은 동적으로 압축 파일을 만드는 것입니다.

// 환경구성
grunt.initConfig({
  uglify: {
    my_target: {
      files: [{
          expand: true,
          cwd: 'src/js',
          src: '**/*.js',
          dest: 'dest/js'
      }]
    }
  }
});

Turn on object property name mangling

  • 객체 속성 이름인 mangling 기능을 켜기

이 구성은 객체 속성 이름인 mangle 기능을 키면 브라우져에 내장된 객체 속성으로 압축(mangle)하지 않습니다 또한 myExceptionsFile.json 에 변수와 객체속성 목록이 압축되어 변경되어 집니다 더 많은 정보는 UglifyJS의 문서를 참조하십시오.

// 환경구성
grunt.initConfig({
  uglify: {
    options: {
      mangleProperties: true,
      reserveDOMCache: true,
      exceptionsFiles: [ 'myExceptionsFile.json' ]
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

Turn on use of name mangling cache

  • 이름 변환(name mangling) 캐시 사용 기능 켜기

출력에 uglify 파일 간의 변환된 문자를 조정하기 위해 이름 mangling에 캐시 사용 기능을 켭니다. 옵션으로 제공되는 이름의 JSON 캐시 파일을 생성합니다. 참고: 생성된 exceptionsFiles 파일은 같은 json 포맷을 사용합니다.

// 환경구성
grunt.initConfig({
  uglify: {
    options: {
      nameCache: '.tmp/grunt-uglify-cache.json',
    },
    my_target: {
      files: {
        'dest/output1.min.js': ['src/input1.js'],
        'dest/output2.min.js': ['src/input2.js']
      }
    }
  }
});

릴리즈 내역





신고

댓글