GulpでSassのSCSSをCSSにコンパイルできるようにするための環境構築を簡単にまとめました。
コンパイル環境構築の目的は、Gulpでscssをcssにコンパイルしたcssファイルを、指定するフォルダに出力する流れを理解したいのと、今後scssの書き方を練習できるようにするためです。
- GulpはNode.jsのビルドシステム。
- SassはCSSのメタ言語。
Sassには2種類の記法があります。
SCSS記法
SCSSはネスト(入れ子)でコードを書ける点が特徴です。拡張子.scss
SASS記法
SASSはセミコロンやカッコを使用しない。拡張子.sass
GulpのSassコンパイル環境を整える
gulpはNode.jsのライブラリなのでNode.jsをインストールします。
上記URLでNode.jsのページに進み推奨版をダウンロードしてインストールします。2つボタンが並んでますが、ページを翻訳すると「ほとんどのユーザーに推奨」とボタンに書いてあるので推奨版かどうか分かります。
インストールまで終わったら、ターミナルでNode.jsバージョン確認です。
$ node -v
コマンドnode -vの実行でvから始まるバージョンが表示されNode.jsがインストールできているのが確認できます。
npmバージョンも確認
$ npm -v
コマンドnpm -vの実行でvから始まるバージョンが表示されnpmがインストールできているのが確認できます。
続いて、GulpでSass(SCSS)をCSSにコンパイルできるようにするフォルダとファイルの作成です。
まずはsass_to_cssフォルダを作成します。
sass_to_cssフォルダを作成したら、私の場合はvscodeのターミナルで作業しています。
ターミナルでsass_to_cssフォルダに移動してmkdirコマンドでdestフォルダとsrcフォルダを作成です。mkdirコマンドは以下です。
$ mkdir -p {dest,src}
sass_to_css/
┣ dest
┗ src
するとsass_to_cssフォルダにdestとsrcが入ります。
お次はGulpとモジュールをインストールします。
最初にpackage.jsonの生成からです。
$ npm init -y
sass_to_cssフォルダに移動してある状態で、コマンドnpm init -yをターミナルで実行すると、package.jsonというファイルがsass_to_cssフォルダ直下に生成されます。
package.jsonの生成が終わったらgulpとgulpのモジュールを以下のコマンドでインストールします。
$ npm install -D gulp sass gulp-sass
gulp-sass/sass
https://github.com/dlmanning/gulp-sass
gulpとgulpのモジュールがインストールできているかpackage.jsonを開いてdevDependenciesという記述部分を確認します。
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass": "^5.1.0",
"sass": "^1.49.9"
}
gulpとgulp-sassとsassが、各右横にバージョンも記述されて表示していればインストール成功です。
そしてgulpfile.jsをsass_to_cssフォルダ直下に作成です。
sass_to_css/
┣ dest
┣ node_modules
┣ src
┣ gulpfile.js
┣ package-lock.json
┗ package.json
ここまでの作業でsass_to_cssフォルダには「dest」「node_modules」「src」の3つのフォルダと、「package-lock.json」「package.json」「gulpfile.js」の3つのファイルが作成できていれば順調です。
CSSにコンパイルするタスクを記述
gulpfile.jsに、SassからCSSにコンパイルするタスクを記述します。
const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
// sassコンパイル
const SassCompile = (done) => {
gulp.src("./src/*.scss")
.pipe(sass.sync({
outputStyle: 'expanded'
})
)
.on('error', sass.logError)
.pipe(gulp.dest("./dest"));
done();
};
// タスク化
exports.SassCompile = SassCompile;
// 監視ファイル
const watchFiles = (done) => {
gulp.watch("./src/*.scss", SassCompile);
done();
};
// タスク実行
exports.default = gulp.series(
watchFiles, SassCompile
);
最初の2行で、インストールしたgulp、gulp-sass、sassを読み込んでいます。
それ以外の記述は、部分ごとに分かる範囲の説明を書いておきます。(勉強中なため)
// sassコンパイル
const SassCompile = (done) => {
gulp.src("./src/*.scss")
.pipe(sass.sync({
outputStyle: 'expanded'
})
)
.on('error', sass.logError)
.pipe(gulp.dest("./dest"));
done();
};
// sassコンパイルのコメント部分の記述では、SassCompile変数を作成して、コンパイル対象になるファイルパスを指定。
.pipe(sass.syncは、同期レンダリング。
outputStyle: ‘expanded’の記述部分では、アウトプットスタイルを指定しています。コンパイル後の出力方法といった感じの記述です。
outputStyleは例えばexpandedではなくcompressedにした場合、コンパイル後のcssファイルでは、cssコードが一行で出力することができます。
.on(‘error’, sass.logError)は、記述しておくと、Sassのコンパイルエラーになったとき、処理が止まらなくなります。
.pipe(gulp.dest(“./dest”));はcssへのコンパイル後の出力先を指定したパスです。
上記のようにsassのコンパイル処理の記述を格納した変数はタスク化。
// タスク化
exports.SassCompile = SassCompile;
// 監視ファイル
const watchFiles = (done) => {
gulp.watch("./src/*.scss", SassCompile);
done();
};
// 監視ファイルの記述部分は、gulp.watchで第一引数に監視するファイルのパスを指定して、第二引数はsassのコンパイル処理を記述した変数を記述します。これを変数watchFilesに格納しています。
// タスク実行
exports.default = gulp.series(
watchFiles, SassCompile
);
// タスク実行の記述では、実行したい内容を変数のwatchFilesとSassCompilに格納しているので、変数名を記述です。
Sass(SCSS)からCSSにコンパイル
いよいよSassからCSSにコンパイルです。SassのSCSS記法でコンパイルを試します。
そのためにsrcフォルダ内にstyle.scssファイルを作成します。
a{
display: inline-block;
padding: 18px 45px;
background: #555;
border: 3px solid white;
color: #fff;
&:hover{
background: #2196f3;
}
}
作成したstyle.scssには上記のようにaと&:hoverのセレクタを入れ子にしたSCSS記法で記述しておきます。
$ gulpそうしましたら、ターミナルでコマンドgulpを実行。
コマンドgulpで実行できなかったら、package.jsonのscriptに”start”: “gulp”を記述。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp"
},
[10:48:15] Starting 'default'...
[10:48:15] Starting 'watchFiles'...
[10:48:15] Finished 'watchFiles' after 30 ms
[10:48:15] Starting 'SassCompile'...
[10:48:15] Finished 'SassCompile' after 21 ms
[10:48:15] Finished 'default' after 57 ms
上記のようにコンパイルの処理が走ります。gulpfile.jsに記述した処理内容は変数にしているので、その変数名で実行することができています。
sass_to_css/
┣ dest
┃ ┗ style.css
┣ node_modules
┣ src
┃ ┗ style.scss
┣ gulpfile.js
┣ package-lock.json
┗ package.json
そしてstyle.scssはstyle.cssになってdestフォルダに出力されて、style.cssでの記述はCSSにコンパイルされています。
watchで監視もしているので、style.scssにSCSS記法やCSSを記述してファイルを保存するたびにdestフォルダのstyle.cssへのコンパイルは実行することができるようにもなっています。
destフォルダに出力したstyle.cssでcssを直接編集してしまわないように注意です。
直接編集してしまうと、その後srcフォルダ内のstyles.scssファイルを編集したとき、コンパイルできなかったりします。(私はやらかしました)
今回はGulpでSassのSCSSをCSSにコンパイルできるようにするための環境構築でしたが、前回はGulpでEJSからHTMLにコンパイルできるようにする環境も構築しています。
次はこれら2つのGulp環境を合体させてbrowser-syncでブラウザの立ち上げを組み込んでみたいと思います。
