SSIのように外部ファイル化したパーツを1枚のHTMLに合成するgulpタスク
SSIのインクルードのような感覚でソースの一部を別ファイルから呼び出すgulpタスクです。 可読性を良くするために長いHTMLを分割したり、くりかえし呼び出す共通パーツに使ったり、ejsやpugを導入するほどでもないとき …
「gulp」の記事一覧
gulp.js内でコマンドを実行したいときはchild_process
gulp.jsの処理内でコマンドを実行したいときは、child_processを読み込みます。child_processはNode.jsに含まれているので、installしなくてもそのまま読み込めば使えます。 参考:ht …
browserSyncのrewriteRulesでSSI
WEBサーバで、SSI（Server Side Include）というのを使えるようにするとこの書式で、外部データをHTMLの一部として読み込めます。 npmパッケージでおなじみのbrowserSyncでSSIを使うとき …
gulp-sassでautoprefixerを併用するとsourcemapが書き出されない対策
このようなgulp-sassでsassをコンパイルし、gulp-autoprefixerでベンダープレフィックスを自動付与する設定があり gulp-sourcemapsを追加してcssのsourceMapファイルを書き出 …
package.jsonのscriptsでローカルインストールしたgulpでtaskを実行
執筆当時の2017年5月は、gulpはバージョン3.9.1でしたが ベータ版のgulp4が公開されていたので、それをローカルインストールしてプロジェクトを作成してみました。 gulp4をローカルインストールすると、pac …
gulp4でTypeErrorがでるときはgulp-cliが原因
gulp4を使用しているプロジェクトをnpm installから展開し、gulpのdefaultタスクを実行しようとすると このようなエラーがでました。 調べてみると、gulp4とgulp-cliのバージョンが噛み合わな …
gulpでshift_jisとCR+LFの開発環境を構築
gulpでSassコンパイルやBrowsersyncを使った自動更新を使うことが多いのですが 案件によっては、文字コードにshift_jisの指定があるものがあります。 gulpでshift_jisを取り扱うにあたり、懸 …
gulpをグローバルインストール
gulpは、node.jsで動くタスクランナーです。 タスクランナーとは、ざっくりいうと scssのビルドや画像の圧縮、ソースの圧縮などの定形タスクを まとめて実行してくれる仕組みのことです。 タスクランナーは、Java …