はじめに
今回はgulp-sassを使ってsassのコンパイルをする方法について説明していきます。
gulpでsassをコンパイルできるようになると、ファイルの一括読み込みやベンダープレフィックスの自動付与など面倒な作業を楽にしてくれるようになります。
sassをgulp以外の方法でコンパイルしている方はぜひ参考にしてください。
その他gulpのおすすめのプラグインはこちら
gulpの使い方まとめについてはこちら。
gulpfile.jsのテンプレート紹介についてはこちら。
それではgulpでsassをコンパイルする説明に移ります。
gulpでsassをコンパイルするメリット
そもそもgulpでsassをコンパイルするメリットについて説明しておきます。
sassをコンパイルする環境を構築するだけであれば、「Live Sass Compiler」のようなVSCodeプラグインを使うだけでいいです。
しかし「Live Sass Compiler」と比較してgulpでsassをコンパイルすれば以下のようなメリットがあります。
この記事では1と2について説明します。
3と4については以下記事参考にしてください。
今回は以下4つのプラグインを使ってsassのコンパイルをしていきます。
| プラグイン名 | 内容 |
| gulp-sass | sassのコンパイルをする |
| gulp-sass-glob | glob機能を使って@import文を省略する |
| gulp-autoprefixer | ベンダープレフィックスを自動付与する |
| gulp-plumber | watch中にエラーが発生してもwatchが止まらないようにする |
Dart Sassでコンパイルしたい方はこちら
ディレクトリ構成
今回のディレクトリ構成は下記になります。
test
├ node_modules
├ src
│ ├ css
│ ├ sass
│ │ ├ module
│ │ │ ├ _header.scss
│ │ │ ├ _footer.scss
│ │ │ └ _main.scss
│ │ └ style.scss
│ └ index.html
├ gulpfile.js
├ package-lock.json
└ package.jsongulp-sassを使ってscssファイル をコンパイルしてcssフォルダ に出力させます。
コンパイルする前後でglob機能を使ったり、ベンダープレフィックスを付与していきます。
glob機能とはなにか
glob機能について説明しておきます。
機能ごとに分けたscssファイルをstyle.scssでまとめて読み込む場合、ひとつひとつ@import で指定しないといけないので面倒ですよね。
glob機能を使うと@import文が以下のように簡略化できます。
glob機能使用前(style.scss)
@import "./module/header";
@import "./module/footer";
@import "./module/main";glob機能使用後(style.scss)
@import "./module/**";非常に簡単に記述できるようになることが分かります。
プラグインをインストールしよう
それではgulpのプラグインをインストールしていきましょう。
npm i -D gulp-sass
下記コマンドをターミナルで実行してgulp-sassをインストールします。
npm i -D gulp-sassgulp-sass公式
npm i -D gulp-sass-glob
こちらも同様にインストールします。
npm i -D gulp-sass-globgulp-sass-glob公式
npm i -D gulp-autoprefixer
こちらも同様にインストールします。
npm i -D gulp-autoprefixergulp-autoprefixer公式
npm i -D gulp-plumber
こちらも同様にインストールします。
npm i -D gulp-plumbergulp-plumber 公式
gulpfile.jsを編集しよう
プラグインのインストールが完了したらgulpfile.jsを編集していきましょう。
//----------------------------------------------------------------------
// モード
//----------------------------------------------------------------------
"use strict";
//----------------------------------------------------------------------
// モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, watch, series, parallel } = require("gulp");
const plumber = require("gulp-plumber");
const sassGlob = require("gulp-sass-glob");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
function compile(done) {
src("./src/sass/**/*.scss")
.pipe(plumber()) // watch中にエラーが発生してもwatchが止まらないようにする
.pipe(sassGlob()) // glob機能を使って@import文を省略する
.pipe(sass()) // sassのコンパイルをする
.pipe(autoprefixer()) // ベンダープレフィックスを自動付与する
.pipe(dest("./src/css"));
done();
}
//----------------------------------------------------------------------
// タスク定義
//----------------------------------------------------------------------
exports.compile = series(compile);
/************************************************************************/
/* END OF FILE */
/************************************************************************/package.jsonを編集しよう
ベンダープレフィックスを自動付与させるにはpackage.json を編集する必要があります。
package.json にbrowserslist オプションを追記することで、どのブラウザのいつのバージョンまでベンダープレフィックスを自動付与させるか設定させることができます。
browserslist の値はご自身の環境に合わせて変更してみてください。
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-cli": "^2.3.0",
"gulp-plumber": "^1.2.1",
"gulp-sass": "^4.1.0",
"gulp-sass-glob": "^1.1.0"
},
"browserslist": [
"last 2 versions",
"ie >= 11",
"Android >= 4"
]
}コマンドを実行しよう
gulpfile.jsの編集が完了したらコマンドを実行しましょう。
npx gulp compile「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。
gulpのインストール先が異なる可能性があります。
以下のようになれば正しくsassをコンパイルできています。
[00:00:00] Starting 'compile'...
[00:00:00] Starting 'compile'...
[00:00:00] Finished 'compile' after 12 ms
[00:00:00] Finished 'compile' after 15 msおわりに
以上gulp-sassを使ってsassのコンパイルをする方法について説明しました。
いかがだったでしょうか。
gulpを使ってsassのコンパイルができるようになればストレスフリーでweb制作を進めていくことができるのでぜひ参考にしてください。
コメント