Grunt-작업 구성

Gruntfile.js 파일 에서 Grunt에 대한 프로젝트 별 구성 데이터를 정의 할 수 있습니다 .

Grunt 구성

작업 구성 데이터는 grunt.initConfig () 메서드를 사용하여 Gruntfile 에서 초기화 할 수 있습니다 . grunt.initConfig () 함수 내 에서 package.json 파일에서 구성 정보를 가져옵니다. 구성에는 다음과 같은 작업이 포함됩니다.properties 및 임의의 데이터.

grunt.initConfig({
   jshint: {
      // configuration for jshint task
   },
   cssmin: {
      // configuration for cssmin task
   },
   // Arbitrary non-task-specific properties
   my_files: ['dir1/*.js', 'dir2/*.js'],
});

작업 구성 및 대상

작업을 실행할 때 Grunt는 작업 이름 속성에서 구성을 찾습니다. 다음과 같이 여러 구성 및 대상 옵션으로 작업을 정의합니다.

grunt.initConfig({
   jshint: {
      myfile1: {
         // configuration for "myfile1" target options
      },
      myfile2: {
         // configuration for "myfile2" target options
      },
   },
   cssmin: {
      myfile3: {
         // configuration for "myfile3" target options
      },
   },
});

여기서 jshint 작업에는 myfile1myfile2 대상이 있고 cssmin 작업에는 myfile3 대상이 있습니다. grunt jshint를 실행할 때 지정된 대상의 구성을 처리하기 위해 작업과 대상을 모두 반복합니다.

옵션

작업 기본값을 재정의하는 작업 구성 내 에서 옵션 속성을 정의합니다 . 각 대상에는 작업 수준 옵션을 재정의하는 옵션 속성이 포함되어 있습니다. 다음 형식을 갖게됩니다.

grunt.initConfig({
   jshint: {
      options: {
         // task-level options that overrides task defaults
      },
      myfile: {
         options: {
            // "myfile" target options overrides task defaults
         },
      },

      myfile1: {
         // there is no option, target will use task-level options
      },
   },
});

파일

Grunt는 작업이 작동해야하는 파일을 지정하기위한 몇 가지 아이디어를 제공하고 src-dest 파일 매핑 을 지정하는 다른 방법을 사용 합니다. 다음은 srcdest 매핑 에서 지원하는 추가 속성 중 일부입니다.

  • filter− 일치하는 src 파일 경로 를 지정 하고 true 또는 false 값을 반환 하는 함수입니다 .

  • nonull − true로 설정하면 일치하지 않는 패턴을 정의합니다.

  • dot − 마침표 또는 기타로 시작하는 파일 이름과 일치합니다.

  • matchBase − 경로의 기본 이름과 슬래시가 포함 된 패턴을 일치시킵니다.

  • expand − src-dest 파일 매핑을 처리합니다.

컴팩트 형식

그것은 읽기 전용 작업에 사용만을 필요로 할 수있다 대상 당 SRC-이명 령 파일 매핑 지정 SRC 특성없이 이명 령 속성을.

grunt.initConfig({
   jshint: {
      myfile1: {
         src: ['src/file1.js','src/file2.js']
      },
   },
   cssmin: {
      myfile2: {
         src: ['src/file3.js','src/file4.js'],
         dest: 'dest/destfile.js',
      },
   },
});

파일 개체 형식

속성 이름이 dest 파일이고 값이 src 파일 인 대상별로 src-dest 파일 매핑을 지정 합니다.

grunt.initConfig({
   jshint: {
      myfile1: {
         files: {
            'dest/destfile.js':['src/file1.js','src/file2.js'],
            'dest/destfile1.js':['src/file3.js','src/file4.js'],
         },
      },
      myfile2: {
         files: {
            'dest/destfile2.js':['src/file22.js','src/file23.js'],
            'dest/destfile21.js':['src/file24.js','src/file25.js'],
         },
      },
   },
});

파일 배열 형식

매핑 별 추가 속성을 사용하여 대상별 src-dest 파일 매핑을 지정합니다.

grunt.initConfig({
   jshint: {
      myfile1: {
         files: [
            {src:['src/file1.js','src/file2.js'],dest:'dest/file3.js'},
            {src:['src/file4.js','src/file4.js'],dest:'dest/file5.js'},
         ],
      },
      myfile2: {
         files: [
            {src:['src/file6.js','src/file7.js'],dest:'dest/file8/', nonull:true},
            {src:['src/file9.js','src/file10.js'],dest:'dest/file11/', filter:'isFalse'},
         ],
      },
   },
});

이전 형식

의 최종 도착로서의 목표 파일 형식은 대상 파일 경로가 대상의 이름입니다 멀티 태스킹의 존재 전에 있었다. 다음 형식은 더 이상 사용되지 않으며 코드에서 사용되지 않습니다.

grunt.initConfig({
   jshint: {
      'dest/destfile2.js':['src/file3.js','src/file4.js'],
      'dest/destfile5.js':['src/file6.js','src/file7.js'],
   },
});

커스텀 필터 기능

filter 속성 을 사용하여 세부적으로 대상 파일을 도울 수 있습니다 . 다음 형식은 실제 파일과 일치하는 경우에만 파일을 정리합니다.

grunt.initConfig({
   clean: {
      myfile:{
         src: ['temp/**/*'],
         filter: 'isFile',
      },
   },
});

글 로빙 패턴

글 로빙은 파일 이름을 확장하는 것을 의미합니다. Grunt는 내장 된 node-globminimatch 라이브러리 를 사용하여 globbing을 지원합니다 . 글 로빙 패턴에는 다음 사항이 포함됩니다.

  • * 는 모든 문자와 일치하지만 / 와는 일치하지 않습니다 .
  • ? 단일 문자와 일치하지만 / 와는 일치하지 않습니다 .
  • **/를 포함한 여러 문자와 일치합니다 .
  • {}는 쉼표로 구분 된 "or"표현식 목록을 지정합니다.
  • ! 처음에 패턴 일치를 무효화합니다.

예를 들어-

{src: 'myfile/file1.js', dest: ...} // it specifies the single file

{src: 'myfile/*.js', dest: ...} //it matches all the files ending wth .js

{src: 'myfile/{file1,file2}*.js', dest: ...} //defines the single node glob pattern

{src: ['myfile/*.js', '!myfile/file1.js'], dest: ...} // all files will display in alpha

// order except for file1.js

동적으로 파일 개체 빌드

개별 파일로 작업 할 때 추가 속성을 사용하여 동적으로 파일 목록을 작성할 수 있습니다. 당신이 설정할 때expand 속성을 true로 설정하면 다음 속성 중 일부를 사용할 수 있습니다.

  • cwd 는 모든 src 를이 경로에 일치 시킵니다 .

  • srccwd에 상대적으로 일치시킬 패턴과 일치합니다 .

  • dest 속성은 대상 경로 접두사를 지정합니다.

  • ext 는 기존 확장을 대상 경로 에서 생성 된 값으로 대체 합니다.

  • extDot 는 확장을 나타내는 기간이있는 위치를 나타냅니다. 그것은 중 하나를 사용하여 첫 번째 기간 또는 마지막 기간; 기본적으로 첫 번째 기간으로 설정됩니다.

  • flatten대상 경로 에서 모든 경로 부분을 제거합니다 .

  • rename 은 새 대상 및 파일 이름을 포함하는 문자열을 지정합니다.

Rename 속성

문자열을 반환하는 고유 한 JavaScript 함수이며 이름 바꾸기에 문자열 값을 사용할 수 없습니다. 다음 예에서 복사 작업은 README.md의 백업을 생성합니다.

grunt.initConfig({
   copy: {
      backup: {
         files: [{
            expand: true,
            src: ['docs/README.md'],    // creating a backup of README.md
            rename: function () {       // specifies the rename function
               return 'docs/BACKUP.txt'; // returns a string with the complete destination
            }
         }]
      }
   }
});

템플릿

<% %> 구분 기호를 사용하여 템플릿을 지정할 수 있습니다 . 구성에서 읽을 때 자동으로 확장됩니다. 그것은 두 가지 유형의 속성을 포함합니다-

  • <%= prop.subprop %>속성은 문자열 값, 배열 및 기타 개체를 참조 할 수있는 구성에서 prop.subprop 의 값을 확장하는 데 사용됩니다 .

  • <% %> 속성은 제어 흐름 또는 루핑에 사용되는 인라인 JavaScript 코드를 실행합니다.

예를 들어-

grunt.initConfig({
   concat: {
      myfile: {
         options: {
            banner: '/* <%= val %> */\n',
         },
         src: ['<%= myval %>', 'file3/*.js'],
         dest: 'build/<%= file3 %>.js',
      },
   },
   // properties used in task configuration templates
   file1: 'c',
   file2: 'b<%= file1 %>d',
   file3: 'a<%= file2 %>e',
   myval: ['file1/*.js', 'file2/*.js'],
});

외부 데이터 가져 오기

package.json 파일 에서 외부 데이터를 가져올 수 있습니다 . grunt- contrib- uglify 플러그인은 소스 파일을 축소 하는 데 사용할 수 있으며 메타 데이터를 사용하여 배너 주석을 생성합니다. grunt.file.readJSONgrunt.file.readYAML 을 사용하여 JSON 및 YAML 데이터를 가져올 수 있습니다 .

예를 들어-

grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),
   uglify: {
      options: {
         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      dist: {
         src: 'src/<%= pkg.name %>.js',
         dest: 'dist/<%= pkg.name %>.min.js'
      }
   }
});