아마도 다음 단계가있을 것입니다
새로운 프로젝트 bejs
새 파일 package.json을 만듭니다
새 파일 GruntFile.js를 만듭니다
명령 줄에서 grunt 작업을 실행하십시오
1. 새로운 프로젝트 bejs
소스 코드는 SRC 아래에 배치되며 디렉토리에는 2 개의 JS 파일 인 selector.js 및 ajax.js가 있습니다. 컴파일 후 코드는 Dest에 배치 되며이 grunt는 자동으로 생성됩니다.
2. 새 package.json을 만듭니다
package.json은 루트 디렉토리에 배치되며 프로젝트 이름, 설명, 버전 번호, 종속성 패키지 등과 같은 프로젝트의 메타 정보를 포함합니다. 소스 코드와 같은 SVN 또는 GIT에 제출해야합니다. 현재 프로젝트 구조는 다음과 같습니다
package.json 컨텐츠는 다음과 같이 JSON 구문 사양을 준수해야합니다.
코드 사본은 다음과 같습니다.
{
"이름": "bejs",
"버전": "0.1.0",
"devddependencies": {
"Grunt": "~ 0.4.0",
"Grunt-Contrib-Jshint": "~ 0.1.1",
"Grunt-Contrib-Iglify": "~ 0.1.2",
"Grunt-Contrib-Concat": "~ 0.1.1"
}
}
DevDependencies의 Grunt는 이전 기사에 설치되었으며 Grunt-Contrib-Jshint/Grunt-Contrib-Iglify/Grunt-Contrib-Concat은 설치되지 않았습니다. 세 가지 작업에 대해 3 개
Grunt-Contrib-JS 구문 확인
uglifyjs를 사용하여 Grunt-Contrib-Iglify 압축
Grunt-Contrib-Concat은 파일을 병합합니다
현재 명령 줄 도구를 열고 프로젝트 루트 디렉토리를 입력하고 다음 명령을 입력하십시오. NPM 설치
루트 디렉토리를 다시 확인하고 4 개의 하위 디렉토리를 포함하여 추가 Node_Modules 디렉토리가 있는지 확인하십시오.
3. 새 파일 생성 gruntfile.js
Gruntfile.js는 프로젝트 루트 디렉토리에도 배치됩니다. 거의 모든 작업 이이 파일에 정의되어 있습니다. JSSON 대신 JS 코드를 작성할 수있는 일반적인 JS 파일입니다. package.json과 마찬가지로 소스 코드와 같은 SVN 또는 GIT에 제출해야합니다.
gruntfile.js는 다음 내용으로 구성됩니다
래퍼 함수는 다음과 같은 구조를 가지고 있습니다. 이것은 node.js를 쓰는 전형적인 방법입니다. 수출을 사용하여 API를 노출시킵니다
코드 사본은 다음과 같습니다.
module.exports = function (grunt) {
// 여기에서 그 런트 관련 작업을 수행합니다
};
프로젝트 및 작업 구성
Grunt 플러그인 및 작업을로드하십시오
작업 실행을 사용자 정의합니다
이 예제는 다음 작업을 완료합니다
src (ajax.js/selector.js)의 파일을 domop.js로 병합하십시오
domop.js를 domop.min.js로 압축하십시오
두 파일 모두 Dest 디렉토리에 배치됩니다
최종 Gruntfile.js는 다음과 같습니다
코드 사본은 다음과 같습니다.
module.exports = function (grunt) {
// 구성
grunt.initconfig ({
pkg : grunt.file.readjson ( 'package.json'),
콘서트 : {
Domop : {
src : [ 'src/ajax.js', 'src/selector.js'],
DEST : 'dest/domop.js'
}
},
uglify : {
옵션 : {
배너 : '/*! < %= pkg.name %> < %= grunt.template.today ( "yyyy-mm-dd") %> *// n '
},
짓다 : {
SRC : 'dest/domop.js',
DEST : 'dest/domop.min.js'
}
}
});
// 합병 및 압축을 위해 CONCAT 및 UGLIFY 플러그인을로드합니다.
grunt.loadnpmtasks ( 'grunt-contrib-concat');
grunt.loadnpmtasks ( 'grunt-contrib-uglify');
// 작업을 등록합니다
grunt.registertask ( 'default', [ 'concat', 'uglify']);
};
4. Grunt 작업을 실행하십시오
명령 줄을 열고 프로젝트 루트 디렉토리를 입력하고 Grunt를 클릭하십시오.
인쇄 정보에서 성공적인 병합 및 압축이 생성되고 Dest 디렉토리와 예상 파일이 생성되는 것으로 나타났습니다. 현재 프로젝트 디렉토리에 더 많은 것이 있습니다.
자, 여기에 두 가지 일반적인 작업이 소개되지 않은 두 가지 일반적인 작업이 있습니다. gruntfile.js의 코드는 하나씩 해석되지 않습니다. 관심있는 학생들은 Gruntjs의 공식 문서에서 찾을 수 있습니다.