Web production note

　【更新日 : 】

【Gulp】タスクランナーGulpでCompassを利用し、Sassファイルをコンパイルする。

Category：
Gulp
Tags：
, , , ,

タスクランナーGulpでCompassを利用し、Sassファイルのコンパイルする方法をまとめました。

Compassを利用せずGulpでSassファイルをコンパイルし 、Autoprefixerでベンダープレフィックスを追加する方法は以下を参考にしてください。

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

【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-compassをインストール

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

npm install -D gulp gulp-compass

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

その他書き出しに必要なプラグイン「gulp-header」、「gulp-replace」、「gulp-plumber」の3つのプラグインも合わせてインストールします。

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

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

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

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

Gulp 4.0以降とGulp 4.0未満では書き方が異なります。

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

// compassを利用してSassファイルをコンパイル
gulp.task('default', function () {
	// style.scssファイルを監視
	return gulp.watch('sass/*.scss', function () {
		// style.scssファイルを取得
		return gulp.src('sass/*.scss')
			.pipe(plumber())
			.pipe(compass({
				config_file: 'config.rb', //config.rbファイル参照ディレクトリ
				comments: false,
				css: 'html/common/css/',//cssファイル生成ディレクトリ
				sass: 'sass/'//sassファイル参照ディレクトリ
			}))
			.pipe(replace(/@charset "UTF-8";/g, ''))
			.pipe(header('@charset "UTF-8";'))
			.pipe(gulp.dest('html/common/css/'));
			done();
	});
});

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

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

// compassを利用してSassファイルをコンパイル
gulp.task('compass', function(){
    gulp.src('sass/*.scss')//sassファイル参照ディレクトリ
	.pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
	.pipe(compass({
        config_file: 'config.rb', //config.rbファイル参照ディレクトリ
        comments: false,
        css: 'html/common/css/',//cssファイル生成ディレクトリ
        sass: 'sass/'//sassファイル参照ディレクトリ
    }))
	.pipe(replace(/@charset "UTF-8";/g, ''))
	.pipe(header('@charset "UTF-8";\n\n'))
    .pipe(gulp.dest('css/'));
});

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

config.rbファイルを作成

Compassの利用に必須なconfig.rbファイルも作成します。

config.rbファイルの中身

プロジェクトに合わせて適宜調整してください。

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "html/css"
sass_dir = "sass"
images_dir = "html/common/images"
javascripts_dir = "html/common/js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# Encoding.default_external = 'utf-8'

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

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

上記のコードは以下のような環境での例になります。
各ディレクトリの設定はプロジェクトの環境に合わせて適宜変更してください。

■プロジェクトディレクトリ
　　┣ sass
　　┃　┗ sassファイル
　　┣ html
　　┃　┗ common ━ css（生成されるcssフォルダ）
　　┣ node_modules
　　┃　┗ Gulpのコアファイル
　　┣ config.rb（Comaassを実行するためのrbファイル）
　　┣ 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

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

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

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

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

npm install -g gulp-cli

「gulp」コマンドの利用

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

gulp

関連リンク

参考リンク