RollupでjQueryを使う方法では、RollupでjQueryを読み込んで既存のjQueryプラグインを使う方法をいくつか試しましたが、今回はさらに自作プラグインを使う方法について触れます。プロジェクト内プラグインが増えるたびにrollup.config.jsを編集するのはめんどうなので、multi input/outputを設定しない前提の内容となってます。プロジェクトの構成「plugin」はプ...

GulpでRollupを使う / rollup-stream、rollupの続きです。RollupでjQueryを読み込んで既存のjQueryプラグインを使う方法をいくつか試した備忘録です。slickを例にしてます。import $ from ‘jquery’;でjQueryを読み込む場合他ライブラリとの衝突を防がない場合バンドル時にjQueryを含めるかどうかにかかわらず下記のコードで実行できます。app.js他ライブラ...

gulpでRollupを動かして、Babelで処理するJavaScriptライブラリ作成の環境づくりを試してみました。主にrollup-streamとrollupについて触れてます。プロジェクトの準備npm init -yやtouchするなどして、Gulpを使う前提のプロジェクトを用意します。環境node: 12.3.1npm: 6.9.0gulp: 4.0.2macOS: 10.14ファイルの基本構成rollupの設定はgulfile.jsではなくrollup.c...

2018年2月14日に加筆・修正をしました。凝った作りのWebサイトは、どうしても重くなって表示速度が落ちます。画像やCSS、javascriptも圧縮しているのに、なぜか重い。そういうケースに遭遇したので試したことを残します。画像の圧縮率を上げるページを重くするのは結局、画像です。TinyPNGなどのサービスで画像を圧縮するのが手軽です。また、gulpを使用している...

セレクタは右から左に解釈されるため、セレクタの階層を減らせばレンダリング効率は上がるようです。とはいえ、実際のCSSの管理を考えると必要以上に手間をかけるかどうか悩ましいところなので、できるだけ意識する程度で良い気もします。特にSassでCSSを書く場合、その書きやすさから階層を深く書いてしまいがちです。検証として機能モジュール別にクラスを管理...

2018年7月4日に加筆・修正をしました。先日、MacBook Pro 13インチ Early 2015 を購入したついでに、AnsibleとHomebrewを使って開発ツールやアプリのインストールをできるだけ自動化してみたので、その備忘録を残します。Xcodeのインストール何はともあれXcodeが必要なのでターミナルでインストール。sudo xcodebuild -license下記を言われた後にダイアログが出た...