npm - 如何安装 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 编写构建脚本。如果我想使用 Grunt 构建一个脚本，我有一个 HTML 页面和 java 脚本，我该怎么做？

score 237 · Accepted Answer

要在此处设置 GruntJS 构建，步骤如下：

确保您已设置package.json或设置新的：
```
npm init
```
将 Grunt CLI 安装为全局：
```
npm install -g grunt-cli
```
在本地项目中安装 Grunt：
```
npm install grunt --save-dev
```
安装您在构建过程中可能需要的任何 Grunt 模块。只是为了这个示例，我将添加 Concat 模块以将文件组合在一起：
```
npm install grunt-contrib-concat --save-dev
```

现在您需要设置您的Gruntfile.js哪个将描述您的构建过程。对于这个示例，我只是在文件夹中合并两个 JS 文件file1.js并生成：file2.jsjsapp.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']);
};

现在您将准备好通过以下命令运行构建过程：
```
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 将~正确识别。

score 8 · Accepted Answer

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

%USERPROFILE%\AppData\Roaming\npm

在那次测试之后where grunt

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

score 5 · Accepted Answer

我遇到了同样的问题，但我通过将 Grunt.js 更改为 Gruntfile.js 解决了这个问题在 windows cmd 上输入 grunt.cmd 之前检查你的文件名（如果你使用的是 windows）。

score 3 · Accepted Answer

您应该将 grunt-cli 安装到项目的 devDependencies 中，然后通过 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.

npm - 如何安装 grunt 以及如何使用它构建脚本

4 回答 4

Related

Reference