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

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

---

안녕하세요 저는 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 스크립트가 하나 있습니다. 어떻게 할 수 있습니까?

---

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은 ~올바르게 인식 합니다.

---

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

% USERPROFILE % \ AppData \ 로밍 \ npm

그 테스트 후 where grunt

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

---

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

---

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

Install grunt-cli with npm i -D grunt-cli instead of installing it globally with -g.

//package.json

...

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

Then use npm run build to fire off grunt.

참고URL : https://stackoverflow.com/questions/15703598/how-to-install-grunt-and-how-to-build-script-with-it