SSIのように外部ファイル化したパーツを1枚のHTMLに合成するgulpタスク
SSIのインクルードのような感覚でソースの一部を別ファイルから呼び出すgulpタスクです。 可読性を良くするために長いHTMLを分割したり、くりかえし呼び出す共通パーツに使ったり、ejsやpugを導入するほどでもないとき …
「開発環境」の記事一覧
Vuexミニマム導入
Vuexをモジュールで導入するときの基本的な環境設定です。設計思想というより、最低限の動作環境を手配するやりかたになっています。 サンプルは、ページ内にVueコンポーネントのいいねボタンを複数設置し、値をVuexで共通管 …
Nodeを10以上にするとnode-sassとgulp-sassがエラー
結論 node-sassはupdateしてからrebuild エラー内の、「node-sassをrebuildしようね」というメッセージに促されるままrebuildを試して解消されないエラー首を捻っていましたが その前に …
Nuxtのlocalhostをhttps://ローカルIP:portにする
Nuxt.jsの起動コマンドnpm run devを実行するとhttp://localhost:3000 で開発サーバが立ち上がります。 localhostをローカルIPに変更 ネットワークグループ内でWi-fi接続して …
Node.jsの環境構築で失敗したとき試したこと
Node.jsの開発環境を設定しているとたまに、他のパソコンでは正常に実行できたコマンドでこけて環境を構築できないことがあります。そんなときに試したことを、備忘としてまとめました。 Node.jsをnodebrew管理に …
GoogleChromeの開発ツールで圧縮後のJavaScriptをデバッグ
Google Chromeの開発者ツールが、いつの間にか圧縮してあるスクリプトを可読化してデバッグできるようになっていました。 圧縮後のソースで動いている本番環境では不具合が起きているけど、開発環境の圧縮前ソースで再現さ …
Gitのリポジトリ単位でコミットアカウントを使い分ける設定
Gitのコミットに記録される、名称とメールアドレスを仕事用リアルネームと、個人用のハンドルネームなど、状況に応じて出し分けたい場合があります。 特定のプロジェクト（リポジトリ）ではこのアカウント名で、というときはpull …
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ファイルを書き出 …
webpackでCSSをバンドルする
webpackでCSSも含んだJavaScriptを生成したいときの設定メモ。 css-loaderとstyle-loaderを追加 webpack.config.js のmoduleへ設定を追記 webpackのent …