タケユー・ウェブ日報

Ruby on Rails や Flutter といったWeb・モバイルアプリ技術を武器にお客様のビジネス立ち上げを支援する、タケユー・ウェブ株式会社の技術ブログです。

IntelliJ IDEA / WebStorm で Grunt Task を（かんたんに）実行したい

NodeJS

f:id:uzuki05:20141028185855p:plain

2013年時点でのやりかたをまとめて下さっている方もいますが、この時点ではタスクごとに設定を追加するというもののようで、なんだかめんどくさそうです。

ですが、ドキュメントを眺めていると、どうやら現在のバージョンでは、Gruntfileからタスクを列挙してくれ、面倒な下準備はほとんどなしにIDE上で実行することができるようです。

https://www.jetbrains.com/idea/webhelp/installing-and-removing-external-software-using-node-package-manager.html

A number of tools are started through Node.js, for example, the CoffeeScript, TypeScript, and LESS transpilers, YUI, UglifyJS, and Closure compressors, Karma test runner, Grunt task runner, etc. The Node Package Manager (npm) is the easiest way to install these tools, the more so that you have to install Node.js anyway.

試してみたのでメモ。

環境

  • Windows 7 Professional SP1 64bit
  • IntelliJ IDEA
    • Ultimate Edition 13.1.5
    • NodeJS Plugin 135.1141
  • NodeJS 0.10.33
  • grunt 0.4.5
  • grunt-cli 0.1.13

インストール

Using Grunt Task Runnerの通りに進めればOKでした。

NodeJS

僕はWindowsユーザーなので、nodistを使いました。

>nodist -v
0.5.2

>node -v
v0.10.33

>npm -v
1.4.6

Grunt

grunt-cli

grunt-cliをGlobalで入れます。

npm install -g grunt-cli

grunt

gruntをプロジェクトローカルで入れます。

npm install grunt

NodeJS Plugin

Settings > Plugins > Install JetBrains plugin... よりNodeJSプラグインをインストールします。

NodeJS Plugin

設定

Settings > Node.js and NPM よりNodeJSのバイナリ（node.exe）を指定します。正しいバイナリを選択すると、その下の「Version」にNodeJSのバージョンが入ります。

僕はnodistを使用しているのでC:\nodist\v\0.10.33\node.exeの使用したいバージョンのものを選びました。

Node.js and NPM

使い方

プロジェクト内にGruntfile.jsまたはGruntfile.coffeeを配置

GruntFile.js

Tools > Open Grunt Console

Open Grunt Console

Grunt Console

実行したいタスクをダブルクリック

Run Grunt Task

以上でIDEA上でGrunt Taskを実行できました。