gulp+Sassを使ってみる

はじめに

今回はgulpを使います。ひとまずgulpをインストールしてsassファイルをコンパイルするところまで進めましょう。

gulpの使い方は以下の記事を参考にしています。

絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA

step1 package.jsonファイルの作成

npm init -yで作業用プロジェクト直下に作成します。こんな感じ

f:id:asssy:20191127132927p:plain

step2 gulpをインストール

gulpを実行するためにプロジェクトフォルダ以下で使用できるようにローカル環境にインストールします。

npm i -D gulp

メモ:installiで省略可能。また、--save-dev-Dで省略可能。

ちなみに--save-devとはインストールされたプラグイン名とバージョンが記載されているdevDependenciesというキーを指定することです。

step3 Sassをコンパイル

まずはnpm i -D gulp gulp-sassでSassをコンパイルするためのプラグインをインストールします。

つづいてコンパイルの処理を書くために、プロジェクトファイル直下にgulpfile.jsを作成して、以下のように記述します。

//gulp, sassプラグインの読み込み
const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('default',function() {
    return(
        gulp
            .src('css/style.scss')
            .pipe(sass())
      //cssフォルダに保存する
            .pipe(gulp.dest('css'))
    );
});

ここまで書いたらSassファイルをコンパイルしてみましょう。タスクの実行はnpx gulpです。

うまくいけばcssフォルダにコンパイルされたstyle.cssファイルが作成されています。こんな感じです。

f:id:asssy:20191127132956p:plain

閉じかっこが改行されていないのが気になる方は、出力時のスタイルをオプション指定します。

gulp.task('default',function() {
    return(
        gulp
            .src('css/style.scss')
            //出力したときのオプションを指定する
            .pipe(sass({
                outputStyle: 'expanded'
            })
            )
            .pipe(gulp.dest('css'))
    );
});

watch機能でファイルの更新をしたら自動コンパイルで実行する

ファイルを更新するたびに自分で実行するのは面倒くさくなってくるので、Watch機能を使って編集後に自動コンパイルできるようにしちゃいましょう。

watch機能とは、watch()メソッドで、「監視するファイル」に変更があった場合、設定された処理が実行されることです。style.scssに更新があったら、自動でstyle.cssにコンパイルされます。

コードはこんな感じ

gulp.task('default',function() {
  //style.scssファイルを監視
    return gulp.watch('css/style.scss',function(){
        return(
            gulp
                .src('css/style.scss')
                .pipe(sass({
                    outputStyle: 'expanded'
                })
                 //コンパイルエラーを表示する。これがないと自動的に止まってしまいます
                .on('error',sass.logError)
                )
                .pipe(gulp.dest('css'))
        );

    });
    
});

ここまでSassをコンパイルすることができました。terminalでやるの面倒だな、GUIでやりたいなという人におすすめなのが、Preprosというアプリです。

無料で使えて操作が楽なので簡単です。