cleancssでCSSをサクッとMinify

November 11, 2017

GoogleのPageSpeed InsightsでCSSの最適化しろとよく指摘されるので、手っ取り早くminifyする方法を調べた。 どうやら「Clean CSS」を使うのが簡単っぽい。 単体だとコマンドラインから実行できないようなので、CLI用のライブラリをインストールした。 ■ Clean CSS Cli https://github.com/jakubpawlowicz/clean-css-cli インストール $ npm install -g clean-css-cli minify $ cleancss foo.css bar.css > style.min.css コメントを削除したくない場合は、コメントの記述方法を/*! 〜 */のようにすれば削除されなくなる。 File Watch PhpStormのFile WatchにClean CSSを設定すると、自動でminifyできて楽。 忘れないようにスクショをとっておく。 まず、Preferencesから「File Watch」を選択。「+」で「Clean CSS」を作成。 設定を↓のような感じで埋める。 Scope:カスタムでスコープを作成する(詳細は後述) Arguments:minifyするCSS。1ファイル化もしたかったのでワイルドカード指定。順序が影響してくる場合は別の方法で1ファイル化した上でそのファイルをここに指定。 Output Path〜:出力先のファイルを入力 Clean CSSはデフォルトで標準出力にCSSを出力するので、Advanced OptionsのCreate output file from stdoutにチェックを入れる。 スコープ(ファイルの変更監視箇所)は↓のように設定。 CSSディレクトリを選択して、Include Recursivelyを設定すると、ディレクトリ以下すべて監視になる。

rsyncでシンプルにデプロイする

November 3, 2017

サクッとファイルをアップロードできるのでrsyncをよく使う。 間違えやすいので仕事では使わず、ファイル全上書き消失してもいいようなときだけ使っている。 ドライランでアップロード内容の確認。 $ rsync -e "ssh -i ~/.ssh/id_rsa" -avzcn /path/to/dir user@example.com:/home/XXXX/upload/to/ 実際にアップロード。 $ rsync -e "ssh -i ~/.ssh/id_rsa" -avzc /path/to/dir user@example.com:/home/XXXX/upload/to/

ローカルにJenkinsをインストールする

November 2, 2017

$ brew install jenkins http://0.0.0.0:8080 にアクセスすると、セットアップウィザードがはじまる。 いかんせんローカルマシンが貧弱なので、プラグインのインストールに少し時間がかかったが、特に引っかからず完了。 このページもJenkinsからデプロイしています。

© 2017 Hiroaki Matsuura