さくらVPS(CentOS)でEC-CUBEのPCのCSSをgulpでminifyする

EC-CUBEのPCのCSSをgulpを使ってminifyする。

サーバー：さくらVPS
OS:CentOS

初期インストール状態でGoogleのPageSpeed Insights結果





Consider Fixing:のMinify CSSをgulpを使って修正したいと思います。

まずはサーバーのECCUBEをインストールしたディレクトリへ

$ cd /var/www/html/eccube/

gulpをインストールします

$ npm install gulp

gulpのminify用のプラグインをインストール

$ npm install gulp-minify-css

gulpfile.jsに下記内容を記載して/var/www/html/eccube/へアップロード

gulpを実行

$ gulp

html/user_data/packages/default/minifycss/にminifyされたcssが出力されます

EC CUBEのimport.cssをminifyされたcssを読み込むように変更

html/user_data/packages/default/css/
変更前

変更後


修正後読み込むと、1点上がっています。


Minify CSSの項目が残っていますが、こちらはjqueryのcolorbox.cssなので今回はこれでOKです。