TIL

Today I Learned. 知ったこと、学んだことを書いていく

【Gulp】インストールからSassのコンパイルまで - CSS

CSS Sass

SassのコンパイルをするときにGulpというものを使うといいって聞いたことあるからインストールとコンパイルを行ってみた

Gulpはめんどくさいことを自動で行ってくれたりするらしい。

環境

OS

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.13.3
BuildVersion:   17D102

Node.js

$ node --version
v8.7.0

コンパイル

プロジェクト毎にGulpをインストールして色々設定をしないといけない スクリプト作ったほうが良さそう...いつかやろう

プロジェクト設定ファイルの作成

$ npm init -y

package.jsonとpackage-lock.jsonというファイルが作られる

SCSS記法のSassのコンパイル

Gulp本体(gulp)とコンパイルするためのモジュール(gulp-sass)をインストールする

$ npm install -D gulp gulp-sass

-Dオプションを付けてカレントディレクトリに対してインストールする
-Dは--save-devの省略した形らしい。また、installはiでもいいらしい

記事によってはnpm install -g gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。2017年現在、それは少数派です。この記事で説明しているように、グローバルにはGulpをインストールせずローカルだけにインストールするのがフロントエンド界隈では一般的です。

タスクの作成

自動で実行したい処理をgulpfile.jsに記述する必要がある

// 使用するプラグインを読み込む
const gulp = require('gulp');
const sass = require('gulp-sass');

// タスク
gulp.task('default', function () {
  // css/style.scssを選択
  gulp.src('css/style.scss')
    // コンパイル
    .pipe(sass({
      // 見やすくする
      outputStyle: 'expanded'
    }))
    // コンパイルしたファイルをcssフォルダに格納
    .pipe(gulp.dest('css'));
});

pipeを使うことで処理をつなげることができる

タスクの実行

$ npx gulp

gulpfile.jsに記述されているタスクを実行してくれる

Sassファイルが更新されたら自動でコンパイルする

Watchという機能を使うことで自動でコンパイルできるようになるらしい

gulp.watch()メソッドを使うことで、更新があった場合に自動で処理を実行してくれるらしい。

gulp.watch(ファイル名, 処理)

watchメソッドの処理の部分にコンパイル処理を渡す

const gulp = require('gulp');
const sass = require('gulp-sass');
const src = 'css/style.scss';

gulp.task('default', () => {
  // 更新時にコンパイル
  gulp.watch(src, () => {
    gulp.src(src)
      .pipe(sass({
        outputStyle: 'expanded'
      })
      // Sassコンパイルエラー表示(必須！！)
      .on('error', sass.logError))
      .pipe(gulp.dest('css'));
  });
});

また、コンパイルエラーの表示処理も入れてあげないといけないらしい

監視の開始

$ npx gulp

Ctrl+cで止めることができる


こんな感じで使えるようにはなった！！ いろんな事ができるらしいから、使っていくうちに試していこう

参考文献