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

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

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

gulpfile.jsの中身

// 各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({
		browsers: ['last 2 versions', 'ie >= 8', 'Android >= 4', 'iOS >= 7'], //ベンダープレフィックス対応範囲
		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以降の場合は上記コードではエラーとなるため、コードを以下に変更します。

// 各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({
				browsers: ['last 3 versions', 'ie >= 8', 'Android >= 4', 'iOS >= 7'], //ベンダープレフィックス対応範囲
				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