A, 꿀꿀 모듈 소개

툴툴 플러그인하는 NPM 환경에서 도구를 자동화. 이러한 압축, 컴파일, 단위 테스트, linting 및 기타 자동화 된 도구로 반복 반복적 인 작업의 필요성은, 당신의 노동을 줄이고 작업을 단순화 할 수 있습니다. Gruntfile.js 파일 구성에 따라 툴툴 거리는 소리 작업 모듈.
다음 명령은 package.json에 정의 된 경우 :

"scripts": {
    "build": "npm install && grunt"
}

NPM 실행 빌드를 실행하면 정의 된 일부 모듈 devDependencies를 설치하는 것이기 때문에, 실행 NPM 실행 빌드이 명령은 다음을 수행하는 것과 같습니다

NPM 설치 툴툴-CLI -g
NPM 설치
꿀꿀 거리는 소리

두 구조를 gruntfile.js :

"래퍼"기능
프로젝트 및 작업 구성
플러그인로드 툴툴 거리는 소리 작업
사용자 지정 작업

기능 "래퍼"세,

각 Gruntfile.js (그리고 꿀꿀 플러그인),이 기능에 배치해야합니다 그런트 코드를 작성했습니다 같은 형식을 따릅니다 :

module.exports = function(grunt){
         //do grunt-related things in here
}

넷째, 프로젝트 및 작업 구성

지루하고 고된 작업의 대부분은 특정 구성 데이터에 따라, 우리는 매개 변수 grunt.initConfig의 방법으로 그런트 임무를 구성해야합니다.
이 방법은 매개 변수 grunt.initConfig JSON 개체입니다, 당신은 구성 개체에 데이터를 저장할 수 있습니다. 그 자체가 자바 스크립트이기 때문에 또한, 여기에 당신은 유효한 JS 코드를 사용할 수 있습니다. 당신도 사용할 수 있습니다 <%%> 템플릿 속성이 이미 예를 들어, 구성되어있는 기준에 문자열 :

// 项目和任务配置
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'), //获取 package.json 中的元数据(js代码)
  proj:{
    name:'hello',
    description:'a hello demo'
  },
  hello: {
    options: {
      name: '<%= proj.name %>'  //用<% %>模板字符串匹配hello
    },
    srcs: ['1.txt', '2.txt']
  }
});

예를 들어 grunt.initConfig 방법 속성, 작업 모듈을 사용할 수 grunt.config 접근 방법으로 배열 :

grunt.config("proj.name");

또한, 고된 작업 모듈을 자동으로 구성 개체 및 기능 구성의 오브젝트 구성 태스크의 속성 "안녕하세요"와 실행에 대응하는 원하는 구성에 사용되는 헬로 태스크 정의로서 속성 명에 대응하는 작업에 따른 작업의 이름을 추출 데이터입니다.

다섯째, 플러그 부하 고된 작업

노력의 중복을 줄이기 위해, 우리는 플러그인 작업을 기존로드 할 수 있습니다.

자신의 개인 꿀꿀 플러그를로드 (1)

일부 작업 사용자 정의 스크립트는 grunt.loadTasks의 방법으로 디렉토리 지정된 디렉토리에서 모든 꿀꿀 작업 스크립트를로드, 같은 디렉토리에 배치 할 수 있습니다.

2.로드 툴툴 플러그인 NPM 출시

마찬가지로 이러한 일반적인 작업과 꿀꿀-있는 contrib-복사 꿀꿀-있는 contrib을-추하게 플러그인 꿀꿀의 형태로 개발되었다 나와서, 파일 package.json에 나열된 사용 플러그인의 필요성만큼, NPM 공공 도서관에 릴리스되었습니다 의존성과 설치 후 설치 NPM 통과, 직접 작업을로드 할 수 있습니다.

// 加载能够提供"copy"任务的插件。
grunt.loadNpmTasks('grunt-contrib-copy');

모든 플러그 "grunt-"시작 3. 직접 부하

로드 꿀꿀-작업에이 NPM은 플러그인 종속성 목록 "grunt-"시작하는 모든 플러그인을로드 할 수 있습니다.
종속성에 열을 사용한 다음에 Gruntfile.js에 전화를 의지 플러그인을 필요로 "Grunt-"가 시작됩니다.

//Load grunt tasks from NPM packages
load-grunt-tasks

식스 사용자 지정 작업

1. 직접 작업 동작을 정의

grunt.registerTask('hello', 'Show some msg', function() {
  console.log(this.options().name); //输出hello
});

작업 목록을 정의합니다

작업이 일련의 작업의 조합으로서 정의 될 수 있고, 작업이 시퀀스 순서로 수행 될 수있다.

grunt.registerTask('dothings', 'copy and Show some msg', ['copy','hello']);

기본 작업을 정의합니다

그런트 기본, 기본 작업을 정의 할 수 있도록함으로써 하나 개 이상의 작업을 수행 할 수 있습니다. 명령이 꿀꿀 작업을 지정하지 않고 실행되면 작업을 수행하는 데 기본 설정됩니다. 아래에서 정의하고 실행 툴툴 툴툴 헬로을 수행하는 것과 같다.

grunt.registerTask('default', ['hello']);

복잡한 작업을 정의 (4)

데이터가 처리 될 : registerMultiTask 방법은 작업이 타겟으로서 다시 정의 된 속성에 더하여, 복합 속성 grunt.initConfig 프로세스 구성 옵션에있을 것, 복잡한 작업을 정의 할 수있다.

module.exports = function(grunt) {
    grunt.initConfig({
        Log: {
            options: {
                sep: ';'
            },
            srcs: ['1.txt', '2.txt'],
            dests: ['d1.txt', 'd2.txt']
        }
    });
    grunt.registerMultiTask("Log", function() {
        var options = this.options({ sep: '&' });
        console.log(this.target); 
        console.log(this.data.join(options.sep));
    });
};

꿀꿀 로그 출력을 수행합니다 :

"SRCS 로그"(로그) 작업 실행
SRCS
1.TXT, 2.txt
실행 "로그 : dests은"(로그) 작업은
dests
d1.txt을, d2.txt을

작업 행동 요령을 정의

1. 내부 작업을 다른 작업을 수행 할 수 있습니다.

grunt.registerTask('mytask', function() {
  grunt.task.run('task1', 'task2');
  // Or:
  grunt.task.run(['task1', 'task2']);
});

비동기 작업을 정의합니다

grunt.registerTask('mytask', function() {
  var done = this.async();
  //do something
  done();
});

3. 작업이 실패하면, 이후의 모든 작업이 종료됩니다

작업이 실패 할 경우에 실행이 실패 태스크에서, 모든 후속 작업이 종료되고, 현재 작업 실행 실패는, 일반적으로, 복수의 작업은 순차적으로 실행되는 것을 나타내는 false를 반환. 오류가있는 경우 예, 후속 임무는 작업에 --force 명령 행을 통해 계속합니다.

선행 작업 상태를 확인하십시오

일부 작업은 다른 작업의 성공적인 실행에 따라 달라질 수 있습니다. grunt.task.requires 방법으로 전임자가 실행되고, 실패하지 않았다 여부를 확인합니다.

자바 스크립트 모듈 개발 2 - 상세 Gruntfile.js