ど〜も〜、文明開化の足音を発するエンジニア 中尾こと、 Hawk(と呼ばれたい) です。
関東もついに梅雨入りしたそうですね!(2017/6/7に梅雨入り発表)
雨で外に出れないとなるとプログラミングも捗りますね!
ちなみに私は自宅では プログラミングをしてはいけないという呪い(大嘘) がかけられているので、残念ながら梅雨でも捗りません。。。

さてさて、前回から引き続き、gulpを一からイジって見た企画 第弐話 〜gulpfileの価値は〜 になります!

前回の内容が気になる奇特な方はこちらからどうぞ!
> 第壱話を見てみる

それでは、はりきっていきましょ〜!

まずはファイルの準備

まずは下記のようにディレクトリ構造を作りましょう!

gulp_template
 ├ package.json … mpnファイル
 ├ node_modules … node関連がごちゃごちゃ入っている(自動生成される)
 ├ product … ファイルの出力先(納品用)
 │ └ index.html … topビュー仮置き
 └ src … 開発用ソース保存先

index.html は試しに下記のようにして見ましょう!

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>gulpの見本だよ!</title>
</head>
<body>
  <h1>これはgulpの見本だよ!</h1>
</body>
</html>

なんの面白みのないhtmlかと思います。

viewを表示させよう!

せっかく index.html を準備したので、viewみたいですよね?
もちろん、ただのhtmlファイルなので、ブラウザで確認できるのですが、せっかくなので、gulpを使って見て見ましょう!
まずは、gulp_template と内に移動し、下記のコマンドを実行します。
もちろん、macの方は sudo を付けてください!

npm install browser-sync --save-dev

すると、package.jsondevDependenciesが下記のように変化しているかと思います。

  "devDependencies": {
    "browser-sync": "^2.18.12",
    "gulp": "^3.9.1",
  }

無事、browser-sync が追加されました!

そして、真打登場!!
gulpfile.js を作りましょう!
保存先はgulp_templateの直下に置きましょう。

gulp_template
 └ gulpfile.js … gulpの設定ファイル

そして、中身は下記のように書きます。

var gulp = require("gulp");
var browser = require("browser-sync");

// gulpコマンド実行時のタスク
gulp.task("default",['server'], function() {
});
// サーバー起動
gulp.task("server", function() {
    browser({
        server: {
            baseDir: "./product/"
        }
    });
});

これで、準備完了です!
ターミナルで下記のコマンドを実行!

gulp

すると、自動的に新しいタブで index.html が立ち上がるはず!!

「普通のHTMLやんけ!こんなん、ブラウザでHTMLファイル見んのと変わらんやんけ!!」 というクレームが聞こえてきそうですが、ちゃんとローカルサーバー上で立ち上がっています。
通常状態ですと http://localhost:3000/ で立ち上がると思います。
もし、localhost:3000がすでに使用されている場合は、適当に空いているポートで立ち上がります。(基本3000から連番)

また、localhostの部分をIPアドレスに変更してあげると、外部のPCからでも参照できます。
例えばこんな感じ
IPアドレス:111.222.3.444の場合
http://111.222.3.444:3000/

同然ながら、ローカルサーバーが立ち上がってることが前提ですが、IE検証safari検証など実機での確認の時に何気に役に立ちますよ〜

次回予告

ようやく gulpfile.js の真価を目の当たりにしたHawk(と呼ばれたい)
しかし、Hawk(と呼ばれたい)に息つく暇はなかった。
次々と襲い来る謎の刺客に精神が崩壊するHawk(と呼ばれたい)
そんな時に新たな刺客が!
次回、「sass、来襲」
お楽しみに!

> 第参話を見てみる

Shere
  • はてなブログ
  • Twitter
  • Facebook
今更ながら一からgulpなるものをイジって見た 第弐話〜gulpfileの価値は〜

Writer

  • Name

    中尾鷹人

  • Position

    神にもっとも近いと言われていると思っている感じを出しつつ、今日も自分なりに頑張って業務をこなそうと思いながら、なかなかやる気の出ないフロントエンジニア

  • Profile

    昔々あるところにえらい神様がおりました。 えらい神様はとても残念なことがあり、洞窟の中に隠れてしまいました。 するとどうゆうことでしょう。世界が暗闇に包まれてしまいました。他の神様たちは相談し、えらい神様に洞窟から出てもらうように説得しました。なんやかんやあって、なんとか洞窟の扉を開けることに成功しました。扉を開けると眩しい光に包まれました。 すると中からえらい神様となぜかえらそうな神様が出てきました。 そのなぜかえらそうな神様がのちにフロントエンジニアとなって活躍するのは別のお話。