2018年の終わりに改めてgulpでsass(scss)をコンパイルする【決定版】

2018年の終わりに改めて gulp 4系で sass (scss) をコンパイルする

2018年の終わりが目前に迫った年の暮れ、改めて gulp にて sass をコンパイルする環境を構築してみました。

仕様

• gulp 4系を用いる
• scss を css にコンパイルする
• autoprefixer でベンダープレフィックスを補完する
• minify （以下 圧縮）した .min.css も生成する
• 圧縮していない css に sourcemaps を付与する

ディレクトリ構造

root/
 ├─ dist/            # コンパイルされたファイルの出力先
 │ └─ css/             # cssのディレクトリ
 │   ├─ main.css         # 出力されるsourcemaps付きのcssファイル
 │   └─ main.min.css     # 出力される圧縮された本番用cssファイル
 │
 ├─ src/             # コンパイル前のファイルの保存先
 │ └─ scss/            # scssのディレクトリ
 │   ├─ main.scss        # コンパイル対象のscssファイル
 │   └─ _module.scss     # パーシャル化されたscssファイル
 │
 ├─ gulpfile.js
 ├─ package.json
 └─ node_modules/

gulp でコンパイルする環境を整える

gulp のインストール

まずは gulp をインストールする。
（※ yarn を使用する場合は上を、npm を使用する場合は下をターミナルから実行してください）

# yarn 
yarn add gulp --dev

# npm
npm install gulp --save-dev

gulp-sass のインストール

sass をコンパイルするため、gulp-sass をインストールする。

# yarn 
yarn add gulp-sass --dev

# npm
npm install gulp-sass --save-dev

gulp-autoprefixer のインストール

ベンダープレフィックスを補完するため、gulp-autoprefixer をインストールする。

※ ベンダープレフィックスとは一言で説明すると、特定のスタイルを各ブラウザに対応させるために付与する必要のある接頭辞（-webkit-, -moz-, -ms-, -o- など）のこと

# yarn 
yarn add gulp-autoprefixer --dev

# npm
npm install gulp-autoprefixer --save-dev

gulp-sourcemaps のインストール

sourcemaps の付与を行うため、gulp-sourcemaps をインストールする。

※ sourcemapsとは一言で説明すると、ブラウザでのデバッグ時にコンパイル前のソースコードを確認できるようにするためのコンパイル前後の関係を表したもの

# yarn 
yarn add gulp-sourcemaps --dev

# npm
npm install gulp-sourcemaps --save-dev

gulp-clean-css のインストール

コンパイルした css を圧縮するため、gulp-clean-css をインストールする。

# yarn 
yarn add gulp-clean-css --dev

# npm
npm install gulp-clean-css --save-dev

gulp-rename のインストール

圧縮した css のファイル名に.minを追加するため、gulp-rename をインストールする。

# yarn 
yarn add gulp-rename --dev

# npm
npm install gulp-rename --save-dev

gulpfile.js に処理を記述する

まずは今回作った gulpfile.js の全貌です。

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');

const paths = {
  'src': {
    'scss': 'src/scss/**/*.scss',
  },
  'dist': {
    'css': 'dist/css/',
  }
};

gulp.task('sass', done => {
  gulp.src(paths.src.scss)
  .pipe(sourcemaps.init())
  .pipe(sass({
    outputStyle: 'expanded',
  }).on('error', sass.logError))
  .pipe(autoprefixer({
    browsers: ['last 2 versions'],
  }))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest(paths.dist.css))
  .pipe(cleanCSS())
  .pipe(rename({
    suffix: '.min',
  }))
  .pipe(gulp.dest(paths.dist.css));
  done();
});

gulp.task('dev', () => {
  gulp.watch(paths.src.scss, gulp.task('sass'));
});

必要なパッケージの定義

インストールした、必要なパッケージを以下のように定義します。

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');

scss, css ファイルのパスを指定

コンパイルの対象となるディレクトリ, コンパイル後の保存先のディレクトリを、今回のディレクトリ構造に合わせて以下のように定義します。

const paths = {
  'src': {
    'scss': 'src/scss/**/*.scss',
  },
  'dist': {
    'css': 'dist/css/',
  }
};

コンパイルタスクの定義

gulp.src() にてコンパイル対象のパスを指定し、.pipe() で処理をパイプします。
まず、sourcemaps に対応させた状態で sass() でコンパイルを行います。
その後、ベンダープレフィックスを autoprefixer() にて補完し、gulp.dest() にて出力先に保存します。
更に、cleanCSS() で圧縮を行い、rename() で .min を付与した状態でも保存します。

gulp.task('sass', done => {
  gulp.src(paths.src.scss)
  .pipe(sourcemaps.init())
  .pipe(sass({
    outputStyle: 'expanded',
  }).on('error', sass.logError))
  .pipe(autoprefixer({
    browsers: ['last 2 versions'],
  }))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest(paths.dist.css))
  .pipe(cleanCSS())
  .pipe(rename({
    suffix: '.min',
  }))
  .pipe(gulp.dest(paths.dist.css));
  done();
});

scss ファイルを変更し保存する度にコンパイル

scss ファイルが変更し保存される度に、上記で定義したコンパイルタスクを実行します。（※ 今回はこの処理の名前をdevとしました）

gulp.task('dev', () => {
  gulp.watch(paths.src.scss, gulp.task('sass'));
});

package.json の記述

まずは今回作った package.json の全貌です。

{
  "dependencies": {},
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.4"
  },
  "scripts": {
    "dev": "gulp dev"
  }
}

devDependencies の部分に今回使用するパッケージ一覧が記載されています。
また、scripts の部分の "dev": "gulp dev" でタスクの実行について定義しています。

実行方法

ここまでで記載してきた package.json, gulpfile.js が存在するディレクトリでにて以下をターミナルより実行してください。

# yarn 
yarn run dev

# npm
npm run dev

まとめ

最後までご覧いただきありがとうございました。
以前ほど gulp を使用する機会は減ってしまったものの、慣れているせいもあってか便利なので改めてまとめてみました。

また、browser-sync などもタスクとして連携するとより便利にコーディングを行うことができるので、いいねをしていただけましたら時間のある時に追記したいと思います(笑)