Grunt 시작 안내서

링크: http://www.hulufei.com/post/grunt-introduction
설치 하 다.

이전에 grunt 를 설치 한 적 이 있다 면 마 운 트 해제 npm uninstall -g grunt

grunt 운영 도구 설치 npm install -g grunt-cli

하나의 grunt 프로젝트 는 두 개의 파일 이 필요 합 니 다. package. json 과 Gruntfile. js, 전 자 는 nodejs 패키지 관리 에 사 용 됩 니 다. 예 를 들 어 grunt 플러그 인 설치, 후 자 는 grunt 프로필, 설정 작업 또는 사용자 정의 작업 입 니 다.

씨 는 package. json 파일 이 되 어 grunt 프로젝트 의 디 렉 터 리 에서 npm install 을 실행 하면 빈 package. json 을 만 들 수 있 습 니 다.

현재 디 렉 터 리 에 grunt 설치: npm install grunt -- save - dev

Gruntfile. js 템 플 릿 파일 을 다시 만 듭 니 다. 이 럴 때 grunt - init 또는 직접 손 으로 쓸 수 있 습 니 다.

module.exports = function(grunt) {
    grunt.initConfig({
        //     
    });
    //     
    grunt.loadNpmTasks('grunt-contrib-uglify');
    //      
    grunt.registerTask('default', ['uglify']);
});

플러그 인 에 대하 여
grunt 는 서로 다른 플러그 인 을 이용 하여 서로 다른 작업 을 수행 합 니 다. 예 를 들 어 uglifyJS 로 js 에 대응 하 는 플러그 인 을 압축 하 는 것 이 바로 grunt - contrib - uglify 입 니 다.
플러그 인 사용 (grunt - contrib - uglify 를 예 로 들 면):

grunt 프로젝트 디 렉 터 리 에 해당 하 는 플러그 인 설치 npm install grunt-contrib-uglify --save-dev

Gruntfile. js 에 플러그 인 불 러 오기 grunt.loadNpmTasks('grunt-contrib-uglify')

Gruntfile. js 에 해당 하 는 플러그 인 작업 을 설정 하고 압축 할 js 파일

을 지정 합 니 다.

여기, 이곳 에서 사용 가능 한 플러그 인 을 볼 수 있 습 니 다. 기본적으로 대부분의 작업 은 생각 나 거나 생각 하지 못 한 플러그 인 을 찾 을 수 있 습 니 다. 해 야 할 일 을 하면 척 합 니 다.

이후 grunt 프로젝트 의 설정 을 다시 사용 하려 면 package. json 과 Gruntfile. js 두 파일 만 있 으 면 npm install 에 의존 하 는 모든 플러그 인 을 설치 할 수 있 습 니 다.

하나의 플러그 인 은 하나의 작업 에 대응 하 는 것 입 니 다. 일반적으로 모든 플러그 인 은 아래 에서 말 할 작업 설정 규칙 을 따 릅 니 다. 많은 플러그 인의 문서 가 상세 하지 않 기 때문에 플러그 인 이 제공 하 는 예제 에 따라 이 규칙 들 을 사용 하여 더 많은 설정 가능성 이 있 는 지 볼 수 있 습 니 다.

임무 에 대하 여
작업 은 두 가지 로 나 뉜 다. "Basic" Tasks 와 "Multi" Tasks

Multi - tasks 는 이른바 target (목표 디 렉 터 리) 이 있 습 니 다. 예 를 들 어 아래 의 concat 작업 은 foo 와 bar 두 개의 targets 가 있 고 uglify 작업 은 bar 라 는 target

    grunt.initConfig({
        concat: {
            foo: {
                //      foo            。
            },
            bar: {
                //      bar            。
            }
        },
        uglify: {
            bar: {
                //       bar            
            }
        }
    });

이 있 습 니 다.
target 의 이름 은 임의로 지정 할 수 있 습 니 다. target 은 지정 한 작업 을 특정한 설정 으로 실행 하기 위해 서 입 니 다. 예 를 들 어 grunt concat: foo 또는 grunt concat: bar 는 각각 foo 또는 bar 가 지정 한 concat 작업 을 실행 합 니 다.grunt concat 만 실행 하면 모든 concat 아래 targets 를 순서대로 실행 합 니 다.그러나 작업 의 이름, 예 를 들 어 concat 와 uglify 는 고정 적 이 고 해당 하 는 플러그 인 이 지정 하 며 플러그 인 사용 문서 에 설명 이 있 습 니 다.모든 multi task 에는 최소한 하나의 target 이 있어 야 합 니 다.

설정 할 필요 가 없 는 작업 은 Basic Task 입 니 다. Basic Task 를 정의 할 수 있 습 니 다. grunt.registerTask(taskName, [description, ] taskFunction)

// foo task
grunt.register('foo', function(a, b) {
    // do something
});

이렇게 실행: grunt foo 또는 grunt foo:a:b a 와 b 는 foo 에 전달 하 는 매개 변수 입 니 다.

템 플 릿 변수
grunt 는 유사 한 <%= k.sub.k %> 형식 으로 설정 한 다른 속성 값 을 삽입 할 수 있 습 니 다.
Options
하나의 작업 설정 에서 option 속성 은 기본 설정 을 덮어 쓸 수 있 습 니 다. 또한 모든 target 은 자신의 option 속성 을 가 질 수 있 습 니 다.target 의 option 우선 순위 가 task 보다 높 습 니 다.options 는 선택 할 수 있 습 니 다.

grunt.initConfig({
    concat: {
        options: {
            // Task-level options may go here, overriding task defaults.
        },
        foo: {
            options: {
                // 'foo' target options may go here, overriding task-level options.
            },
        },
        bar: {
            // No options specified; this target will use task-level
            options.
        },
    },
});

모든 미 션 에 option 이 있 는 것 은 아 닙 니 다.
지정 파일
이것 은 grunt 를 처음 접 했 을 때 가장 당 황 스 러 웠 던 부분 일 것 입 니 다. 이렇게 많은 플러그 인 을 생각해 보 세 요. 모든 플러그 인 은 적용 할 파일 을 지정 해 야 합 니 다. 그런데 어떻게 보면 모든 플러그 인 은 자신 이 파일 을 설정 하 는 방식 이 있 는 것 같 습 니 다. 설정 방식 이 편 해 보이 기 때문에 항상 믿 을 수 없다 고 생각 합 니 다.앞서 언급 한 바 와 같이 사실은 통용 되 는 규칙 이 있다.
Grunt 는 src - dest 형식의 파일 맵 을 정의 하 는 다양한 형식 을 제공 합 니 다.모든 multi - task 는 이 몇 가지 형식 을 지원 합 니 다.파일 맵 은 3 가지 형식 으로 나 눌 수 있 습 니 다. Compact Format, Files Object Format 과 File Array Format 입 니 다. 그 중에서 "Compact" 와 "File Array" 두 가지 형식 은 추가 속성 을 제공 합 니 다.

filter 여과, fs. Stats 방법 으로 정 의 된 이름, 예 를 들 어 isFile, isDirectory 또는 사용자 정의 함수 가 원본 파일 이름 을 매개 변수 로 받 아들 여 되 돌려 주기 true or false

nonull Retain src patterns even if they fail to match files. Combined with grunt's --verbose flag, this option can help debug file path issues.

matchBase Patterns without slashes will match just the basename part.

... (나머지 몇 개 는 문 서 를 보 세 요)

또 하나의 동적 파일 목록 생 성 (일괄 일치 파일)

다음 예제 의 속성 명 src 과 dest, files 은 모두 고정된 key 명 이 므 로 처음부터 고민 할 필요 가 없다.
Compact Format
이러한 형식 은 하나의 src - dest 만 하나의 target 에 비 추 는 것 을 허용 합 니 다. src 속성 만 필요 합 니 다. dest 가 없 을 수 있 습 니 다. 이런 형식 은 일반적으로 읽 기 전용 task 에 사 용 됩 니 다. 예 를 들 어 jshint.

```javascript
grunt.initConfig({
  jshint: {
    foo: {
      src: ['src/aa.js', 'src/aaa.js']
    },
  },
  concat: {
    bar: {
      src: ['src/bb.js', 'src/bbb.js'],
      dest: 'dest/b.js',
    },
  },
});
```

Files Object Format
이 형식 은 여러 개의 src - dest 가 여러 target 에 대응 하 는 것 을 지원 합 니 다. 속성 명 (key) 은 출력 할 대상 파일 이름 이 고 value 값 은 원본 파일 목록 입 니 다.추가 속성 은 지원 되 지 않 습 니 다

```javascript
grunt.initConfig({
  concat: {
    foo: {
      files: {
        'dest/a.js': ['src/aa.js', 'src/aaa.js'],
        'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
      },
    },
    bar: {
      files: {
        'dest/b.js': ['src/bb.js', 'src/bbb.js'],
        'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
      },
    },
  },
});
```

Files Array Format
위 와 같이 추가 속성 만 지원 합 니 다.

```javascript
grunt.initConfig({
  concat: {
    foo: {
      files: [
        {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
        {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
      ],
    },
    bar: {
      files: [
        {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
        {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
      ],
    },
  },
});
```

어댑터 지원
nodejs 내 장 된 node - glob 라 이브 러 리 에서 지원 합 니 다. 위 에서 말 한 각종 파일 설정 에 사용 할 수 있 습 니 다.

* 모든 문자 와 일치 합 니 다. /

?단일 문자 일치, 제외 /

* * 모든 문자 와 일치 하기 때문에 디 렉 터 리 경로 에 사용 합 니 다

{} 쉼표 분할 의 "또는" 동작 (쉼표 뒤에 빈 칸 이 없 음)

! 일치 하 는 것 제외

// You can specify single files:
{src: 'foo/this.js', dest: ...}
// Or you can generalize with a glob pattern:
{src: 'foo/th*.js', dest: ...}

// This single node-glob pattern:
{src: 'foo/{a,b}*.js', dest: ...}
// Could also be written like this:
{src: ['foo/a*.js', 'foo/b*.js'], dest: ...}

// All files in alpha order, but with bar.js at the end.
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...}

// Templates may be used in filepaths or glob patterns:
{src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'}

동적 생 성 파일 이름

expand 를 true 로 설정 하고 아래 옵션 열기

cwd 모든 src 가 지정 한 파일 은 이 속성 이 지정 한 경로

에 비해

src 가 일치 하 는 경로, 상대 적 으로 cwd

dest 생 성 대상 경로 접두사

ext 생 성 된 대상 파일 접 두 사 를 이 속성 으로 바 꿉 니 다

flatten 생 성 된 dest 의 경로 부분 을 모두 삭제 합 니 다

rename 함 수 는 일치 하 는 파일 이름 을 받 아들 이 고 일치 하 는 대상 위치 와 새로운 대상 경 로 를 되 돌려 줍 니 다

grunt.initConfig({
    minify: {
        dynamic_mappings: {
            // Grunt will search for "**/?.js" under "lib/" when the "minify" task runs 
            files: [
                {
                    expand: true,     // Enable dynamic expansion.
                    cwd: 'lib/'       // Src matches are relative to this path.
                    src: ['**/?.js'], // Actual pattern(s) to match.
                    dest: 'build/',   // Destination path prefix.
                    ext: '.min.js',   // Dest filepaths will have this extension.
                }
            ]
        }
    }
});

사용자 정의 작업
설정 가 져 오기 / 설정 (템 플 릿 변수)

json 프로필 을 읽 을 수 있 습 니 다: config: grunt. file. readJSON ('config. json')

json 대상 의 속성 가 져 오기: grunt. config ('config. key. subkey')

대응 하 는 템 플 릿 변수: '<% = config. key. subkey% >'

설정 세그먼트: grunt. config ('config', 'value')

작업 설정 을 동적 으로 변경 하고 작업 을 반복 합 니 다.
grunt 의 작업 은 하나의 대기 열 에 넣 어 순서대로 실 행 됩 니 다. 그러나 대기 열 자 체 는 비동기 로 실 행 됩 니 다. 따라서 다음 방법 은 예상 한 출력 과 같 지 않 습 니 다.

grunt.registerTask('demo', function() {
    for (var i = 0; i < 5; i++) {
        grunt.task.run('t');
    }
    //      5 `t`        
    //         ， `t`      
    console.log('run after t');
    //   5 `t`          `final`  
    grunt.task.run('final');
});

동적 변경 작업 설정 은 템 플 릿 변 수 를 이용 하여 할 수 있 습 니 다. 위 에서 말 한 비동기 이기 때문에 순환 에서 템 플 릿 변수 에 값 을 부여 할 수 없고 추가 로 작업 을 해서 설정 을 받 아들 여야 합 니 다.

//           
t: {
    target: 'some <%= param %>'
}
//    demo         t  ，      param
grunt.registerTask('demo', function() {
    for (var i = 0; i < 5; i++) {
        //             
        grunt.task.run('t_wrapper:' + i);
    }
});
//   `t`     
grunt.register('t_wrapper', function(i) {
    grunt.config('param', i);
    grunt.task.run('t');
});

또 하나의 방법 은 새로운 target 을 복제 한 후에 이 cloned target 의 설정 을 직접 변경 할 수 있 습 니 다.
grunt. config 와 grunt. option 의 차이grunt.config 상기 와 같이 템 플 릿 변 수 를 동적 으로 변경 할 수 있 습 니 다. 그러나 grunt.option 이렇게 할 수 없습니다. 설정 에서 직접 사용 grunt.option 하면 option 실행 할 때 이미 확정 되 었 습 니 다. 더 이상 변경 할 수 없습니다. 만약 에 이렇게 설정 하면 t: { target: 'some ' + grunt.option('param') } javascript
실행 grunt t --param=0 하면 target 대응 은 'some 0' 입 니 다. grunt.option(param, 1) 을 통 해 설정 을 변경 할 수 없습니다 grunt.option 와 grunt.config 는 작업 사이 에 정 보 를 공유 할 수 있 지만 option 추가 작업 파 라미 터 를 받 아들 일 수 있 습 니 다.
출력 텍스트 색상 설정
문자열 뒤에 색상 을 직접 누 르 십시오: grunt.log('test color'.green)레 퍼 런 스

Grunt API

gruntjs

workflow-vips

만약 당신 이 Grunt 에 익숙 하 다 면 Yeoman 을 보 러 가면 더 많은 영감 을 줄 수 있 을 것 입 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

자체 서버에서 platex를 지원하는 sharelatex 환경 구축

일본어로 정리해 써 있는 사이트가 적었으므로 비망록으로서 쓰고 있습니다. 이쪽도 모르는 것이 많기 때문에 정정이나 코멘트 해 주시면 고맙습니다. sharelatex 환경 구축 sharelatex 일본어 TeXLive...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Grunt 시작 안내서

좋은 웹페이지 즐겨찾기