2018.09.26

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

Category: Gulp

Tags, , , ,

タスクランナーGulpでCompassを利用し、Sassファイルのコンパイルする方法をまとめました。
Compassを利用せず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-compassをインストール

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

npm install -D gulp gulp-compass

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

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

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

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

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

// 各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を実行するためのスクリプトファイル)

各ディレクトリの設定はプロジェクトの環境に合わせて適宜変更してください。

関連リンク

Category : Gulp