Gulpを使用した便利タスク

TOPGulpの知識Gulpを使用した便利タスク

プリフィクサーの追加（autoprefixer）
1. 動かしてみよう！
  1. 出力後
CSSの最小化（minify）
1. 動かしてみよう！
  1. 出力後
まとめとサンプルファイル

プリフィクサーの追加（autoprefixer）

ベンダープレフィクス（prefix）を自動で追加することで、ブラウザの互換性を向上させます。

コマンドプロンプトを開いて作業用のディレクトリに移動した後、下記をコピペ

npm i gulp-autoprefixer -D

gulpfile.mjsに下記をコピペ

import gulp from 'gulp';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import prefix from 'gulp-autoprefixer';
const sass = gulpSass( dartSass );

gulp.task('sass', function () {
  return gulp.src('sass/**/*.scss') // ソースディレクトリのパスに適宜変更
    .pipe(sass().on('error', sass.logError))
    .pipe(prefix({
      overrideBrowserslist: ['last 2 versions']
    }))
    .pipe(gulp.dest('css')); // 出力先ディレクトリのパスに適宜変更
});

gulp.task('watch', function () {
  gulp.watch('sass/**/*.scss', gulp.series('sass'));
});

動かしてみよう！

下記のような scss の記述を実行すると

body {
  background: linear-gradient(0deg, #000,#fff);
}

.flex {
  display: flex;
}

出力後

body {
  background: -webkit-gradient(linear, left bottom, left top, from(#000), to(#fff));
  background: linear-gradient(0deg, #000, #fff);
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

このように各ブラウザの最新の2つのバージョンに対してAutoprefixerがベンダープレフィックスを自動的に追加します。

例えば、ブラウザがバージョン10、11、12の3つのバージョンがある場合、'last 2 version' を指定すると、Autoprefixerはバージョン11と12に対してベンダープレフィックスを追加します。

CSSの最小化（minify）

CSSを最小化してファイルサイズを軽減することができます。

コマンドプロンプトを開いて作業用のディレクトリに移動した後、下記をコピペ

npm i gulp-clean-css -D

gulpfile.mjsに下記をコピペ

import gulp from 'gulp';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import prefix from 'gulp-autoprefixer';
import cleanCSS from 'gulp-clean-css';
const sass = gulpSass( dartSass );

gulp.task('sass', function () {
  return gulp.src('sass/**/*.scss') // ソースディレクトリのパスに適宜変更
    .pipe(sass().on('error', sass.logError))
    .pipe(prefix({
      overrideBrowserslist: ['last 2 versions']
    }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('css')); // 出力先ディレクトリのパスに適宜変更
});

gulp.task('watch', function () {
  gulp.watch('sass/**/*.scss', gulp.series('sass'));
});

動かしてみよう！

下記のような scss の記述を実行すると

body {
  background: linear-gradient(0deg, #000,#fff);
}

.flex {
  display: flex;
}

出力後

body{background:-webkit-gradient(linear,left bottom,left top,from(#000),to(#fff));background:linear-gradient(0deg,#000,#fff)}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}

このようにスペースの余白や、改行が削除されたい状態でコンパイルされます。

軽量化を行うことでWebサイトの読み込みを早くし、訪問者により快適にWebサイトを見ていただくことができるようになります。