2018/03/15更新

[フロントエンド] GulpでCSSを圧縮する

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
GulpでCSSファイルを圧縮(minify)する機会があったので、その手順をブログに書きたいと思います。



目次




Gulpとは

Gulpとはフロントエンドのビルドツールの1つです。今回紹介するhtmlの圧縮以外にも、JSの圧縮や結合など色々なことができます。gulpについては「[JavaScript] Gruntの後発のフロントエンドビルドツール、gulpに入門」をご参照ください。



GulpでCSSファイルを圧縮する

LPを制作したり、サードパーティのライブラリを使うときに、圧縮されていないCSSファイルを扱うことがあります。そんなときに圧縮(ミニファイ)するには、Gulpを使うと便利です。

GulpのCSSミニファイはいくつかありますが、gulp-clean-cssが人気もあって良いようです。

インストールはnpmから行います。
$ npm install gulp-clean-css --save-dev

Gulpfileでの使い方は、以下のように行います。
let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', () => {
  return gulp.src('styles/**/*.css')
    .pipe(cleanCSS({ /*オプション指定可能*/ }))
    .pipe(gulp.dest('dist'));
});
「オプション指定可能」では、様々な動作指定を行うことができます。具体的な設定内容は公式のオプション一覧をご参照ください。



最後に

案件でCSSの圧縮を扱ったのでブログにも書いたのですが、ブログを書くときには少し詳しめに調べるので、またそれで勉強になります。人に説明する際にもリンクを共有すれば良いので便利です。ブログ書くのはオススメです〜。

最後になりますが本ブログでは、フロントエンド、PHP、Node.js、Swift、Python、Linux、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。