如何安装Grunt并使用它构建脚本

Question

你好，我在尝试在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 编写构建脚本吗？我有一个 HTML 页面和 JavaScript，如果我想使用 Grunt 构建脚本，应该怎么做？

- Sau

---

npm install -g grunt 表示全局安装 Grunt，但这已不再推荐使用（从 Grunt 0.4 开始）。 - Ludder

Answer 1

为了设置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将正确识别~。

- Qorbani

---

这正是我一直在寻找的，谢谢。另外，是否需要将gruntfile.js放置在项目根目录中（否则在Windows上无法正常工作）？ - chester89

第五步是否可以使用 grunt init:gruntfile 进行基本设置？我尝试过这样做，但总是会出现错误：致命错误：无法找到 Gruntfile。Gruntfile.js 的创建是否总是手动进行的？如果是这样，那么使用 Yeoman 生成自动生成 Gruntfile.js 的好处是显而易见的（即使对于我创建的实际上不是 Web 应用程序的项目也适用）。 - micah

@qorbani 那我很困惑。在这个非grunt项目的目录中，我已经按照步骤1-4进行了操作。现在我只需运行 npm install -g grunt-init，它就成功安装了。然后我跟着输入了 grunt init:gruntfile，但它仍然给出相同的致命错误。我错过了什么？ - micah

grunt init: gruntfile 不正确。grunt-init 是基于模板的脚手架工具，您需要安装 gruntfile 模板才能生成 Gruntfile.js。 - Qorbani

考虑到我之前读过的内容，这真的很令人困惑。但我很感谢你的反馈。如果没有使用Yeoman，那么手动从头开始构建Gruntfile.js并安装Grunt模块以在Grunt文件中使用，这是一种常见的做法吗？ - micah

Answer 2

有时我们需要为WINDOWS系统设置PATH变量。

%USERPROFILE%\AppData\Roaming\npm

然后使用where grunt进行测试。

注意：不要忘记关闭命令提示符窗口并重新打开。

- Partha Sarathi Ghosh

Answer 3

我也遇到了同样的问题，但我通过将我的 Grunt.js 文件更名为 Gruntfile.js 来解决它。 在 Windows 命令提示符上输入 grunt.cmd 前，请检查文件名（如果您正在使用 Windows）。

- andromada

Answer 4

你应该将grunt-cli安装到项目的devDependencies中，然后通过package.json中的脚本运行它。这样，其他在项目上工作的开发人员都将使用相同版本的grunt，并且不需要像设置一样全局安装它。

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

//package.json

...

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

然后使用 npm run build 命令启动 grunt。

- itwasmattgregg

---

被接受的答案将grunt-cli添加为全局，但将grunt添加为开发环境。这是否与您在此处所说的类似，或者grunt-cli必须在开发环境中才能像您的代码一样与NPM一起使用？ - qozle

@qozle 它不需要在开发部分中，但 -D 会将其保存在您的 package json 中作为开发依赖项。 运行 npm install 安装它并使其可用于使用 npm run ... 运行的脚本。 您将无法直接在命令行中运行 grunt，但可以通过项目内的 node 运行它。 这有意义吗？ - itwasmattgregg