kinalog

自称フロントエンドエンジニアが何か喚いています。

Grunt使いこなしてないけど、Gulp導入してみた

世の中には、「Grunt使いはGulp使うべし!」のような記事がたくさん存在している。
でも待って欲しい。私のような化石フロントエンドはそもそもGruntなんて使ってなかった。(インストールはしたが)
そんな希少な人間だって生きていて良いハズなのです。

というわけで、Grunt使ってない系の人間がGulpを導入してみました。

Gulpのインストール

公式のGetting Startedがわかりやすい。

github.com


Gruntと同じく、node.jsとnpmが入っていればインストールは簡単。

$ npm install --global gulp

globalをつけるとグローバルにgulpをインストールできる(gと同じ。)

$ gulp -version
[14:18:48] CLI version 3.8.11

versionコマンドを試してみて、こんな感じになればインストール完了。

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

Gruntと同じく、プロジェクトごとにインストールする必要があるので、該当のフォルダに移動した後下記のコマンドを入れる。

$ npm install gulp --save-dev

※ちなみに「--save-dev」は「-D」としても同じみたい。qiita.com

package.jsonをつくる

$ npm init

この辺はGruntと同じ。

gulpfile.jsをつくる

qiita.com

上の記事を参考に「gulpfile.js」ファイルを作って、gulpコマンドを実行。

$ gulp
[16:57:53] Using gulpfile ~/Desktop/WORKS/Test/gulpTest/gulpfile.js
[16:57:53] Starting 'default'...
Hello World!
[16:57:53] Finished 'default' after 96 μs

Hello World!が表示された。

gulpfile.jsの内容

公式のGettingStartedを見ると、glupfile.jsの内容はこんな感じ。

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

これは一体何をしているのか?下記の記事にわかりやすく書いてあった。

ottan.xyz

最初の「var gulp = require('gulp');」で変数定義。
必要なパッケージをここで読み込む。パッケージの数だけ変数が増えていく感じになる。

次の「gulp.task('タスク名', 関数)」で実行するタスクを設定。
タスク名「default」がデフォルトで実行するタスクのよう。


とりあえず導入するだけはできたので、次からは実際に使ってみます。