gulp sass , Web制作

最近使って便利だったgulpのプラグイン - 第1回

SassをCSSにコンパイル、画像の圧縮、svgスプライトの作成等など便利すぎて今の制作には欠かせなくなった「gulp」。
そんなgulpを制作を行う中で便利だと思ったプラグインを3つ紹介します。

merge-stream

このプラグインは1つのタスクで複数のソースを処理するときに使用します。
Sassを使用する環境であればSassのファイルを分割しそれぞれの役割で管理しコンパイルで一つのCSSにまとめるという方法を使われている方をも多いと思います。
しかしSassを使用していない時代であればそれぞれのCSSで管理し、共通部分と各ページのCSSのディレクトリが違うということもあると思います。

追記 - ディレクトリ例がなかったので追記しました

下記ディレクトリであれば一つの箇所にありまとめているから通常のコンパイルでも問題無い

src
┗sass
 ┠_reset.css
 ┠_layout.css
 ┗stle.css

しかし下記のような2つにわかれている構造だと難しくなる。

src
┣common
┃┗sass
┃ ┠_reset.css
┃ ┠_layout.css
┃ ┗common.css
┃
┗sass
 ┠index.css
 ┠company.css
 ┗about.css

上記のようなことが私にも最近ありました。
新規で結構なページを制作する必要があったためSassを使用したいと思いどうにかできないかと検索すると以下の参考サイトに出会いました。
お陰で構造が違う中でもSassを使用することができました。

同じような環境にお困りの方は使用してください。

インストール

npm install gulp merge-stream --save-dev

記述

gulp.task('scss', function () {
    var common = gulp.src('ファイルパス01')
        .pipe(sass())
        .pipe(postcss())
        .pipe(csso())
        .pipe(gulp.dest('ファイルパス01'));

    var product = gulp.src('ファイルパス02')
        .pipe(sass())
        .pipe(postcss())
        .pipe(csso())
        .pipe(gulp.dest('ファイルパス02'));

    return merge(common, product);
});

参考サイト

1つのタスクで複数のソースを使用

gulp-csso

CSSを最適化/軽量化してくれるプラグインです。
以下で紹介する「gulp-postcss」のプラグインと併用したことで、
このブログのCSSをかなり圧縮してくれました。

インストール

npm i gulp-csso --save-dev

記述

gulp.task('scss', function () {
    return gulp.src('ファイルパス')
        .pipe(sass())
        .pipe(csso())
        .pipe(gulp.dest('ファイルパス'));
});

gulp-postcss

最近注目を集めているPostCSSを使用するためのプラグインです。
PostCSSはJSを用いてCSSを変換するツールです。詳細は自分で調べてみて下さい。

PostCSSには便利なプラグインがあり使用することにより、より良いCSSを生成してくれます。

Sassとも一緒に使えるの?

問題ありません。gulp-sassとの併用が可能です。
流れはこんなの感じです。

  1. Sass記述。
  2. SassをCSSにコンパイル
  3. コンパイルされたCSSをPostCSSのプラグインで変換
  4. 完成

gulp-sassとgulp-postcssの使い方は、
詳しくは参考サイトをご確認いただけたらと思います

インストール

npm i gulp-postcss --save-dev

記述

gulp.task('scss', function () {
    return gulp.src('ファイルパス')
        .pipe(sass())
        .pipe(postcss())
        .pipe(csso())
        .pipe(gulp.dest('ファイルパス'));
});

おすすめPostCSSのプラグイン

ちょっとずれてしまいますが、おすすめPostCSSのプラグインを紹介します。

CSS MQPacker

CSS3のメディアクエリをひとまとめにしてくれるプラグインです。
ひとまとめにすることで容量が軽くなります。

コンテンツごとにメディアクエリを指定するとどうしても容量が増えてしまうのでありがたいです。

インストール

npm i gulp-postcss --save-dev

記述

gulp.task('scss', function () {
    return gulp.src('ファイルパス')
        .pipe(sass())
        .pipe(postcss({
        	require('css-mqpacker')
        }))
        .pipe(csso())
        .pipe(gulp.dest('ファイルパス'));
});

参考サイト

まとめ

いかがでしたでしょうか?
gulp-sassをうまく使いたいためのプラグインが集まりましたが、
WEBコーダーにとってSassは必需品!
快適に作れるのであれば越したことはないと思います。

読んでいただいた方のお役に経てば嬉しいです。
ここまで読んでいただきありがとうございました。