> 웹 프론트엔드 > JS 튜토리얼 > GruntJS_node.js를 사용하여 웹 프로그램을 구축하기 위한 작업

GruntJS_node.js를 사용하여 웹 프로그램을 구축하기 위한 작업

WBOY
풀어 주다: 2016-05-16 16:45:44
원래의
1384명이 탐색했습니다.

Grunt 작업을 사용자 정의하는 방법

가끔 우리는 스스로 복잡한 작업을 작성해야 할 때가 있습니다. 구체적인 예는 다음과 같습니다.

1. 준비

1. 새 디렉토리 g1을 만듭니다
2. 새 package.json을 만들고 g1에 넣습니다
3. 새 Gruntfile.js를 만들고 g1에 넣습니다

.

package.json

코드 복사 코드는 다음과 같습니다.

{
"이름": " g1",
"version": "0.1.0",
"author": "@snandy",
"homepage": "http://www.g1.com",
"devDependency": {
"grunt": "~0.4.0"
}
}

4. g1에 CD를 넣고 npm을 설치하여 grunt 패키지를 설치합니다.

전체 디렉토리 구조는 다음과 같습니다

Gruntfile.js가 일시적으로 비어 있습니다.

2. 가장 간단한 작업 만들기

grunt.registerTask(taskName, [설명,] taskFunction)

taskName 작업 이름, 명령줄에서 grunt 사용 taskName
description 작업 설명
taskFunction 작업 구현

Gruntfile.js에 코드를 입력하세요

코드 복사 코드는 다음과 같습니다.

module.exports = function(grunt) {
grunt.registerTask('mytask', '간단한 작업 데모, 매개변수에 따라 다양한 출력을 인쇄합니다.', function(arg1, arg2) {
                                                                                                  .log.writeln('작업' this.name ", 아니요 전달된 매개변수");
        } else if (arguments.length === 1) {
          grunt.log.writeln('Task' this.name ", 하나의 매개변수는 " arg1);
    } else {
          grunt.log.writeln('task' this.name ", 두 개의 매개변수가 있습니다: " arg1 ", " arg2);
}
});
};

실행된 결과를 보려면 명령줄을 입력해야 합니다.

g1 디렉토리로 이동하여 grunt mytask를 입력하세요

grunt mytask:snandy를 입력하세요


매개변수를 전달하려면 작업 이름 뒤에 콜론을 추가하세요

그런트 mytask:snandy:backus를 입력하세요


콜론으로 구분된 여러 매개변수를 전달할 수 있습니다

3. 한 번에 여러 작업 만들기

grunt.registerMultiTask(taskName, [설명,] taskFunction)

파라미터는 동일하지만 메소드 이름이 다른 것을 확인할 수 있습니다. 하지만 사용 방법이 다릅니다. 먼저 Gruntfile.js를 초기화해야 합니다.

코드 복사 코드는 다음과 같습니다.
module.exports = function(grunt) {
grunt.initConfig({
로그: {
t1: [1, 2, 3],
t2: 'hello world',
t3: false
}
});

grunt.registerMultiTask('log', 'Log stuff.', function() {
grunt.log.writeln(this.target ': ' this.data);
});
};

g1 디렉토리에 들어가서 별도로 테스트하세요

grunt를 입력하면 세 개의 하위 작업 t1, t2, t3이 순차적으로 실행됩니다

grunt 로그:t1, grunt 로그:t2, grunt 로그:t3을 각각 입력하세요

4. 업무 간 소통

다음과 같이 작업 내에서 다른 작업을 호출할 수 있습니다

코드 복사 코드는 다음과 같습니다.

module.exports = function(grunt) {

grunt.registerTask('mytask', '매개변수에 따라 다양한 출력을 인쇄하는 가장 간단한 작업 데모.', function(arg1, arg2) {
if (arguments.length === 0) {
grunt.log.writeln('task' this.name ", 전달된 매개변수 없음");
} else if (arguments.length == = 1) {
         grunt.log.writeln('Task' this.name ", 하나의 매개변수는 " arg1) .name ", 두 개의 매개변수가 있습니다: " arg1 ", " arg2);
      }
  });

grunt.registerTask('기본', '기본 작업', 함수( ) {
                                            ~ ~
명령줄을 입력하고 grunt를 입력하세요




여러 작업을 호출하려면 해당 작업을 쉼표로 구분하여 run 메소드에 전달하거나 배열 형식으로 전달하세요.

코드 복사

코드는 다음과 같습니다.

grunt.registerTask('default', ' 기본 작업 ', function() { grunt.task.run('mytask1', 'mytask2') // 또는 grunt.task.run(['mytask1', 'mytask2']) })
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿