トンボロ

スタッフブログ

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

    ,  2017/06/09

    フロントエンドのコーディング効率化を図るべく、弊社では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, いろいろあります)……悩ましいところです。

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

    タグ: ,