WordPressでGulpを使用してSassをコンパイルしてみよう

今回はWordPressのテーマをSassで書く機会があったので、Gulpを使用したコンパイルの設定をおさらいします。

#1. Node.jsのインストール

今回は割愛させていただきます。

#2. package.jsonファイルの生成

WordPressの任意テーマのディレクトリ下に移動して下記コマンドを実行。

$ cd ~/public/wp-content/themes/任意のテーマ

初期化してpackage.jsonファイルを生成します。

$ npm init -y

#3. 必要なプラグインのインストール

$ npm install --save-dev gulp 
$ npm install --save-dev gulp-sass
$ npm install --save-dev gulp-autoprefixer

#4. gulpfile.jsの作成と編集

任意のテーマディレクトリ直下でgulpfile.jsを作成し、下記のコンパイルと自動化の設定を記述する。

const gulp = require("gulp");
const sass = require('gulp-sass')(require('node-sass'));
const autoprefixer = require('gulp-autoprefixer')

gulp.task("sass", function() {
  return gulp.src("./assets/scss/*.scss") 
      .pipe(sass({ outputStyle: "expanded" })) 
      .pipe(autoprefixer()) 
      .pipe(gulp.dest("assets/compile")) 
});

gulp.task('default', function() {
  gulp.watch('./assets/scss/*.scss', gulp.task('sass'));
});

コンパイル対象のファイル先を指定

gulp.src("./assets/scss/*.scss") 

コンパイルする際のアウトプットスタイルを指定

.pipe(sass({ outputStyle: "expanded" })) 

スタイル①

.pipe(sass({outputStyle: 'nested'}))

#hoge {
  width: 600px; }
  #hoge p {
    color: red; }
    #hoge p span {
      color: blue; }
  #hoge div {
    width: 300px; }

スタイル②

.pipe(sass({outputStyle: 'expanded'}))

#hoge {
  width: 600px; 
}
#hoge p {
  color: red; 
}
#hoge p span {
  color: blue; 
}
#hoge div {
  width: 300px; 
}

スタイル③

.pipe(sass({outputStyle: 'compact'}))

#hoge { width: 600px; }
#hoge p { color: red; }
#hoge p span { color: blue; }
#hoge div { width: 300px; }

スタイル④

.pipe(sass({outputStyle: 'compressed}))

#hoge { width: 600px; }#hoge p { color: red; }#hoge p span { color: blue; }#hoge div { width: 300px; }

必要なベンダープレフィックスを自動で付与

.pipe(autoprefixer()) 

コンパイルしたファイルの出力先を指定
assetsディレクトリ直下にcomplieディレクトリを作成しておきましょう。

.pipe(gulp.dest("assets/compile")) 

タスクを走らせる毎にコンパイル対象ファイルの更新を監視する

gulp.task('default', function() {
  gulp.watch('./assets/scss/*.scss', gulp.task('sass'));
});

#5. タスクを走らせよう

scssファイルを編集するたびにcssファイルにコンパイル処理が自動で行われます。

$ npx gulp

#設定中に出たエラー

エラー名忘れちゃったけど、node-sassが必要だよ！！と言われたのでインストールと設定して解決しました。

$ npm install --save-dev node-sass

gulpfile.js

const sass = require('gulp-sass')(require('node-sass'));

#参考ファイル