Как установить grunt и как с его помощью собрать скрипт

86

Привет, я пытаюсь установить Grunt на 64-разрядную версию Windows 7. Я установил Grunt с помощью команд

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

но теперь, если я попытаюсь это сделать grunt init, это выдаст мне ошибку -

Не удалось найти действующий файл Gruntfile. Пожалуйста, прочтите руководство по началу работы для получения дополнительной информации о том, как настроить grunt: http://gruntjs.com/getting-started Неустранимая ошибка: невозможно найти Gruntfile.

Но когда я заглядываю в папку grunt в своей системе, Gruntfile.jsона там. может кто-нибудь посоветовать мне, как правильно установить это ворчание и как написать встроенный скрипт с использованием ворчания. У меня есть одна HTML-страница и java-скрипт, если я хочу создать скрипт с использованием Grunt, как я могу это сделать?

npm gruntjs npm-install Sau
источник
1
npm install -g gruntозначает установку Grunt глобально, что больше не рекомендуется (начиная с Grunt 0.4).
Ludder

Ответы:

229

Чтобы настроить сборку 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.

НОТА:

Вы можете использовать grunt-initдля создания, Gruntfile.jsесли хотите создание на основе мастера вместо необработанного кодирования для шага 5.

Для этого выполните следующие действия:

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 04
1
Можно ли настроить шаг 5 в основном с использованием grunt init:gruntfile? Я пытался сделать это , но я всегда получаю сообщение об ошибке: Fatal error: Unable to find Gruntfile. Всегда ли Gruntfile.js создается вручную? Если это так, я вижу преимущество использования Yeoman, в котором автоматически создается Gruntfile.js (и это по-прежнему применимо к проектам, которые я бы создал и которые на самом деле не являются веб-приложениями.
micah
@micah, вы можете использовать инструмент grunt-init для простого создания Gruntfile. Я обновлю основной пост и добавлю его в качестве примечания.
Qorbani
@qorbani Тогда я запуталась. В каталоге для этого обычного проекта я уже выполнил шаги 1-4. Теперь я просто запустил, npm install -g grunt-initи он успешно установился. Я последовал за этим, grunt init:gruntfileи он все еще дает мне ту же фатальную ошибку. Что мне не хватает?
micah
grunt init: gruntfile неверен. grunt-init - это другой помощник для создания шаблонов на основе шаблонов, и вам нужно установить шаблон gruntfile, чтобы он мог сгенерировать Gruntfile.js
Qorbani
8

Некоторое время нам нужно установить переменную PATH для WINDOWS

% USERPROFILE% \ AppData \ Roaming \ npm

После этого теста с where grunt

Примечание. Не забудьте закрыть окно командной строки и снова открыть его.

Партха Саратхи Гош
источник
5

У меня та же проблема, но я решил ее, изменив свой Grunt.js на Gruntfile.js. Проверьте имя файла, прежде чем вводить grunt.cmd в cmd Windows (если вы используете Windows).

андромада
источник
2

Вы должны установить grunt-cli в devDependencies проекта, а затем запустить его через скрипт в вашем package.json. Таким образом, все остальные разработчики, работающие над проектом, будут использовать одну и ту же версию grunt, и им также не придется устанавливать глобально как часть установки.

Установите grunt-cli с помощью npm i -D grunt-cliвместо того, чтобы устанавливать его глобально с помощью -g.

//package.json

...

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

Затем используйте, npm run buildчтобы запустить хрюканье.

Itwasmattgregg
источник