gulpでshift_jisとCR+LFの開発環境を構築

gulpでSassコンパイルやBrowsersyncを使った自動更新を使うことが多いのですが
案件によっては、文字コードにshift_jisの指定があるものがあります。

gulpでshift_jisを取り扱うにあたり、懸念点となるのはこの4つ

  1. SassはCSS1行目の@charsetをUTF-8と固定出力してしまう
  2. Browsersyncはshift_jisが文字化けする
  3. jQueryなどのライブラリ類の文字コードはshift_jisに変えたくない
  4. 画像までshift_jis変換すると化ける

まずは

と対処した上で
ポイントには、このように対応してみました。

サンプルをGitHubで確認

“gulpでshift_jisとCR+LFの開発環境を構築”の続きを読む

gulpをグローバルインストール

gulpは、node.jsで動くタスクランナーです。

タスクランナーとは、ざっくりいうと
scssのビルドや画像の圧縮、ソースの圧縮などの定形タスクを
まとめて実行してくれる仕組みのことです。

タスクランナーは、Javascriptで動きJSONで記述できるGRUNTで知名度があがりましたが
およそ2014年以降は、逐次処理のGRUNTよりも、並行処理できるgulpのほうが、やや人気が高いです。

参考:
5分で導入できる! タスクランナーGulpを使ってWeb制作を爆速にしよう – ICS LAB

“gulpをグローバルインストール”の続きを読む