전단 개발 신기: grunt 빠 른 입문

grunt 가 뭐 예요?
grunt 는 nodejs 기반 task runner 입 니 다. 쉽게 말 하면. net 플랫폼 과 유사 한 msbuild 및 자바 플랫폼 의 maven 입 니 다.
grunt 는 무엇 을 할 수 있 습 니까?
grunt 는 프로젝트 에서 반복 되 는 작업, 예 를 들 어 압축, 문법 검사, 컴 파일 (예 를 들 어 LESS 예비 처리, coffeescript 컴 파일), 유닛 테스트 등 을 더욱 간단하게 할 수 있 습 니 다.
설치 하 다.
grunt 는 node. js 를 기반 으로 하기 때문에 우 리 는 먼저 node. js 와 node. js 의 패키지 관리 도구 npm 를 설치 해 야 합 니 다.
windows 플랫폼 에서 NODE. JS 에서 MSI 설치 패 키 지 를 공식 적 으로 다운로드 하면 node. js 와 npm 를 직접 설치 할 수 있 습 니 다.
Linux 플랫폼 에서 일부 발행 판 소프트웨어 소스 의 node. js 버 전 은 비교적 낮 게 하려 고 하기 때문에 grunt 0.4 는 node. js 버 전 을 > = 0.8.0 으로 요구 하기 때문에 저 는 컴 파일 설 치 를 추천 합 니 다.
node. js 를 설치 한 후 npm, grunt, grunt - cli 를 설치 할 수 있 습 니 다.

sudo apt-get -y install npm
sudo npm install -g grunt
sudo npm install -g grunt-cli

Getting started
프로필
grunt 는 Gruntfile. js 와 package. json 두 개의 프로필 이 필요 합 니 다.
Gruntfile.js
Gruntfile. js 는 프로젝트 의 루트 폴 더 에 두 고 grunt 가 실행 할 작업 을 설정 합 니 다.

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

NOTE：
<%% > 템 플 릿 문자열 을 통 해 모든 설정 속성 을 참조 할 수 있 습 니 다. 예 를 들 어 <% = pkg. name% >
grunt 에서 제공 하 는 API 방법 loadnpmTasks 를 통 해 grunt 플러그 인 을 불 러 올 수 있 습 니 다.

grunt.loadNpmTasks('grunt-jsdoc');

package.json
package. json 은 프로젝트 의 메타 데 이 터 를 저장 하 는 데 사 용 됩 니 다. 예 를 들 어 프로젝트 의 버 전, 프로젝트 허가증, 예 를 들 어 MIT, GPL 등, 작가, 프로젝트 의존 라 이브 러 리 등 입 니 다.

{
  "name": "ui",
  "version": "1.0.0",
  "description": "",
  "main": "ui.min.js",
  "directories": {
    "doc": "doc"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": "",
  "keywords": [
    "javascript",
    "ui",
    ""
  ],
  "author": "",
  "license": "BSD",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-jsdoc": "~0.4.0",
    "grunt-contrib-copy": "~0.4.1"
  }
}

grunt 를 사용 하여 새로운 프로젝트 를 만 들 려 고 할 때 npm init 를 사용 하여 기본 적 인 package. json 파일 을 만 들 수 있 습 니 다.
grunt 의 임무
Grunt 는 기본 적 인 Task 와 MultiTasks 두 가지 작업 만 지원 합 니 다.이 두 가지 차이 점 은 Basic Task 의 작업 설정 은 하나 이 고 MultiTasks 의 작업 설정 은 여러 개 입 니 다.
기본적으로 MultiTasks 에서 사용 할 대상 설정 이 지정 되 어 있 지 않 으 면 실제 작업 을 수행 할 때 grunt 는 모든 작업 설정 을 불 러 오고 실행 합 니 다.대부분의 grunt 플러그 인 작업 은 MultiTasks 입 니 다.
우 리 는 grunt - jsdoc 플러그 인 을 예 로 들 어 MultiTasks 의 운행 을 실제 적 으로 관찰 합 니 다.

// grunt-jsdoc       
jsdoc: {
    dev : {
        src: jsdoc_src, 
        options: {
            template : 'templates/ebaui',
            private    : false,
            destination: 'build/doc/',
            tutorials  : 'build/demo/'
        }
    },
    release : {
        src: jsdoc_src, 
        options: {
            template : '',
            private    : false, 
            destination: '../release/<%=pkg.version%>/doc/',
            tutorials  : 'build/demo/'
        }
    }
}

지정 한 작업 의 대상 설정 이 없습니다.
작업 실행:

grunt jsdoc

console 에서 다음 결 과 를 출력 합 니 다:

Running "jsdoc:dev" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\trunk\build\doc
Running "jsdoc:release" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\release\1.0.0\doc
Done, without errors.

지정 한 작업 의 대상 설정
작업 실행:

grunt jsdoc:dev

console 에서 다음 결 과 를 출력 합 니 다:

Running "jsdoc:dev" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\trunk\build\doc
Done, without errors.

grunt 작업 작성
grunt 전역 네 임 스페이스 에서 다음 과 같은 두 가지 정의 작업 과 관련 된 API 를 제공 합 니 다.

//  Alias task
grunt.registerTask(taskName, taskList)
//  Function task
grunt.registerTask(taskName, description, taskFunction)
//  multi task
grunt.registerMultiTask(taskName, description, taskFunction)

registerTask

// Default task(s).
var defaultTasks = [
    'build_js:dev',
    'build_themes:dev',
    'copy:dev',
    'build_template:dev'
];
grunt.registerTask('default', defaultTasks);

registerMultiTask

grunt.registerMultiTask('cp_phpdemo','',function(){
    log( ' task ' + this.target + ' start......' );
    var config   = this.data;
    var source   = grunt.file.expand( this.data.src );
    var dest     = this.data.dest;
    if( source && source.length > 0 ){

        source.forEach( function( item ) {
            var filename = path.basename( item );
            copyfile( item, dest+filename );
        } );

    }
    log( ' task ' + this.target + ' end......' );
});

grunt 작업 실행

//      default  
grunt
//    jsdoc      ，          jsdoc  
grunt jsdoc
//      dev     ，          jsdoc  
grunt jsdoc:dev