如何安装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脚本我该怎么办？

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将~正确识别.

Answer 2

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

%USERPROFILE%\应用程序数据\漫游\ NPM

用那个测试后 where grunt

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

Answer 3

我有同样的问题,但我解决了它,将我的Grunt.js更改为Gruntfile.js在Windows cmd上键入grunt.cmd之前检查您的文件名(如果您使用的是Windows).