【Gulp】タスクランナーGulpでSassファイルをコンパイルし 、Autoprefixerでベンダープレフィックスを追加する。

さまざまな処理を自動化できるタスクランナー「Gulp」を利用して、Sassファイルのコンパイルと、 Autoprefixerによるベンダープレフィックスの付与を自動化してみたので、内容をまとめました。

Node.jsをインストール

Gulpを利用するためにはNode.jsが必要なので、以下の公式サイトより推奨版のインストーラーをダウンロードし、Node.jsをインストールします。

Node.js公式サイト

ターミナルやコマンドプロンプトでプロジェクトのフォルダーまで移動する

ターミナル（Mac）やコマンドプロンプト（Windows）を利用して、Gulpをインストールして利用したいプロジェクトディレクトリまで移動します。

Windowsでの移動

cd C:¥Users¥.....¥Gulpをインストールしたいプロジェクトディレクトリ

Macでの移動

cd /Users/....../Gulpをインストールしたいプロジェクトディレクトリ

プロジェクトのjsonファイルを作成

ディレクトリの移動ができたらプロジェクトのjsonファイルを作成します。

npm init -y

Gulpのインストール

プロジェクトディレクトリにGulpをインストールします。

npm install -D gulp

※インストールしたGulpのファイルは、プロジェクトディレクトリの「node_modules」に内包されます。

Sassファイルをコンパイルするgulp-sassをインストール

Sassファイルをコンパイルするのに利用するプラグイン「gulp-sass」をインストールします。

npm install -D gulp gulp-sass

CSS書き出しに利用するその他のプラグインをインストール

そのままGulpでSassをコンパイルするとcharset指定が削除される問題があります。
また、Sassのエラー時にgulpのタスクが毎回終了してしまうので、対策として「gulp-header」、「gulp-replace」、「gulp-plumber」の3つのプラグインも合わせてインストールします。

npm install -D gulp-header gulp-replace gulp-plumber

ベンダープレフィックスを追加するgulp-autoprefixerをインストール

CSSのベンダープレフィックスを追加するのに利用する「gulp-autoprefixer」をインストールします。

npm install -D gulp-autoprefixer

autoprefixerの設定をプロジェクトのjsonファイルに追加

autoprefixerのバージョンアップに伴ってこれまでgulp.jsファイルに設定を書いていたものが利用できなくなりました。
以下のようなエラーが出る場合は、プロジェクトのjsonファイル（package.json）に追加する必要があります。

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option cause some error. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

package.jsonの末尾に追加します。

"browserslist": [
  "last 3 versions",
  "> 5%",
  "iOS >= 9.0",
  "Android >= 4.1",
  "ie >= 11"
]

指定バリエーションはGitHubで確認できます。

Browserslist

Gulpを実行するためのgulpfile.jsを作成

プロジェクトファイル直下に、Gulpを実行するために利用する「gulpfile.js」を作成します。

gulpfile.jsの中身（Gulp 4.0以降の場合）

Gulp 4.0以降とGulp 4.0未満では書き方が異なります。
※以前まではAutoprefixerのベンダープレフィックス対応範囲をgulp.jsに記載していましたが、バージョンアップに伴いjs側の記述は削除しpackage.jsonに追加するように変更しました。

//sassファイルを格納している場所
var sassPass = 'sass/*.scss';
//cssファイルを出力する場所
var cssPass = 'html/common/css/';

// 各Gulpプラグインの読み込み
var gulp = require('gulp');
var sass = require('gulp-sass');
var header = require( 'gulp-header' );
var plumber = require('gulp-plumber');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');

// scssの監視タスクを作成する
gulp.task('default', function () {
	// style.scssファイルを監視
	return gulp.watch(sassPass, function () {
		// style.scssファイルを取得
		return gulp.src(sassPass)
			.pipe(plumber({
				errorHandler: function(err) {
					console.log(err.messageFormatted);
					this.emit('end');
				}
			}))
			.pipe(sass({
				outputStyle: 'expanded' //nested,compact,expanded,compressed 
			}))
			.pipe(autoprefixer({
				cascade: false
			}))
			.pipe(replace(/@charset "UTF-8";/g, ''))
			.pipe(header('@charset "UTF-8";'))
			// Sassのコンパイルエラーを表示
			.on('error', sass.logError)
			.pipe(gulp.dest(cssPass));
			done();
	});
});

gulpfile.jsの中身（Gulp 4.0未満の場合）

※以前まではAutoprefixerのベンダープレフィックス対応範囲をgulp.jsに記載していましたが、バージョンアップに伴いjs側の記述は削除しpackage.jsonに追加するように変更しました。

//sassファイルを格納している場所
var sassPass = 'sass/*.scss';
//cssファイルを出力する場所
var cssPass = 'html/common/css/';

// 各Gulpプラグインの読み込み
var gulp = require('gulp');
var sass = require('gulp-sass');
var header = require( 'gulp-header' );
var plumber = require('gulp-plumber');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');

//Sassファイルをコンパイル
gulp.task('sass', function(){
	gulp.src(sassPass)//sassファイル参照ディレクトリ
	.pipe(plumber())
	.pipe(sass({
		outputStyle: 'expanded' //生成するcssの設定「nested,compact,expanded,compressed」
	}))
	.pipe(autoprefixer({
		cascade: false
	}))
	.pipe(replace(/@charset "UTF-8";/g, ''))
	.pipe(header('@charset "UTF-8";'))
	.pipe(gulp.dest(cssPass)); //cssファイル生成ディレクトリ
});

//Sassファイルが更新されたら自動でコンパイル
gulp.task('watch', function(){
	gulp.watch(sassPass, ['sass']);
});
  
gulp.task('default', ['watch']);

プロジェクトディレクトリの構造イメージ

上記のコードは以下のような環境での例になります。

■プロジェクトディレクトリ
　　┣ sass
　　┃　┗ sassファイル
　　┣ html
　　┃　┗ common ━ css（生成されるcssフォルダー）
　　┣ node_modules
　　┃　┗ Gulpのコアファイル
　　┣ package.json（プロジェクトのjsonファイル）
　　┗ gulpfile.js（Gulpを実行するためのスクリプトファイル）

プロジェクトの環境に合わせて「sassファイル参照ディレクトリ」および「cssファイル生成ディレクトリ」を変更してください。

生成するcssの設定

「生成するcssの設定」の箇所で生成するcssの設定を4種類（nested,compact,expanded,compressed）の中から変更できます。
「compressed」に変更する事でCSSの圧縮が可能です。
それぞれの出力結果は以下のページで確認できます。

Different Sass Output Styles

Autoprefixerの対応範囲

Autoprefixerでのベンダープレフィックス対応範囲は「ベンダープレフィックス対応範囲」で変更する事が可能です。
設定方法については以下などが参考になると思います。

• Autoprefixerの対象ブラウザって、どうやって選べばいいの？
• GitHub – Browserslist Queries

設定したGulpのタスクを実行する

プロジェクトのフォルダーに移動した状態で「npx gulp」もしくは「./node_modules/.bin/gulp」と入力しEnterを押す事でタスクを実行できます。

npm v5.2 以上の場合

npx gulp

npx gulpが利用できない場合

./node_modules/.bin/gulp

タスクを実行するとSassファイルが編集される毎に自動的に、指定したcssディレクトリにコンパイルされたCSSファイルが書き出されるようになります。

【追記：20211004】gulp-sass 5.x系 でエラーが出た場合

gulp-sassが 4.x系から5.x系にアップデートした際にいくつか大きな変更がありました。
・Node.jsのバージョンを12以降にする必要がある。
・「sass」もしくは「node-sass」 を追加でインストールする必要がある。（gulpfile.jsも一部修正する必要あり）

gulp-sass – Migrating to version 5

Node.jsのバージョンを12以降にする

Node.jsのバージョンが低い場合は公式サイトより12以降のバージョンをダウンロードします。

Node.js公式サイト

「sass」もしくは「node-sass」 を追加でインストールし、gulpfile.jsのコードを修正する

今回は「sass」を追加でインストールします。

npm install -D sass

gulpfile.jsのコードを修正

//var sass = require('gulp-sass');を以下に修正
var sass = require('gulp-sass')(require('sass'));

本アップデートにより記述ルールがDart Sass準拠となっているため、styleの書き方にも注意が必要です。
（割り算に「/」が使えない（math.div ()を利用する）、@importではなく@useを使うなど。）

• スラッシュを計算式に使うと警告が出る場合　【Sass】DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
• Sassを@importから@useに置き換えるための手引き

【追記：20190906】gulp-autoprefixer 7.0.0でエラーが出た場合

タスクを実行しようとしたところ、gulp-autoprefixerで以下のようなエラーが発生しました。（発生したバージョン：gulp-autoprefixer 7.0.0）本エラーはnode.jsのバージョンが古いと発生するようです。

/Users/~~~/node_modules/gulp-autoprefixer/index.js:21
(async () => {
		       ^
SyntaxError: Unexpected token (
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:511:25)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object. (/Users/~~~/gulpfile.js:7:20)
    at Module._compile (module.js:541:32)

node.jsを更新するか、gulp-autoprefixerの7.0.0を一度アンイストールし、1つ前のバージョン6.1.0をインストールし直す事で解決しました。

gulp-autoprefixerをアンイストール

npm uninstall -D gulp-autoprefixer

gulp-autoprefixerの旧バージョンをインストール

旧バージョンをインストールしたい場合は末尾に「@バージョン」を追加します。

npm install -D gulp-autoprefixer@6.1.0

gulp-autoprefixerのバージョン一覧

シンプルな「gulp」コマンドを利用する場合

多くのサイトで紹介されている「gulp」コマンドは、以下のコードでグローバルにもGulpをインストールしておく必要があります。

グローバル環境にGulpをインストール

npm install -g gulp-cli

「gulp」コマンドの利用

プロジェクトのフォルダーに移動した状態で「gulp」と入力しEnterを押す事でタスクを実行できます。

gulp

参考リンク

• 絶対つまずかないGulp入門(2018年版) – インストールとSassを使うまでの手順
• gulp.js を今一度キチンと！gulp.js 導入基礎
• gulpでSassをコンパイルするとcharset指定が削除される
• Sassのエラー時にgulpのタスクを終了させない
• Gulpを使ってSassをコンパイルしてみよう
• gulp-autoprefixerを使ってCSSのベンダープレフィックス付与を自動化する
• GulpでSassのコンパイル・Autoprefixer・Minifyの実行をするまでの最低限のこと
• Autoprefixerの対象ブラウザって、どうやって選べばいいの？
• webpackをアップデートしたらgulpfile.jsにautoprefixerの設定書いてるとエラー出るようになったのでpackage.jsonへ移動する
• 【npm/yarn】パッケージをダウングレードする
• npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう
• 「gulp-sass 5」でコンパイルエラー！プラグインとコードを再設定する
• SassError：名前空間「math」のモジュールはありません
• Sassにおける除算で / は非推奨となり、将来的には廃止されます。
• gulp-sass, gulp-plumberを使うときの注意

• Facebook
• X
• LinkedIn
• はてなブックマーク