さくら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/へアップロード

	var gulp = require('gulp');
	var minifyCSS = require('gulp-minify-css');
	gulp.task('minify-css', function() {
	//minifyしたいCSSの場所(各自パスに応じて)
	gulp.src('html/user_data/packages/default/css/*.css')
	.pipe(minifyCSS({keepBreaks:true}))
	//minifyされたCSSの出力先
	.pipe(gulp.dest('html/user_data/packages/default/minifycss/'))
	});
	gulp.task('default',['minify-css']);

view raw gistfile1.js hosted with ❤ by GitHub

gulpを実行

$ gulp

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

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

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

	@charset "utf-8";
	/************************************************
	import css
	************************************************ */
	@import url("./reset.css");
	@import url("./common.css");
	@import url("./contents.css");
	@import url("./table.css");
	@import url("./bloc.css");
	@import url("./bloc_alpha.css");
	@import url("./popup.css");
	@import url("./print.css");

view raw gistfile1.css hosted with ❤ by GitHub

変更後

	@charset "utf-8";
	/************************************************
	import css
	************************************************ */
	@import url("../minifycss/reset.css");
	@import url("../minifycss/common.css");
	@import url("../minifycss/contents.css");
	@import url("../minifycss/table.css");
	@import url("../minifycss/bloc.css");
	@import url("../minifycss/bloc_alpha.css");
	@import url("../minifycss/popup.css");
	@import url("../minifycss/print.css");

view raw gistfile1.css hosted with ❤ by GitHub

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


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