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

Question

您好，我正在尝试在 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.

但是当我查看系统上的 grunt 文件夹时，Gruntfile.js 就在那里。有人可以指导我如何正确安装这个 grunt 以及如何使用 grunt 编写内置脚本。我有一个 HTML 页面和 java 脚本，如果我想使用 Grunt 构建一个脚本，我该怎么做？

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 文件夹中组合两个 JS 文件 file1.js 和 file2.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 将正确识别 ~。