Grunt는 Node.js를 기반으로하며 JS에서 개발되었습니다. 이러한 방식으로 Node.js를 사용하여 파일 작업 등과 같은 크로스 시스템 및 크로스 플랫폼 데스크톱 작업 등을 실현할 수 있습니다. 또한 Grunt 및 해당 플러그인은 모두 NPM 설치를 사용하여 관리 할 수있는 패키지로 사용됩니다.
따라서 NPM에서 생성 된 Package.json 프로젝트 파일은 현재 프로젝트에 사용 된 Grunt 플러그인을 녹화 할 수 있으며 Grunt는 GruntFile.js 파일을 호출하고 작업 (작업)을 구문 분석하고 해당 작업을 수행합니다.
Grunt-Cli를 설치하십시오
실제로 Grunt의 명령 줄 인터페이스 (CLI)가 설치된 Grunt-Cli를 설치하는 것입니다. 그 후, Grunt 명령은 명령 프롬프트에서 인식됩니다. Grunt-Cli 설치를 설치하는 것은 아닙니다. Grunt 자체는 전 세계적으로 사용되지 않기 때문입니다. Grunt를 사용하려면 특정 작업 디렉토리에 대해 Grunt를 한 번 설치해야합니다. 또한 다른 작업 디렉토리마다 Grunt를 통해 다른 자동화 작업이 필요하므로 독립적으로 구성해야합니다.
NPM 설치 -G GRUNT -CLI
-새로 설치된 물건이 package.json 파일에 추가 될 것임을 나타냅니다.
package.json 파일을 생성합니다
NPM에는 작업 디렉토리에 대한 요구 사항이 있습니다. 이 요구 사항은 다음과 같습니다. 루트 디렉토리 위치에는 package.json이 있습니다.
문서. 이 파일은 작업 디렉토리에 해당하는 일부 프로젝트 정보 (이름, 설명)와 패키지의 종속성 (즉, NPM 모듈)을 정의합니다.
초기화하려면 다음 명령을 실행하십시오
npm init
현재 작업 디렉토리에 Grunt 및 필요한 플러그인 설치
방법 1
우리는 이전에 글로벌 디렉토리에 Grunt를 설치했으며 이제 현재 프로젝트 경로에 소개해야합니다. 동시에 필요한 플러그인에는 다음과 같은 플러그인이 포함될 수 있습니다.
병합 파일 : Grunt-Contrib-Concat
구문 검사 : Grunt-Contrib-Jshint
SCSS 컴파일 : Grunt-Contrib-Sass
압축 파일 : Grunt-Contrib-Iglify
파일 변경을 듣습니다 : Grunt-Contrib-Watch
로컬 서버 생성 : Grunt-Contrib-Connect
그들이 설치할 수있는 방법은 다음과 같습니다.
NPM 설치--save-dev gruntnpm install-사브 데브 플러그인 1 플러그인 2 플러그인 3
현재 package.json 폴더에 추가 코드가 있습니다.
"devddependencies": { "grunt": "0.4.1"},메소드 2- 패키지를 변경합니다. json 수동으로
"devdependencies": { "grunt": "~ 0.4.1", "Grunt-Contrib-Cssmin": "~ 0.7.0"}Package.json 파일 에이 필드를 수동으로 추가하고 의존 해야하는 패키지를 추가하십시오. 최신 버전 만 설치 해야하는 경우 *로 변경 한 다음 NPM 설치를 실행할 수 있습니다. 폴더에 Node_Modules 폴더가있어 필요한 플러그인을 저장합니다.
구성
일반적으로 템플릿을 구성 파일로 직접 사용하십시오.
module.exports = function (grunt) { "Strict 사용"; grunt.initconfig ({// 플러그인 구성 영역}); // 플러그인 작업을로드하고 grunt.loadnpmtasks ( 'grunt-contrib-uglify')를 사용하려는 사람을 추가하십시오. grunt.loadnpmtasks ( 'grunt-contrib-cssmin'); grunt.loadnpmtasks ( 'grunt-contrib-imagemin'); // 등록 작업 grunt.registertask ( 'default', [ 'cssmin', 'imagemin', 'uglify'];};grunt.loadnpmtasks ()는로드 플러그인 작업입니다. 실제로 플러그인 기능을 사용하려면이 코드를 사용 하여이 부분에 플러그인 작업을 추가하십시오.
grunt.registertask ()는 등록 된 작업이며 기본적으로 기본값이 있습니다. 기본값은 마지막으로 사용하면 디렉토리의 명령 프롬프트에 직접 Grunt를 입력하여 기본 작업을 실행하는 것과 동일합니다.
사용자 정의 작업 사용
더 많은 작업 명령을 등록하고 다른 이름을 사용할 수 있습니다. 예를 들어
grunt.registertask ( 'custom', [ 'cssmin', 'imagemin']);
그것을 사용할 때는 다음을 입력합니다.
Grunt Custom