如何安装 grunt 以及如何使用它构建脚本 [英] How to install grunt and how to build script with it

问题描述

我正在尝试在 Windows 7 64 位上安装 Grunt.我已经使用命令安装了 Grunt

Hi I'm trying to install Grunt on Windows 7 64 bit. I have installed Grunt using commands

 npm install -g grunt
 npm install -g grunt-cli

但是现在如果我尝试执行 grunt init，它会给我一个错误 -

but now if I try to do grunt init, it is throwing me an error -

找不到有效的 Gruntfile.请参阅入门有关如何配置 grunt 的更多信息的指南:http://gruntjs.com/getting-started 致命错误:无法找到咕噜文件.

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 构建一个脚本，我该怎么做?

But when I look inside the grunt folder on my system the Gruntfile.js is there. can someone please guide me how to install this grunt properly and how to write built Script using the grunt. I have one HTML page and java script if i wants built a script using Grunt how can i do it?

推荐答案

设置 GruntJS 构建的步骤如下:

To setup GruntJS build here is the steps:

1. 确保您已经设置了 package.json 或设置了新的:

npm init

将 Grunt CLI 安装为全局:

Install Grunt CLI as global:

npm install -g grunt-cli

在本地项目中安装 Grunt:

Install Grunt in your local project:

npm install grunt --save-dev

安装您在构建过程中可能需要的任何 Grunt 模块.为了这个示例，我将添加 Concat 模块以将文件组合在一起:

Install any Grunt Module you may need in your build process. Just for sake of this sample I will add Concat module for combining files together:

npm install grunt-contrib-concat --save-dev

现在您需要设置您的 Gruntfile.js，它将描述您的构建过程.对于这个示例，我只是在 js 文件夹中组合了两个 JS 文件 file1.js 和 file2.js 并生成 app.js:

Now you need to setup your Gruntfile.js which will describe your build process. For this sample I just combine two JS files file1.js and file2.js in the js folder and generate 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']);
};

现在您可以通过以下命令运行构建过程:

Now you'll be ready to run your build process by following command:

grunt

我希望这能让您了解如何使用 GruntJS 构建.

I hope this give you an idea how to work with GruntJS build.

注意:

如果您想要基于向导的创建而不是步骤 5 的原始编码，您可以使用 grunt-init 来创建 Gruntfile.js.

You can use grunt-init for creating Gruntfile.js if you want wizard-based creation instead of raw coding for step 5.

为此，请按照以下步骤操作:

To do so, please follow these steps:

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

For Windows users: If you are using cmd.exe you need to change ~/.grunt-init/gruntfile to %USERPROFILE%.grunt-init. PowerShell will recognize the ~ correctly.

这篇关于如何安装 grunt 以及如何使用它构建脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！