GruntJS를 사용하여 웹 프로그램 구축_javascript 기술

대략적인 단계는 다음과 같습니다

새 프로젝트 Bejs
새 파일 package.json
새 파일 Gruntfile.js
명령줄에서 그런트 작업 실행

1. 새로운 프로젝트 Bejs

소스 코드는 src 아래에 있습니다. 이 디렉터리에는 selector.js와 ajax.js라는 두 개의 js 파일이 있습니다. 컴파일된 코드는 dest에 배치되고, grunt는 이를 자동으로 생성합니다.

2. 새 package.json을 만듭니다

package.json은 루트 디렉터리에 위치하며 프로젝트 이름, 설명, 버전 번호, 종속 패키지 등과 같은 프로젝트의 일부 메타 정보를 포함합니다. 소스코드처럼 svn이나 git에 커밋해야 합니다. 현재 프로젝트 구성은 다음과 같습니다

package.json의 내용은 다음과 같이 JSON 구문 사양을 준수해야 합니다

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

{
"이름": " Bejs",
"version": "0.1.0",
"devDependency": {
"grunt": "~0.4.0",
"grunt-contrib-jshint": " ~0.1.1",
"grunt-contrib-uglify": "~0.1.2",
"grunt-contrib-concat": "~0.1.1"
}
}

이전 글에서는 devDependency에 Grunt가 설치되어 있었지만, grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat는 설치되지 않았습니다. 세 가지 작업에 대해 각각 세 가지

grunt-contrib-jshint js 구문 검사
UglifyJS를 사용하여 grunt-contrib-uglify 압축
grunt-contrib-concat 병합 파일

이 시점에서 명령줄 도구를 열고 프로젝트 루트 디렉터리에 들어가서 다음 명령을 입력하세요: npm install

루트 디렉터리를 다시 살펴보면 그림과 같이 하위 디렉터리 4개를 포함해 node_modules 디렉터리가 추가로 존재하는 것을 발견했습니다.

3. 새 파일 Gruntfile.js를 만듭니다

Gruntfile.js도 프로젝트 루트 디렉터리에 있습니다. 거의 모든 작업이 이 파일에 정의되어 있으며, JSON뿐만 아니라 모든 js 코드를 작성할 수 있습니다. package.json과 마찬가지로 소스코드와 같이 svn이나 git에 제출해야 합니다.

Gruntfile.js는 다음과 같은 내용으로 구성되어 있습니다

래퍼 함수는 다음과 같은 구조를 가지고 있습니다. 이는 Node.js의 일반적인 작성 방법으로 API를 노출합니다.

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

module.exports = function(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'),
concat : {
domop : {
src: ['src/ajax.js', 'src/selector.js'],
dest: 'dest/domop.js'
}
}, Uglify: {
옵션: {
배너: '/*! & LT;%= pkg.name%& gt; & lt;%= grunt.template.today ("yyyy- mm-ddd ") %> '
}
}
});
// 각각 병합 및 압축을 위해 concat 및 uglify 플러그인을 로드합니다
grunt.loadNpmTasks('grunt-contrib -concat');
grunt.loadNpmTasks ('grunt-contrib-uglify');
// 작업 등록
grunt.registerTask('default', ['concat', 'uglify']);
}



4. 그런트 작업 실행

명령줄을 열고 프로젝트 루트 디렉터리를 입력한 후 grunt를 입력하세요

인쇄된 정보를 보면 dest 디렉토리와 예상 파일이 성공적으로 병합 및 압축되어 dest 디렉토리와 예상 파일이 생성된 것을 확인할 수 있습니다. 이때 프로젝트 디렉토리에는 다음과 같이 dest가 있습니다. 🎜>

여기에는 두 가지 일반적인 작업이 있습니다. concat 및 uglify, jshint 등은 소개되지 않습니다. Gruntfile.js의 코드는 하나씩 해석되지 않았습니다. 관심 있는 학생들은 gruntjs의 공식 문서에서 찾을 수 있습니다.