2013-03-29 101 views
59

您好我正在嘗試在Windows 7 64位上安裝Grunt。我已經安裝了咕嚕使用命令如何安裝grunt以及如何使用它構建腳本

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

但現在,如果我嘗試做grunt init,它被扔我一個錯誤 -

A valid Gruntfile could not be found. Please see the getting started guide for more information on how to configure grunt: http://gruntjs.com/getting-started Fatal error: Unable to find Gruntfile.

但是,當我看繁重的文件夾在我的系統上Gruntfile.js是那裏。有人可以請指導我如何正確安裝此咕嚕聲以及如何使用咕嚕聲編寫內置腳本。如果我想用Grunt構建腳本,我有一個HTML頁面和Java腳本,我該怎麼做?

+1

'npm install -g grunt'意味着全局安裝Grunt,不再推薦(從Grunt 0.4開始)。 – Ludder

回答

180

要設置GruntJS建在這裏是步驟:

  1. 請確保您有設置你的package.json或設置新的:

    npm init 
    
  2. 安裝咕嚕CLI全球:

    npm install -g grunt-cli 
    
  3. 在當地項目中安裝Grunt:

    npm install grunt --save-dev 
    
  4. 在您的構建過程中安裝您可能需要的任何Grunt模塊。正是由於這個樣品的緣故,我會添加的毗連模塊組合在一起的文件:

    npm install grunt-contrib-concat --save-dev 
    
  5. 現在你需要設置你的Gruntfile.js這將說明你的構建過程。對於此示例我只是合併兩個JS文件file1.jsfile2.jsjs文件夾,並生成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構建。

注:

可以使用grunt-init創建Gruntfile.js如果你想基於嚮導的創造,而不是原始編碼步驟5

爲此,請按照下列步驟操作:

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將正確識別~

+4

這個答案需要被接受。 +1 –

+0

這就是我一直在尋找,謝謝。此外,是否需要將gruntfile.js放置在項目根文件夾中(否則無法在Windows上使其工作)? – chester89

+1

可以使用'grunt init:gruntfile'來設置步驟5嗎?我試過這樣做,但我總是得到一個錯誤:'致命錯誤:無法找到Gruntfile'。 Gruntfile.js的創建是否始終是一個手動過程?如果是這樣,我看到使用Yeoman的一個好處,那就是Gruntfile.js是自動生成的(並且這仍然適用於我將創建的實際上不是webapps的項目 – micah

5

我得到了同樣的問題,但我解決了它與更改我的Grunt.js Gruntfile.js 檢查您的文件名,然後在Windows cmd上鍵入grunt.cmd(如果您使用的是Windows)。

5

有些時候,我們需要設置PATH變量WINDOWS

%USERPROFILE%\AppData\Roaming\npm

該測試之後與where grunt

注意:不要忘了關閉命令提示符窗口,然後重新打開它。

相關問題