目次
Node.jsの確認
Nodeがインストールされているか、確認します。
インストールされた状態なら、以下でバージョン確認ができます。
node -v
npm
も使えるようになっています。
npm -v
プロジェクトのルートに移動して、以下を実行。
npm init -y
package.json
が作られます。
次に、タスクランナーのGulpと、GulpでSassとpugをコンパイルするためのモジュールを、ローカルにインストールします。
npm i -D gulp gulp-sass gulp-pug
- Gulp本体
- glup-sass(sassをコンパイルするプラグイン)
- gulp-pug(pugをコンパイルするプラグイン)
これで、Gulpが使える状態になりました。
インストールが完了すると、「node_modules
」というフォルダが生成されていると思います。
Sass用にmqpackerをインストール
次にコンパイルした後に、今回の目的であるメディアクエリをまとめるために、下記の4つをインストールします。
一応、そのほかにも便利なものを入れています。
- PostCSS(cssをコンパイルできる)
- mqpacker(メディアクエリをまとめるプラグイン)
- autoprefixer(ベンダープレフィックスを自動付与)
- declaration-sorter(プロパティの順序を揃える)
npm i -D css-mqpacker gulp-postcss autoprefixer css-declaration-sorter
gulp-postcss の autoprefixer エラーが出た場合
gulp-postcss
で autoprefixer
のバージョン v10 以上を利用するとエラーが発生。
Error: PostCSS plugin autoprefixer requires PostCSS 8.
今回のエラーの原因
- autoprefixer のバージョン v10 以上は postcss のバージョン v8 以上が必要なため
- gulp-postcss が依存している postcss のバージョンが v7 のため
エラーの解決方法
エラーメッセージを確認するとURLが表示されています。
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
リンクをクリックすると PostCSS 8 for end users というページが表示され、様々な利用シーンでの解決方法が記載されています。
この記述によると
- gulp-postcss のバージョンを v9 以上にする
- postcss をインストールする
というわけで、指示どおりインストールすると解決できました。
npm i gulp-postcss@9.0.0 postcss -D
gulpfile.jsを作成する
フォルダの直下に、「gulpfile.js
」というファイルを作成します。
gulpfile.js
の内容を以下のように記述します。
// gulpプラグインの読み込み
var { src, dest, watch } = require("gulp");
var sass = require("gulp-sass");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var mqpacker = require("css-mqpacker");
var cssdeclsort = require("css-declaration-sorter");
var pug = require("gulp-pug");
// Sassをコンパイルする
const compileSass = () =>
src("sass/*.scss")
// Sassのコンパイルを実行
.pipe(
sass({
outputStyle: "compressed",
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on("error", sass.logError)
)
// sassの後に指定
.pipe(postcss([cssdeclsort({ order: "smacss" })]))
.pipe(postcss([autoprefixer()]))
.pipe(postcss([mqpacker()]))
// cssフォルダー以下に保存
.pipe(dest("css"));
// Sassファイルを監視
const watchSassFiles = () =>
watch("sass/*.scss", compileSass);
// pugをコンパイルする
const compilePug = () =>
src("pug/*.pug")
.pipe(
pug({
pretty: true
})
)
.pipe(dest("./"));
// pugファイルを監視
const watchPugFiles = () =>
watch("pug/*.pug", compilePug);
// npx gulpで実行される関数
exports.default = () =>
watchPugFiles();
watchSassFiles();
Gulpのタスクを実行して自動コンパイル
npx gulp
Ctrl+C
で監視を止めることができます。
以上で、PugとSassの自動コンパイルの完了です。
WindowsでSassのコンパイルだけエラーが出た場合
以下のようなエラーが出た場合の対処方法です。
[14:49:55] Starting 'compileSass'...
Error in plugin "gulp-sass"
Message:
gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:
var sass = require('gulp-sass')(require('sass'));
[14:49:55] The following tasks did not complete: default, compileSass
[14:49:55] Did you forget to signal async completion?
Sassのコンパイルだけ失敗するようです。
以下のように対応します。
$ npm i -D sass node-sass
gulpfileのvar sass
の行を以下に書き換えます。
var sass = require('gulp-sass')(require('sass'));
これでコンパイルできるようになりました。