LoginSignup
0
1

More than 1 year has passed since last update.

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

Posted at

今回は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'));

参考ファイル

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1