ビットスターでは、昨年から月に1回の金曜日に「TGIF」（Thank God It’s Friday）というイベントをしていて、これまでの1年あまり、様々なテーマでネタが披露されています。
私も昨年2月に、Web制作を効率化できるタスクランナーであるgulpとBrowserSyncについて発表しましたので、紹介させて頂きます。
※1年近く前に発表した内容なので、ちょっと古いかもしれませんが、基本的な考えはさほど変わっていないはずです。
gulpは、Web制作の中で、毎回行うような作業を自動化してくれるツールです。
gulpについての基礎については、札幌でフリーランスで活躍しているh2hamさんのブログで紹介されていますので、よろしかったらご覧ください。
https://h2ham.net/gulp-basic
一般的にgulp、BrowserSyncは、
というようなことを自動化するために使うことが多いようです。
Sass/SCSSは、CSSスタイルシートの定義を構造化して書くことでコーディング効率やソースコードの保守性を向上させる技術です。
札幌でも、3年ほど前から勉強会などでSass/SCSSについて取り上げられてきて、広く普及してきているようです。
具体的には、弊社のブログで以前取り上げられているので、よろしければご覧ください。
スタッフブログ｜scssでcssのメンテナンスを楽にする｜ビットスター株式会社 – ITにかかわる全てをご提供するIT企業
なお、gulpは一般的に静的HTMLベースのページ制作で使われることが多いようで、
PHPなどによる動的ページで使われるというのはあまり聞いたことがありませんでした。
調べてみると、gulpではftpやsftpによるファイルの転送もできる、というのを見つけましたので、
PC内に作ったVMWareやVirtualBoxなどの仮想環境に開発サーバを構築して開発する際のタスク自動化を試してTGIFで発表しました。
ファイルの更新を監視し、phpファイルが更新されれば開発サーバにファイルをアップロード、scssファイルが更新されればcssにコンパイルしたうえでアップロードし、
BrowserSyncによって表示が自動的に更新される、というような流れを作ってみました。
TGIFで発表した内容をベースに、SaCSSという勉強会で発表したスライドを以下に貼り付けますので、ご覧頂ければと思います。
なお、このときに実際に作ってみたタスク定義のgulpfile.jsをgithubに載せてありますので、こちらもよろしければご覧ください。
https://github.com/murakami0923/sacss63-doc/blob/master/gulpfile.js
(M.clacla)
