Grunt.js_Basics로 프로젝트를 관리하기 위한 애플리케이션 지침

Grunt.js란 무엇인가요?
Grunt.js는 NodeJS를 기반으로 하며 빌드, 테스트 및 문서 생성 프로젝트 관리 도구를 자동화하는 데 사용할 수 있는 Javascript Task Runner(Javascript 작업 실행기)입니다.

Grunt.js는 단순한 빌드 도구가 아니라 각 하위 작업의 자동 실행을 관리하는 작업 실행기일 뿐입니다.

Grunt.js를 사용하는 이유는 무엇인가요?
간단히 말하면 자동화를 위한 것입니다.
프론트엔드 프로젝트의 경우:

•모듈 간 작업 분할을 명확히 하기 위해 Javascript 코드를 매우 작은 js 파일로 나눌 수 있지만 마지막 페이지에서 너무 많은 js 파일이 너무 많은 Http 요청을 생성한다는 것을 알고 있습니다. 페이지 최적화에 도움이 됩니다. 따라서 우리는 이러한 js 파일을 병합할 수 있는 도구가 필요할 수 있습니다.
•클라이언트가 요청한 파일을 가능한 한 작게 유지하기 위해 HTML, Javascript 및 기타 파일을 압축할 수 있기를 바랍니다.
•소스 코드에 대해 단위 테스트와 회귀 테스트를 수행해야 할 수도 있습니다.
•문서를 수동으로 작성할 필요가 없도록 소스 코드 주석을 통해 자동으로 문서를 생성할 수 있는 도구가 있으면 좋겠습니다.
•......
물론 이 모든 작업을 수행하는 데 도움이 되는 다양한 도구가 있지만, 매번 명령을 입력하거나, 프로그램을 열거나, 간단히 파일을 저장하는 것이 가장 좋습니다. 그러면 이 모든 작업이 자동으로 수행됩니다.

과거에는 NodeJS를 사용하여 빌드 프로그램을 직접 작성했지만 이제는 Grunt.js가 필요한 모든 것을 제공할 수 있습니다.

Grunt.js 설치
Grunt.js 0.4 이후에는 더 이상 전체 Grunt.js를 전역적으로 설치하지 않고 Grunt.js 클라이언트를 전역적으로 설치한 후 현재 프로젝트인 Grunt에 설치합니다. 다양한 Grunt 버전의 다양한 프로젝트 간의 향후 종속성을 방지합니다.

이전 버전이 설치되어 있는 경우 npm 명령을 사용하여 원본 Grunt.js를 삭제할 수 있습니다.

npm uninstall -g grunt
그런 다음 Grunt.js 클라이언트를 설치하세요.

npm install -g grunt-cli

package.json
package.json은 일부 프로젝트 종속성 정보, 작성자, 버전 및 기타 정보가 포함된 프로젝트 구성 파일입니다. 먼저 간단한 package.json을 작성해 보겠습니다.

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

{
"이름": " my-project ",
"version": "0.1.0",
"devDependency": {
"grunt": "~0.4.1"
}
}

name 속성, 항목의 이름을 나타냅니다.

version 속성은 프로젝트의 버전 번호입니다.

devDependency 속성에는 프로젝트의 종속성이 포함되어 있으며 현재 종속성은 0.4.1입니다.
package.json이 포함될 수 있는 터미널 디렉터리에 다음 명령을 입력합니다.

npm install
디렉토리에 추가 node_modules 폴더가 있고 그 안에 grunt 폴더가 있다는 것을 알 수 있습니다. 이것이 프로젝트에 설치한 Grunt.js입니다.

Grunt.js를 사용하여 js 코드 압축
grunt-contrib-uglify는 Grunt.js의 작업 모듈로, js 압축 작업을 수행하기 위해 유명한 js 압축 도구인 uglify를 기반으로 합니다.

먼저 프로젝트 종속성에 grunt-contrib-uglify를 추가합니다. package.json은 다음과 같습니다.

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

{
"name": "my-project",
"version": "0.1.0",
"devDependency": {
"grunt" : "~0.4.1",
"grunt-contrib-uglify": "~0.2.0"
}
}

재사용 :

npm install
grunt-contrib-uglify를 설치했습니다.

Gruntfile.js 작성

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

module.exports = 함수(grunt) {

// grunt에 일부 설정 추가
grunt.initConfig({
uglify: {
          options: {
                                                                                                     )      🎜>}, 빌드: {
src: ' src/core.js', // 압축할 소스 파일, 'src/*.Js'와 같이 *를 사용하여 패스를 나타낼 수도 있습니다. Dest: 'dst/core.js' // 압축 후 출력 위치
}
}
});
// "uglify" 플러그인 작업 로드
grunt.loadNpmTasks('grunt-contrib-uglify');

// 기본적으로 실행해야 하는 작업을 정의합니다.

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

};

Gruntfile.js 파일은 작업, 작업 그룹의 실행 순서 등을 정의하는 데 사용됩니다. 위 파일에서는 src/core.js 파일을 압축하여 dst/core.js로 출력하도록 정의했습니다. 그런 다음 다음 명령을 입력합니다.

grunt

가 자동으로 이 작업을 완료합니다.