gulpを使ったSassの自動コンパイル環境

今回はCSSをよりプログラミングチックに書くことができるSassの自動コンパイル環境をNode.jsとgulpを使って構築します.

環境

  • Ubuntu 16.04.3(Xubuntu 16.04.3)

手順

  1. Node.js v6系のインストール
  2. gulp関係のインストール
  3. gulpfile.jsにタスクを登録

apt-getで得られるNode.jsについて

公式(Node.js)からapt-getで入手できる方法が書いてありましたが,実際にインストールし,ヴァージョンを確認したところv4系と古いものでした(v6が2017/10/29での現行のLTS,v8に移行中らしい[参照元]).

apt-getで入手できるv4は来年の4月には保守期間が終了するみたいなので今回はapt-getでのインストールは行いません.

“n” packageを用いたNode.jsの入手

新しいヴァージョンのNode.jsを導入するためにnと呼ばれるNode.jsのヴァージョン管理マネージャーを使います.また,nの使い方については日本語で簡潔に解説された素晴らしいサイトがあったので参考にさせていただきました.

#apt-getでNode.jsとnpmをインストール
$ sudo apt-get install -y nodejs npm

#npmを使って"n"をインストール
$ sudo npm cache clean
$ sudo npm install n -g

#"n"を使ったNode.jsのインストール
$ sudo n stable
$ sudo ln -sf /usr/local/bin/node /usr/bin/node

#apt-getで入手した古いNode.jsとnpmを削除
$ sudo apt-get purge -y nodejs npm

これで最新版のNode.js(v8)が導入されました.

しかし,Sassのコンパイルを行うためのパッケージであるgulp-sassがNode.jsのv8にまだ対応していないようなので,せっかく最新版にしたNode.jsのヴァージョンですがv6に下げます.

$ sudo n 6.11.5

 

gulp関係をインストール

  • gulp-sass : Sassのコンパイル
  • gulp-autoprefixer : コンパイル時にベンダープレフィックスを行う
  • gulp-plumber : コンパイルエラー時にタスクを止めない
  • gulp-pug

作業ディレクトリをカレントディレクトリにして以下をnpmを使ってインストール

$npm init -y

#gulpのインストール
$sudo npm install gulp -g
$sudo npm install gulp --save-dev


#sassのインストール
$sudo npm install gulp-sass -g
$sudo npm install gulp-sass --save-dev

#autoprefixerのインストール
$sudo npm install gulp-autoprefixer -g
$sudo npm install gulp-autoprefixer --save-dev

#plumberのインストール
$sudo npm install gulp-plumber -g
$sudo npm install gulp-plumber --save-dev

#pugのインストール
$sudo npm install gulp-pug -g
$sudo npm install gulp-pug --save-dev

 

gulpfile.jsにタスクを登録

gulpfile.jsには実行するコマンドと監視するディレクトリを登録することでファイルの更新を検知し,自動的にコンパイルを行ってくれます.今回は以下のように作成しました.

var gulp = require('gulp');

var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require("gulp-plumber");

var pug = require('gulp-pug');

gulp.task('scss', function(){
    //scssディレクトリの指定
    gulp.src(['src/scss/*.scss', '!src/scss/_*.scss'])
    //コンパイル実行
    .pipe(plumber())
    .pipe(sass())
    .pipe(autoprefixer())
    //出力先の指定
    .pipe(gulp.dest('dest/css'));
});

gulp.task('pug', function(){
    //ディレクトリの指定
    gulp.src(['src/pug/*.pug', '!src/pug/_*.pug'])
    //コンパイル実行
    .pipe(plumber())
    .pipe(pug({pretty: true}))
    //出力先の指定
    .pipe(gulp.dest('dest'));
});

gulp.task('default', function() {
    gulp.watch('src/scss/*.scss',['scss']);
    gulp.watch('src/pug/*.pug',['pug']);
});

 

gulpの実行

bashでgulpを起動します.

$gulp

 

まとめ

Node.jsとgulpを使ってSassの自動コンパイル環境を作りました.今まではBEM記法でCSSを記述していたのですが,手動で冗長化する作業からは解放されそうです!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top