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

最近使って便利だった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は必需品！
    快適に作れるのであれば越したことはないと思います。

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

    コメント一覧