2018.09.26

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

Category: Gulp

Tags, , , ,

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

Gulpのインストール・下準備

Gulpのインストールや、JSONファイル生成の下準備までは以下を参考にしてください。

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