Grunt使いこなしてないけど、Gulp導入してみた
世の中には、「Grunt使いはGulp使うべし!」のような記事がたくさん存在している。
でも待って欲しい。私のような化石フロントエンドはそもそもGruntなんて使ってなかった。(インストールはしたが)
そんな希少な人間だって生きていて良いハズなのです。
というわけで、Grunt使ってない系の人間がGulpを導入してみました。
Gulpのインストール
公式のGetting Startedがわかりやすい。
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
gulpfile.jsをつくる
上の記事を参考に「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 });
これは一体何をしているのか?下記の記事にわかりやすく書いてあった。
最初の「var gulp = require('gulp');」で変数定義。
必要なパッケージをここで読み込む。パッケージの数だけ変数が増えていく感じになる。
次の「gulp.task('タスク名', 関数)」で実行するタスクを設定。
タスク名「default」がデフォルトで実行するタスクのよう。
とりあえず導入するだけはできたので、次からは実際に使ってみます。