gulp-sass + BrowserSyncでコーディングする際の gulpfile メモ

フロントエンドのコーディング効率化を図るべく、弊社ではgulpを利用しています。秘伝のタレのように少しづつgulpfileに材料を足していき、だいぶ熟成が進んできましたので、2017年6月現在での最新版をメモしておこうと思います。

gulpfile.jsサンプル

Sass編集時はストリーム、他はリロード

BrowserSyncの自動リロードは便利ですが、scssを少し編集するたびにリロードし、スクロール位置が動いてしまい不便なことがあります。そんなときはreloadのかわりにstreamを指定しておくと、ページ全体ではなく修正部分だけが反映されて便利です。

AutoPrefixerでベンダープレフィックス自動付加

モダンなブラウザではCSS3対応も進み、以前に比べればベンダープレフィックスが必要な場面も減りました。それでも一部の古いスマホ等では、対応が必要なことがあり、うっかりプレフィックスを付け忘れてレイアウトが大きく崩れたりします。AutoPrefixerさえ入れておけば、何も考えずに済みますので、とりあえず入れておくのが吉です。

BrowserSyncの通知を無効化

ブラウザの画面右上に出てくるBrowserSyncの通知が、見たいものを隠してしまって困るときがあります。BrowserSyncの初期化時に notify: false を指定しておくと地味に便利です。

npm install のかわりに yarn add を使う

npmに比べてインストールが早いだけでなくnode_modulesの容量が小さくなるメリットもあります。ただし本家のnpmも最近はかなり良くなったようです。

ところで Windows にて gulp をはじめ Node.js を利用するには、いくつかの方法があります。たとえば nvm や nodist などを使って Windows 用の Node.js を入れるか、それとも Bash on Ubuntu on Windows のほうに入れるか? 後者であれば Node.js のバージョン管理には何を使うべきか?(nvm, nodebrew, n package, いろいろあります)……悩ましいところです。

話が長くなりそうですので、次回また続きを書きたいと思います。

株式会社トンボロはWordPress専門のウェブ制作会社です。

WordPressサイトの制作や、カスタマイズを承ります。
お見積りは無料です。お気軽にお問い合わせください。