端末の多様化につれ記述量が膨大になってきたCSS。SASSはCSSを拡張し、変数の利用やセレクタのネストを可能にする。本記事はGulpを導入し、簡単にSassをコンパイルできる開発環境の構築を目指します。

この記事はWindows向けです。MacOSの方は必要に応じて読み替えてご覧ください。

SASS(SCSS)とは？

SASSとは、CSSを拡張した「メタ言語」という分野の言語です。SASSの仲間にSCSSがあります。読みは両方共「サス」です。SASSはインデントスタイルの省略記法ですが、SCSSは通常のCSSと同じ{}と;を省略しない記法です。拡張子はそれぞれ.sassと.scssになります。本稿では、.sassではなく.scssを使います。

CSSが需要に対しあまりにも貧弱なため、独自の言語としてSASSが定義されました。.scssのままではブラウザで解釈できませんので、トランスパイラと呼ばれるもので.cssにトランスパイルし、それをブラウザに読み込ませて使用します。

Gulpとは？

Gulpはタスクランナーと呼ばれ、Node.js上で動作するコマンドラインツールです。プラグインにより様々なタスクを自動化出来ます。本記事ではこのGulpを使って.scssを保存した際、自動で.cssにトランスパイルする環境を構築します。

GulpでのSCSS開発環境を構築する手順

目標は、「.scssを保存したら、プリフィックスが付与されて、ソースマップが付与されて、minifyされたcssが指定フォルダに自動生成される」環境の構築です。

Node.jsのインストール

Node.js公式にアクセスし、Currentバージョンをダウンロードしてインストールして下さい。

コマンドラインツールを起動し、
node -vと打ち込んで下さい。
Node.jsのバージョンが返ってきたらインストール成功です。

Gulpのインストール

コマンドラインツールで、
npm install -g gulp-cliと打ち込んで下さい。
数分時間がかかりますが、気長に待ちます。

処理が終わったらgulp -vと打ち、インストールの成功を確認して下さい。

次に、実際にプロジェクトを作成して.scssのトランスパイルを行います。

npmプロジェクトの作成

今後、新規案件でGulpを利用する際は、「npmプロジェクト」というNode.jsの管理下で開発を行うことになります。簡単に構築できますので安心して下さい。

まずは、任意のフォルダを任意の場所に作成し、移動します。

mkdir gulp-test
cd gulp-test

npmプロジェクトファイルを作成します。

npm init

たくさん質問されますが、全てEnterしてください。

フォルダを確認すると、package.jsonファイルが出来ていると思います。
このファイルがnpmプロジェクトの設定ファイルとなります。

プロジェクトフォルダへGulpをインストール

グローバルとは別に、プロジェクト毎にGulpをインストールします。（そういうものです）

npm install -D gulp

-Dは、--save-devの短縮形で、基本的にプロジェクトにGulpやプラグインをインストールする時は必ず付けます。

Gulpのプラグインをインストール

プリフィックスを付与したりソースマップを付与したりミニファイするプラグインをインストールします。

npm install -D gulp-sass gulp-autoprefixer gulp-sourcemaps gulp-minify-css

数分かかります。

Gulpの設定ファイルを作成

gulpの設定ファイルを作成します。
gulpfile.jsを作成し、以下を記述してプロジェクトフォルダに保存します。

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var minifyCss = require('gulp-minify-css');

gulp.task('scss-compile', function() {
    return gulp.src('./scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            // outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
            cascade: false
        }))
        .pipe(minifyCss({advanced:false})) // minify
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./css'));
});

gulp.task('default', function() {
    gulp.watch('scss/**/*.scss', {cwd: './'}, ['scss-compile']);
});

上記の設定ですと、scssとcssフォルダが必要ですので作成します。

以上で環境構築が完了しました。
あとは実際に.scssを書いてトランスパイルを試すことが出来ます。

Gulpで.scssをコンパイルする

コマンドプロンプトでgulpをインストールしたプロジェクトフォルダに移動します。

cd gulp-test

gulpを実行します。

gulp

これで.scssが保存された際、自動で.cssにトランスパイルされる状態になりました。

scssフォルダに、.scssファイルを作成します。
以下の記述をtest.scssとして保存してください。

$color:#000;
body {
    color:$color;
    opacity:0.5;
}

保存した瞬間、cssフォルダにトランスパイルされた.cssファイルが格納されます！
scssのコンパイル、プリフィクスの付与、ソースマップの生成、ミニファイが行われていると思います。

body{color:#000;-webkit-transition-duration:.5s;transition-duration:.5s}
/*# sourceMappingURL=../maps/test.css.map */

今後は新規プロジェクトの際に毎回この環境構築手順を実行してください。
面倒くさく感じるかもしれませんが、実際に発行するコマンドは３つ程です。

Gulpには他にも画像を圧縮するプラグインや、HTMLをテンプレート化するプラグイン、メディアファイルにハッシュを付加するプラグインなど、実用的なものがたくさんあります。

必要に応じてプロジェクト毎にインストールしたり破棄したりするのが簡単にできるのがGulpのいいところです。ぜひ色々お試しください。

以上です。

yoshi44ever

はじめてのgulp-sass