grunt를 설치하는 방법 및 스크립트를 작성하는 방법


86

안녕하세요 저는 Windows 7 64 비트에 Grunt를 설치하려고합니다. 명령을 사용하여 Grunt를 설치했습니다.

 npm install -g grunt
 npm install -g grunt-cli

하지만 지금 시도 grunt init하면 오류가 발생합니다.

유효한 Gruntfile을 찾을 수 없습니다. grunt를 구성하는 방법에 대한 자세한 내용은 시작 안내서를 참조하십시오. http://gruntjs.com/getting-started 치명적인 오류 : Gruntfile을 찾을 수 없습니다.

하지만 내 시스템의 grunt 폴더를 살펴보면 Gruntfile.js거기에 있습니다. 누군가이 grunt를 올바르게 설치하는 방법과 grunt를 사용하여 빌드 된 스크립트를 작성하는 방법을 안내해 주시겠습니까? Grunt를 사용하여 스크립트를 작성하려면 HTML 페이지와 Java 스크립트가 하나 있습니다. 어떻게 할 수 있습니까?


1
npm install -g grunt더 이상 권장되지 않는 Grunt를 전역 적으로 설치하는 것을 의미합니다 (Grunt 0.4부터 시작).
Ludder 2013-04-12

답변:


229

GruntJS 빌드를 설정하는 단계는 다음과 같습니다.

  1. 설정했는지 확인 package.json하거나 새로 설정했는지 확인하세요 .

    npm init
    
  2. Grunt CLI를 전역으로 설치합니다.

    npm install -g grunt-cli
    
  3. 로컬 프로젝트에 Grunt를 설치합니다.

    npm install grunt --save-dev
    
  4. 빌드 프로세스에 필요한 Grunt 모듈을 설치하십시오. 이 샘플을 위해 파일을 결합하기위한 Concat 모듈을 추가합니다.

    npm install grunt-contrib-concat --save-dev
    
  5. 이제 Gruntfile.js빌드 프로세스를 설명하는 설정을해야합니다 . 이 샘플 난 그냥 두 JS 파일을 결합 file1.js하고 file2.js에서 js폴더 생성 app.js:

    module.exports = function(grunt) {
    
        // Project configuration.
        grunt.initConfig({
            concat: {
                "options": { "separator": ";" },
                "build": {
                    "src": ["js/file1.js", "js/file2.js"],
                    "dest": "js/app.js"
                }
            }
        });
    
        // Load required modules
        grunt.loadNpmTasks('grunt-contrib-concat');
    
        // Task definitions
        grunt.registerTask('default', ['concat']);
    };
    
  6. 이제 다음 명령으로 빌드 프로세스를 실행할 준비가되었습니다.

    grunt
    

이것이 GruntJS 빌드로 작업하는 방법에 대한 아이디어를 제공하기를 바랍니다.

노트:

5 단계의 원시 코딩 대신 마법사 기반 생성을 원하는 경우 grunt-init생성에 사용할 수 있습니다 Gruntfile.js.

이렇게하려면 다음 단계를 따르십시오.

npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile

Windows 사용자의 경우 : 당신은 cmd.exe를를 사용하는 경우는 변경해야 ~/.grunt-init/gruntfile하는 %USERPROFILE%\.grunt-init\. PowerShell은 ~올바르게 인식 합니다.


그게 제가 찾던 것입니다. 감사합니다. 또한 gruntfile.js를 프로젝트 루트 폴더에 넣어야하나요?
chester89

1
5 단계는 기본적으로 사용하여 설정할 수 grunt init:gruntfile있습니까? 나는 이것을 시도했지만 항상 오류가 발생 Fatal error: Unable to find Gruntfile합니다. Gruntfile.js 생성은 항상 수동 프로세스입니까? 그렇다면 Gruntfile.js가 자동 생성되는 Yeoman을 사용하는 이점이 있습니다 (실제로 webapp이 아닌 내가 생성 할 프로젝트에 여전히 적용됩니다.
micah

@micah, Gruntfile을 쉽게 생성하기 위해 grunt-init 도구를 사용할 수 있습니다. 메인 포스트를 업데이트하고 메모로 추가하겠습니다.
Qorbani

@qorbani 그럼 나는 혼란스러워. 이 non-grunt 프로젝트의 디렉토리에서 이미 1-4 단계를 따랐습니다. 이제 방금 실행 npm install -g grunt-init했고 성공적으로 설치되었습니다. 나는 이것을 따라 갔고 grunt init:gruntfile여전히 똑같은 치명적인 오류를 제공합니다. 내가 무엇을 놓치고 있습니까?
micah

grunt init : gruntfile이 올바르지 않습니다. 툴툴 거리는 소리 - 초기화는 템플릿 기반 비계 다른 도우미 당신은 Gruntfile.js 생성 할 수있는 바로 gruntfile 템플릿을 설치해야합니다
Qorbani

8

WINDOWS에 대한 PATH 변수를 설정해야 할 때가 있습니다.

% USERPROFILE % \ AppData \ Roaming \ npm

그 테스트 후 where grunt

참고 : 명령 프롬프트 창을 닫았다가 다시 여는 것을 잊지 마십시오.


5

같은 문제가 발생했지만 Grunt.js를 Gruntfile.js로 변경하여 해결했습니다. Windows cmd에 grunt.cmd를 입력하기 전에 파일 이름을 확인하십시오 (Windows를 사용하는 경우).


2

grunt-cli를 프로젝트의 devDependencies에 설치 한 다음 package.json의 스크립트를 통해 실행해야합니다. 이런 식으로 프로젝트에서 작업하는 다른 개발자는 모두 동일한 버전의 grunt를 사용하고 설정의 일부로 전역 적으로 설치할 필요가 없습니다.

npm i -D grunt-cli사용하여 전역 적으로 설치하는 대신를 사용하여 grunt-cli를 설치합니다 -g.

//package.json

...

"scripts": {
  "build": "grunt"
}

그런 다음 npm run build그런트를 발사 하는 데 사용하십시오 .

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.