Меню Рубрики

Установка grunt на mac

Installing grunt

This document explains how to install specific versions of Grunt and Grunt plugins. If you haven’t read the Getting Started guide, you should check that out first.

Overview

Grunt and Grunt plugins should be defined as devDependencies in your project’s package.json. This will allow you to install all of your project’s dependencies with a single command: npm install . The current stable and development versions of Grunt are always listed on the wiki’s home page.

Installing a specific version

If you need a specific version of Grunt or a Grunt plugin, run npm install [email protected] —save-dev where VERSION is the version you need. This will install the specified version, adding it to your package.json devDependencies.

Note that a tilde version range will be used in your package.json when you add the —save-dev flag to npm install . This is typically good, as new patch releases of the specified version will automatically be upgraded as development continues, per semver.

Installing a published development version

Periodically, as new functionality is being developed, Grunt builds may be published to npm. These builds will never be installable without explicitly specifying a version number, and will typically have a build number or alpha/beta/release candidate designation.

Like installing a specific version of grunt, run npm install [email protected] —save-dev where VERSION is the version you need, and npm will install that version of Grunt in your project folder, adding it to your package.json devDependencies.

Note that regardless of the version you specify, a tilde version range will be specified in package.json . This is very bad, as new, possibly incompatible, patch releases of the specified development version may be installed by npm, breaking your build.

In this case it is very important that you manually edit your package.json and remove the

(tilde) from the version number. This will lock in the exact development version that you have specified.

The same process may be used to install a published development version of a Grunt plugin.

Installing directly from GitHub

If you want to install a bleeding-edge, unpublished version of Grunt or Grunt plugin, follow the instructions for specifying a git URL as a dependency and be sure to specify an actual commit SHA (not a branch name) as the commit-ish . This will guarantee that your project always uses that exact version of grunt.

The specified git URL may be that of the official Grunt repo or a fork.

источник

biodiscus

Online Nikon Picture Control Editor

Пошаговая инструкция установки Grunt для PhpStorm под macOS, написанная исключительно для себя в процессе самой установки. Сам процесс очень простой, но как всегда, бывают мелочи, на решение которых тратится драгоценное время. Так вот, чтобы не спотыкаться об эти мелочи, пишу эту короткую памятку.

1. Устанавливаем Node.js и npm.
— скачать LTS версию «Mac OS X Installer (.pkg)» с сайта https://nodejs.org/en/download/
— запустить скаченный файл node-vX.X.X.pkg

Инсталер сообщает, что в пакете находится Node.js и npm, которые будут установлены в /usr/local/. Размер установки занимает 42,5 МБ места на диске.
После установки выводится информация о расположении Node.js и npm:
Node.js was installed at
/usr/local/bin/node

npm was installed at
/usr/local/bin/npm

Проверяем, чтобы директория /usr/local/bin была прописана в нашем $PATH:
echo $PATH
Обычно, по умолчанию, эта директория должна быть в $PATH.

2. Устанавливаем Grunt.
— устанавливаем grunt-cli глобально (опция -g):
sudo npm install -g grunt-cli
После установки выводится путь, куда установился пакет, например:
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bi n/grunt

— устанавливаем grunt локально, в директории нашего проекта. Для этого, в PhpStorm открываем терминал. В терминале должна быть текущая директория с файлом Gruntfile.js. Устанавливаем:
npm install grunt
В корневой директории проекта создасться папка node_modules.

3. Запускаем Grunt в PhpStorm.
В PhpStorm откроем проект, в котором есть файл Gruntfile.js
Если в окне Grunt не отобразится список tasks, а вместо него будет сообщение:
! Failed list to tasks (details). Если это ошибка типа, что не найден grunt-cli,
то нужно кликнуть на details и в диалоговом окне указать, где находится Package grunt-cli, например: /usr/local/lib/node_modules/grunt-cli
После этого перезагружаем список задач grunt — правая кнопка мыши на файле в окне Grunt -> Reload tasks.
Если снова ошибка, то смотрим details. Если это ошибка типа не найден модуль, например:
Error: Cannot find module ‘autoprefixer’
то в терминале PhpStorm проекта необходимо установить пакеты, которые используются в Gruntfile.js и указаны в package.json:
npm install

Снова перезагружаем список задач grunt, теперь должно всё отобразится в окне Grunt.

источник

Getting started

Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager. Grunt 0.4.x requires stable Node.js versions >= 0.8.0 .

Before setting up Grunt ensure that your npm is up-to-date by running npm update -g npm (this might require sudo on certain systems).

If you already have installed Grunt and are now searching for some quick reference, please checkout our Gruntfile example and how to configure a task.

Installing the CLI

Using Grunt 0.3? Please see Grunt 0.3 Notes

In order to get started, you’ll want to install Grunt’s command line interface (CLI) globally. You may need to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to do this.

This will put the grunt command in your system path, allowing it to be run from any directory.

Note that installing grunt-cli does not install the Grunt task runner! The job of the Grunt CLI is simple: run the version of Grunt which has been installed next to a Gruntfile . This allows multiple versions of Grunt to be installed on the same machine simultaneously.

How the CLI works

Each time grunt is run, it looks for a locally installed Grunt using node’s require() system. Because of this, you can run grunt from any subfolder in your project.

If a locally installed Grunt is found, the CLI loads the local installation of the Grunt library, applies the configuration from your Gruntfile , and executes any tasks you’ve requested for it to run. To really understand what is happening, read the code.

Working with an existing Grunt project

Assuming that the Grunt CLI has been installed and that the project has already been configured with a package.json and a Gruntfile , it’s very easy to start working with Grunt:

  1. Change to the project’s root directory.
  2. Install project dependencies with npm install .
  3. Run Grunt with grunt .

That’s really all there is to it. Installed Grunt tasks can be listed by running grunt —help but it’s usually a good idea to start with the project’s documentation.

Preparing a new Grunt project

A typical setup will involve adding two files to your project: package.json and the Gruntfile .

package.json: This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.

Gruntfile: This file is named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins. When this documentation mentions a Gruntfile it is talking about a file, which is either a Gruntfile.js or a Gruntfile.coffee .

package.json

The package.json file belongs in the root directory of your project, next to the Gruntfile , and should be committed with your project source. Running npm install in the same folder as a package.json file will install the correct version of each dependency listed therein.

There are a few ways to create a package.json file for your project:

  • Most grunt-init templates will automatically create a project-specific package.json file.
  • The npm init command will create a basic package.json file.
  • Start with the example below, and expand as needed, following this specification.

Installing Grunt and gruntplugins

The easiest way to add Grunt and gruntplugins to an existing package.json is with the command npm install —save-dev . Not only will this install locally, but it will automatically be added to the devDependencies section, using a tilde version range.

For example, this will install the latest version of Grunt in your project folder, adding it to your devDependencies:

The same can be done for gruntplugins and other node modules. As seen in the following example installing the JSHint task module:

Checkout the current available gruntplugins to be installed and used on your project at the plugins page.

Be sure to commit the updated package.json file with your project when you’re done!

The Gruntfile

The Gruntfile.js or Gruntfile.coffee file is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project, next to the package.json file, and should be committed with your project source.

A Gruntfile is comprised of the following parts:

  • The «wrapper» function
  • Project and task configuration
  • Loading Grunt plugins and tasks
  • Custom tasks

An example Gruntfile

In the following Gruntfile , project metadata is imported into the Grunt config from the project’s package.json file and the grunt-contrib-uglify plugin’s uglify task is configured to minify a source file and generate a banner comment dynamically using that metadata. When grunt is run on the command line, the uglify task will be run by default.

Now that you’ve seen the whole Gruntfile , let’s look at its component parts.

The «wrapper» function

Every Gruntfile (and gruntplugin) uses this basic format, and all of your Grunt code must be specified inside this function:

Project and task configuration

Most Grunt tasks rely on configuration data defined in an object passed to the grunt.initConfig method.

In this example, grunt.file.readJSON(‘package.json’) imports the JSON metadata stored in package.json into the grunt config. Because template strings may reference any config properties, configuration data like filepaths and file lists may be specified this way to reduce repetition.

You may store any arbitrary data inside of the configuration object, and as long as it doesn’t conflict with properties your tasks require, it will be otherwise ignored. Also, because this is JavaScript, you’re not limited to JSON; you may use any valid JS here. You can even programmatically generate the configuration if necessary.

Like most tasks, the grunt-contrib-uglify plugin’s uglify task expects its configuration to be specified in a property of the same name. Here, the banner option is specified, along with a single uglify target named build that minifies a single source file to a single destination file.

Loading Grunt plugins and tasks

Many commonly used tasks like concatenation, minification and linting are available as grunt plugins. As long as a plugin is specified in package.json as a dependency, and has been installed via npm install , it may be enabled inside your Gruntfile with a simple command:

Note: the grunt —help command will list all available tasks.

Custom tasks

You can configure Grunt to run one or more tasks by default by defining a default task. In the following example, running grunt at the command line without specifying a task will run the uglify task. This is functionally the same as explicitly running grunt uglify or even grunt default . Any number of tasks (with or without arguments) may be specified in the array.

If your project requires tasks not provided by a Grunt plugin, you may define custom tasks right inside the Gruntfile . For example, this Gruntfile defines a completely custom default task that doesn’t even utilize task configuration:

источник

Grunt, инструмент для сборки javascript проектов

Grunt — это инструмент для сборки javascript проектов из командной строки с использованием задач. Релиз вышел совсем недавно, автор Ben «Cowboy» Alman, проект есть на github. В этой статье я рассмотрю основы Grunt, его установку и использование.

Обратите внимание, что на данный момент Grunt в статусе beta и активно развивается, при написании статьи использовалась версия 0.3.9.

Установка

Grunt устанавливается как NPM (Node Package Manager) модуль. Если у вас не установлены node.js и npm, то вам нужно установить их. Сделать это можно с официального сайта node.js или, если у вас Mac, используйте homebrew. Затем вам нужно установить npm — менеджер пакетов для node (вы можете провести параллель между npm и ruby gems). Обратите внимание, что если вы устанавливаете node.js с официального сайта, то npm идет в комплекте. Отдельно устанавливать npm нужно только если вы собирали node.js из исходников или использовали homebrew.
Непосредственно установка Grunt выполняется простой командой npm install -g grunt . Флаг -g означает установку глобально, то есть Grunt будет доступен всегда из командной строки, так как установлен в корневую папку node_modules . Если вы хотите запускать Grunt только в определенной папке, то находясь в ней, выполните ту же команду без флага -g . После успешной установки вывод консоли выглядит примерно так:

Если на своем экране вы видите аналогичную картинку, значит Grunt со всеми зависимостями установлен и мы можем приступить к созданию проекта.

Инициализация

Сначала нужно инициализировать новый проект. Grunt содержит несколько удобных шаблонов, позволяющих инициализировать проекты типа commonjs , jquery и node . Для примера, давайте создадим jQuery-проект. Создайте папку для проекта и выполните в ней grunt init:jquery . Вам будет задано несколько вопросов. Значение по умолчанию Grunt показывает в скобках, и если вы не хотите его менять — просто нажмите enter. У меня это выглядело вот так:

Первый файл, который мы рассмотрим, это grunt.js (также его называют gruntfile ). Его содержание может показаться не совсем понятным, не беспокойтесь об этом. Самое важно, что Grunt добавил в файл секцию qunit и создал папку test в проекте. Также он добавил инструкции по объединению файлов и слежению за файлами. Последнее означает автоматический запуск задач при любом изменении файлов:

Эта задача использует файлы из config:lint.files , то есть ссылается на следующую секцию конфига:

Grunt будет автоматически запускать задачи lint и qunit (которые делают именно то, что вы подумали), как только любой из этих файлов изменится. Весьма изящно! я продемонстрирую это чуть позже.
В конце файла вы видите следующее:

Это инструкция для Grunt, что при запуске без параметров нужно выполнить lint , qunit , concat и min .

Запуск

Введите в терминале grunt и нажмите enter. К сожалению, у меня это сработало не так, как ожидалось:

Установка PhantomJS достаточно проста, инструкция есть тут. PhantomJS это консольный движок для Javascript (статья на хабре, прим. переводчика), который позволит нам запускать qunit тесты. После установки PhantomJS вывод консоли для команды grunt будет таким:

Итак, что же сделал этот скрипт:

  1. запустил проверку кода через JSLint
  2. автоматически запустил Qunit тесты, не открывая браузер
  3. объединил все файлы в один (хотя в этом примере у нас и так один файл)
  4. минифицировал объединенный файл

Не знаю как для вас, но для меня эта классный результат для всего одной команды!
Если, скажем, я захочу запускать все эти команды каждый раз, когда я изменил файлы, мне достаточно отредактировать grunt.js . Найдите секцию watch , которая выглядит примерно так:

Я могу добавить сюда задачи concat и min , но как вы помните, мы определили задачу default , которая выполняет все эти действия. Поэтому при изменении файлов я могу просто запустить default :

Конечно, в реальности запускать concat и min каждый раз при сохранении это слишком, я просто хотел показать, что это возможно. Вы можете создать несколько задач, одну для запуска по умолчанию, другую для запуска при релизе, третью для запуска в процессе разработки, и т.д.
Теперь давайте взглянем на js-файл, который был автоматически создан в src/jquery.jsplayground-demo.js . Внутри есть указание лицензии, copyright и ссылка на github — все это добавлено автоматически командой grunt init:jquery . Сейчас давайте внесем изменения в этот файл, чтобы увидеть watch в действии. Во-первых, нужно запустить watch в терминале: grunt watch . Теперь сделаем изменение: я собираюсь ввести невалидный javascript, чтобы мы увидели ошибку JSLint. Я напечатал в файле строку some rubbish stuff и сохранил его. Вывод в терминале автоматически обновился:

Сейчас я исправлю это, однако также удалю весь jQuery код, кроме $.fn.awesome . Grunt автоматически сгенерировал несколько тестов, поэтому когда я сохраню файл, вы увидите как тесты упадут. Так как тестируемый код будет удален.

А теперь я удалю лишние тесты, и все задачи успешно выполнятся:

Только представьте, насколько удобно работать над проектом, запустив grunt watch и зная, что весь код оттестирован, проверен и минифицирован.

Заключение

Надеюсь, этот небольшой обзор вдохновил вас на использование Grunt. Лично я использовал его на нескольких последних проектах и остался доволен.

Прим. переводчика: также советую посмотреть на проект grunt-contrib, в нем собраны наиболее часто встречающиеся задачи при сборке. Успехов!

источник

Installing Grunt on OS X and Windows 7

Am I available?

Maybe, who knows?
I should, so get in touch over at Contact .

Coming primarily from a PC-based development background, I thought it might be useful to provide a step by step guide to installing Grunt on a Mac as well as a Windows 7 PC.

Firstly, Grunt (currently v0.4.0 at the time of writing) is a JavaScript-based task runner; it allows for the automation of repetitive coding tasks allowing you to spend more time on the parts of your project that needs it, or to give Grunt’s own definition:

The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.

which sounds pretty great to me.

Jump to

Installing Grunt for Mac OS X

Firstly, you’ll need to install the Node.js package manager.

Hopefully this will be done automatically for you using the installer (.pkg) that can be downloaded from the Node website, but if you’re having problems, you might be able to install a different way.

Open Terminal, and make sure the Node package manager is installed by typing ‘npm’ and hitting enter, i.e.

If installed correctly, it will give you a list of information such as:

If Terminal is not recognising the ‘npm’ command, you’ll need to try to install in again, perhaps using a different method.

Now, to install Grunt, you’ll need the Grunt CLI (Command Line Interface). In case you’ve installed Grunt before and forgot about it (it happens) it’s recommend that you remove it and start afresh for our purposes. In Terminal, type:

For me, as Grunt was not installed, I received the message:

npm WARN uninstall not installed in /usr/local/lib/node_modules: «grunt»

I then needed to install Grunt CLI globally by typing:

For me this gave me the error code: EACCES, which is seemingly a permission error, so instead I tried:

sudo npm install -g grunt-cli

Which installed the Grunt CLI successfully.

Note, that this only installs the Grunt CLI (not the Grunt task runner). The idea for this is that the Grunt CLI will look for the custom version of Grunt and the Grunt plugins for each project using the Gruntfile provided in the root directory of your project. For more information on setting up a new Grunt project or working with an existing Grunt project, see the official Grunt getting started guide here.

Installing Grunt for Windows 7

Firstly, you’ll need to install the Node.js package manager.

Hopefully this will be done automatically for you using the installer (.msi) that can be downloaded from the Node website, but if you’re having problems, you might be able to install a different way.

Open Command Prompt (to do this you can go to Start and type cmd.exe) and make sure the Node package manager is installed by typing ‘npm’ and hitting enter, i.e.

If installed correctly, it will give you a list of information such as:

If Command Prompt is not recognising the ‘npm’ command, you’ll need to try to install in again, perhaps using a different method.

Now, to install Grunt, you’ll need to install Grunt CLI (Command Line Interface). In case you’ve installed Grunt before and forgot about it (it happens) it’s recommend that you remove it and start afresh for our purposes. In Terminal, type:

For me, as Grunt was not installed, I received the message:

npm WARN uninstall not installed in C:UsersMyNameAppDataRoamingnpmnode_modules: «grunt»

I then needed to install Grunt CLI globally by typing:

Note, that this only installs the Grunt CLI (not the Grunt task runner). The idea for this is that the Grunt CLI will look for the custom version of Grunt and the Grunt plugins for each project using the Gruntfile provided in the root directory of your project. For more information on setting up a new Grunt project or working with an existing Grunt project, see the official Grunt getting started guide here.

Sources:

Comments

12 responses to “ Installing Grunt on OS X and Windows 7 ”

I can run fine on Mac but on Windows7 my grunt install fails (under straight dos-box or cygwin) with Error:UNABLE_TO_VERIFY_LEAF_SIGNATURE

$ npm uninstall -g grunt
$ npm uninstall grunt
$ npm uninstall -g grunt-cli
npm WARN uninstall not installed in AppDataRoamingnpmnode_modules: “grunt-cli”
$ npm uninstall grunt-cli
npm WARN uninstall not installed in C:UsersHalworkspacea2node_modules: “grunt-cli”

$ npm install -g grunt-cli
npm http GET https://registry.npmjs.org/grunt-cli
npm http GET https://registry.npmjs.org/grunt-cli
npm http GET https://registry.npmjs.org/grunt-cli
npm ERR! Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE
npm ERR! at SecurePair. (tls.js:1283:32)
npm ERR! at SecurePair.EventEmitter.emit (events.js:92:17)
npm ERR! at SecurePair.maybeInitFinished (tls.js:896:10)
npm ERR! at CleartextStream.read [as _read] (tls.js:430:15)
npm ERR! at CleartextStream.Readable.read (_stream_readable.js:304:10)
npm ERR! at EncryptedStream.write [as _write] (tls.js:344:25)
npm ERR! at doWrite (_stream_writable.js:211:10)
npm ERR! at writeOrBuffer (_stream_writable.js:201:5)
npm ERR! at EncryptedStream.Writable.write (_stream_writable.js:172:11)
npm ERR! at write (_stream_readable.js:557:24)
npm ERR! If you need help, you may report this log at:
npm ERR!
npm ERR! or email it to:
npm ERR!

npm ERR! System Windows_NT 6.1.7601
npm ERR! command “C:\Program Files (x86)\nodejs\node.exe” “C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js” “install” “-g” “grunt-cli”
npm ERR! cwd C:UsersHalworkspacea2
npm ERR! node -v v0.10.5
npm ERR! npm -v 1.2.18

Any suggestions? Goggling shows this issue as “closed” but its still here in the current (10.5, 1.2.18) versions. Thanks in advance.

Thank you so much. So many sites assume newbies to theme development get the basic steps- which we don’t. This really helped me with my Roots site development:)

To save Mac users from a bit of head scratching:

Before trying to run “npm install” on a project, make sure you have agreed to the Xcode license agreement (and obviously installed Xcode, available for free from the App Store). The easiest way to accept the license is to run the GUI version of Xcode for the first time.

At least that was required for me, installing from the node .pkg file.

Now time to tinker with ModernMail for (hopefully) easy Bootstrap responsive email layouts.
If all goes well, I’ll see how much work needs to be done to make a Bootstrap 3 version.

источник

Читайте также:  Установка дежурных светильников в палатах

Добавить комментарий

Adblock
detector