2018.05.18

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

Category: Gulp

Tags, , ,

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

Node.jsをインストール

Gulpを利用するためには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
npm install -D gulp-replace
npm install -D 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 7",
  "Android 4",
  "IE 8"
]

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

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

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

gulpfile.jsの中身(Gulp 4.0未満の場合)

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

// 各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('sass/*.scss')//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('html/common/css/')); //cssファイル生成ディレクトリ
});

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

gulpfile.jsの中身(Gulp 4.0以降の場合)

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

// 各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('sass/*.scss', function () {
		// style.scssファイルを取得
		return gulp.src('sass/*.scss')
			.pipe(plumber())
			.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('html/common/css/'));
	});
});

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

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

■プロジェクトディレクトリ
  ┣ 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の圧縮が可能です。
それぞれの出力結果は以下のページで確認できます。

Autoprefixerの対応範囲

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

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

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

gulp

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

gulpコマンドが Not Foundになる場合

gulpコマンドがNot Foundになる場合は、以下のコードでグローバルにもGulpをインストールし、再度gulpコマンドを実行すると動作すると思います。

npm install -g gulp-cli

参考リンク

Category : Gulp