CSSJavaScriptWordPressPHPgulp【gulp】CoffeeScriptとBrowserSync導入をメモメモgulpkouraku2015.06.19みなさま、はじめまして。三度の飯より嫁が好き、今年1月に入社したアラフォールーキーkourakuです。最近、gulpの環境構築を進めていたりするので、色々と忘れないうちにメモしておこうと思います。(40に近づくにつれ物覚えが悪くなってきて困ります。)今回はgulpの初歩編、だけどメチャメチャ使える「CofeeScriptでコードを書く準備」と「Browsersyncの導入」についてメモメモ。※gulpのインストールについては、公式サイトやその他紹介サイト等をご参照ください。CoffeeScriptを使いたいCoffeeScript公式サイトgulpの良いところは、処理が速いというのもありますが、何と言ってもコードの見通しの良いところでしょうか。そこをさらにCoffeeScriptを使って書いたりすると、まるでプロパティを設定する感覚でタスクが作れてしまいます。次のコマンドを叩いてCoffeeScriptを使うためのプラグインをインストールします。--save-dev※「$」はコマンドラインを表す記号ですので、実際の入力は不要です。--save-devインストールが完了したら、続いてCoffeeScriptを使えるようにするための準備をします。gulpfile.jsの中身を以下の様に書きます。[gulpfile.js]require('coffee-script/register');require('./gulpfile.coffee');2行目に設定したファイルが実体ファイルになります。ここでは分かりやすくgulpfile.coffeeという名前にして、同名のファイルを作成します。ちなみに、この段階でディレクトリはこんな感じなっています。package.jsonはい、これでCoffeeScriptを使う準備が整いました。続いてBrowserSyncを使えるようにします。BrowserSyncとはBrowserSync公式サイトBrowserSync公式紹介動画ローカルサーバを起動してくれて同一ネットワーク上にある全端末のブラウザを同期してくれてファイル監視もしてくれてファイルに更新が入れば勝手にリロードしてくれるなど、便利な機能を一挙に提供してくれる優れものです。複数のブラウザで同時チェックや、PCとスマホ同時に確認なんかもできてしまいます。今年の初旬から「UI」といった新機能が備わりました。素敵な感じに仕上がってきています。詳細については、公式サイトなどご覧ください。BrowserSyncを導入するということで、BrowserSyncを使うための準備をします。次のコマンドを叩いてインストールします。--save-devインストールが終わったら、次はタスクを作ります。先ほど作成したgulpfile.coffeeを使って、以下の様にコードを書きます。['browser-sync''watch']HTMLやCSS、JavaScriptファイルなどの置き場として、ディレクトリhtdocsを作成しました。ここまでのディレクトリ構成はこんな感じです。gulpとコマンドを叩くと、以下のようなログが流れ、ブラウザが起動します。htdocs/これで、BrowserSyncの機能が使えるようになりました。設定した内容でブラウザも開いています。HTML、CSS、JSを修正すると自動的にリロードが入るのも確認できます。UI機能も活用すれば、PC・スマホの確認がとてもスムーズに進みますね!今回のサンプルデータまとめgulpでタスクを上手く作れば、作業効率もアップするし、新しいことにどんどんチャレンジできるようになりますね。今後もgulpや関連した内容について、メモを残していこうと思います。アルバイトの方を募集中!シーブレインでは、一緒に働いてくれるアルバイトの方を募集しております。興味がある方は、下記リンクをチェックしてください。本番環境と開発環境を分岐するgulp-modegulpishida2018.09.27バシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。