2020.03.24　【更新日 : 2023.11.02】

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

Category：: Gulp
Tags：: css, Gulp, sass, タスクランナー

2018年〜2019年頃に執筆した記事の簡易版です。
現行環境での動作保証はできません。

以前まとめたものの簡易版です。
詳細を確認しながら順を追って作成したい場合は以下ページを参照してください。

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

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

【初回のみ】Node.jsをインストール

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

Node.js公式サイト

初期設定ファイルの準備

以下より必要なベースファイルをダウンロードし、環境を構築したい場所にZIPファイルを展開します。

※【20201004追記】gulp-sass が5.x系へアップデートした際、sassの仕様がDart Sass準拠となり書き方に変更がありました。

ファイルの中身

package.json： gulpなどツール一式をインストールするための情報が書いてあります。
gulpfile.js： gulpを動かすための設定が書いてあります。

環境を構築したい場所までターミナルで移動する

ターミナル（Mac）やコマンドプロンプト（Windows）を利用して、package.jsonを格納したフォルダまで移動します。

Macでの移動

package.jsonを格納したフォルダを右クリックし「フォルダに新規ターミナルタブ」を選択すると、環境を構築したい場所まで移動した状態でターミナルが立ち上がります。
※右クリックメニューに存在しない場合は、［システム環境設定］→［キーボード］の［ショートカット］タブで［サービス］にある［フォルダに新規ターミナル］にチェックを入れてください。

ターミナルで直接入力し移動する場合は以下のコマンドで移動します。

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

Windowsでの移動

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

ツール一式をインストール

gulpなどインストールすべきファイル一式の情報は、package.json内に書いてあるため「npm install」と入力しEnterを押すことでインストールを開始できます。

npm install

Sassファイルを書き出す場所の設定

gulpfile.js内にSassファイルを書き出すための設定を書きます。
場所の設定はそれぞれ以下に書いてあるため必要に応じて変更してください。

Sassファイルの格納場所を設定（gulpfile.jsの2行目）
CSSファイルの出力場所を指定（gulpfile.jsの4行目）

gulpfile.jsの中身【Dart Sass版】package.zip

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

// gulpプラグインの読み込み
var gulp = require('gulp');
var sass = require('gulp-sass')(require('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({
				//cssの圧縮設定　通常：expanded　圧縮：compressed
				outputStyle: 'compressed' //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の中身【node-sass（LibSass）版】package.zip

//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())
			.pipe(sass({
				//cssの圧縮設定　通常：expanded　圧縮：compressed
				outputStyle: 'compressed' //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();
	});
});

ベースファイルが想定しているファイル構造

ベースファイルの初期設定は以下の構造を想定しています。

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

Gulpを実行する

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

npm v5.2 以上の場合

npx gulp

npx gulpが利用できない場合

./node_modules/.bin/gulp

上記を実行するとSassファイルの監視が始まり、Sassファイルを編集し保存するごとに処理が行われるようになります。
処理が実行されるとgulpfile.jsで指定したCSSファイルの出力場所に、コンパイルされたCSSファイルが自動的に書き出されます。