NetbeansでGulpしよう!

2017年7月31日

Netbeans IDEでgulpを使いたい!

Netbeans 8.2で、とりあえずgulpタスクを実行することが目標。

準備

Node.js

gulpを動かすのにまずNode.jsを使います。インストールパッケージを公式からダウンロードします。

https://nodejs.org/ja/

ダウンロードしたら普通のソフトウェアのようにインストール。

作業用フォルダを準備

中身はこんなイメージで

publicフォルダ(公開用ファイル)
┣cssフォルダ
┗index.html
pugフォルダ
scssフォルダ
package.json
gulpfile.js

gulpfile.jsを用意しておく

用途に合わせて作ってください。今回はたくさん入れてます。

あとでgulpタスクを実行するタイミングで、このファイルの内容が利用されます。

Netbeansでプロジェクト作成

Netbeansでnpmの設定ファイルを作成⇒gulpインストール

NetbeansにQuickOpenerプラグインをいれる。

ツール ⇒ プラグイン から、QuickOpenerを入れると、ターミナルなどのアイコンが出るようになります。

Netbeansのターミナルを開く

※netbeans 8.2です

gulpを使いたいプロジェクトを右クリックして、
メニューから「Open in Terminal」でターミナルを開く

npmの設定ファイルを作成

ちょっと時間がかかりますが、ここで一回止まります。
設定を入れていくんですが、とりあえずEnterで先にすすめばOK。

Is this OK? (yes)

でEnterすれば、設定ファイルは終わり。

このままターミナルで、gulpのインストールをします。

gulpのグローバルインストール

これはお使いのパソコンで初めてgulpをつかうとき必須。

二回目以降は下記のローカルインストールだけで動く様子。

gulpのローカルインストール

パッケージインストール

今回はscss、pug、オートプレフィクサー(pleeease)と、エラー時gulpタスクを終了させないplumber。

インストールが終わるとこんな感じ。

gulpを実行しよう

ターミナルでも実行できるのですが、せっかくなのでnetbeansで実行。

Gulpタスクのところが「Gulpの構成」と出ていたら設定が必要です。

「検索」を押して、gulpパスを変更して、適用しましょう。

設定が終わると、

少し時間がかかりますが、gulpfile.jsで設定したタスクが選べるように。

基本的にdefaultを実行すればOK。

実行すると下記のように。

今回のタスクだと、実行のタイミングではブラウザシンクが動いてブラウザが立ち上がれば成功。