如何安装grunt以及如何使用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

Answers:


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构建。

注意:

如果要基于向导的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将~正确识别。


那就是我一直在寻找的东西,谢谢。另外,是否要求将gruntfile.js放置在项目根文件夹中(否则无法在Windows上正常工作)?
chester89 2013年

1
可以基本上使用以下步骤设置第5步grunt init:gruntfile吗?我尝试这样做,但始终会收到错误消息:Fatal error: Unable to find Gruntfile。Gruntfile.js的创建始终是手动过程吗?如果是这样,我看到是自动生成的,一个Gruntfile.js一个使用约曼的好处(这仍然适用的项目,我会创造它们其实不是的webapps。

@micah,您可以使用grunt-init工具轻松创建Gruntfile。我将更新主要帖子并将其添加为注释。
Qorbani 2013年

@qorbani然后我很困惑。在此非笨拙项目的目录中,我已经执行了步骤1-4。现在,我刚运行npm install -g grunt-init并成功安装。我遵循了这一点,grunt init:gruntfile它仍然给我同样的致命错误。我想念什么?
米迦2013年

grunt init:gruntfile不正确。grunt-init是基于模板的脚手架的不同帮助器,您需要安装gruntfile模板才能生成Gruntfile.js
Qorbani 2013年

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,而不必在安装过程中进行全局安装。

使用安装grunt-cli,npm i -D grunt-cli而不是使用全局安装-g

//package.json

...

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

然后使用npm run build以消除咕gr声。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.