sass(scss)導入【gulpで自動コンパイル】
javaプロジェクトでscss記法を使いたかったので、gulpを使って自動コンパイルさせました。
目次
- Sassとは
- gulpとは
- gulp導入手順
- gulpのインストール
- gulpfile.jsの作成
- watchで自動実行
- 完成したgulpfile.js
- 最後に
Sassとは
cssを拡張して、読みやすく書きやすくしたスタイルシートです。
S…Syntactically（文法的に）
a…Awesome（素晴らしい）
ss…StyleSheet（スタイルシート）
このような意味のようです。Awesomeが入ってるなんてなんだか素敵です。
Sassには、sass記法とscss記法があります。
今回は、cssの書き方に近いscssを使いました。
詳しい説明は、こちらにあります。
gulpとは
簡単に言うと、処理を自動化することができるツールです。
似ているツールは他にもあるようですが、処理が早くNode.jsのパッケージであることが特徴のようです。
今回は、sass(scss)をcssへコンパイルする処理をgulpで自動化します。
詳しい説明は、こちらにあります。
gulp導入手順
gulpのインストール
プロジェクトのルートディレクトリで以下を実行します。
npm install gulp gulp-cli --save-dev
Sassからcss変換の定義のため、以下を実行します。
npm install sass gulp-sass --save-dev
gulpfile.jsの作成
プロジェクトのルートディレクトリに「gulpfile.js」を作成します。
ここに自動化する処理を書いていきます。
/*
src 参照元を指定
dest 出力先を指定
watch ファイル監視
series(直列処理)
*/
const { gulp, src, dest, watch, series} = require('gulp');
// プラグインを呼び出し
var sass = require('gulp-sass')(require('sass'));
// プラグインの処理をまとめる
const cssSass = () => {
return src('./src/main/resources/static/sass/*.scss') //コンパイル元
.pipe(sass({ outputStyle: 'expanded' }))
.pipe(dest('./src/main/resources/static/css')) //コンパイル先
}
// タスクをまとめて実行
exports.default = series(cssSass);
私はこのように作成しました。
コンパイル元とコンパイル先のディレクトリは、それぞれのプロジェクトに合わせて変更します。
watchで自動実行
このままでは毎回コマンドを叩かなくてはいけないので、watchで自動実行させます。
exports.watch = function() {
watch('./src/main/resources/static/sass/*.scss', cssSass);
}
先程の最終行に処理を追加します。
これで、自動実行の準備が完了です。
あとは、以下のコマンドを叩いてからファイルを修正することですぐにcssへコンパイルされます。
gulp watch
止めるときは、ctl+cです。
完成したgulpfile.js
/*
src 参照元を指定
dest 出力先を指定
watch ファイル監視
series(直列処理)と(並列処理)
*/
const { gulp, src, dest, watch, series} = require('gulp');
// プラグインを呼び出し
var sass = require('gulp-sass')(require('sass'));
// プラグインの処理をまとめる
const cssSass = () => {
return src('./src/main/resources/static/sass/*.scss') //コンパイル元
.pipe(sass({ outputStyle: 'expanded' }))
.pipe(dest('./src/main/resources/static/css')) //コンパイル先
}
// タスクをまとめて実行
exports.default = series(cssSass);
exports.watch = function() {
watch('./src/main/resources/static/sass/*.scss', cssSass);
}
ちなみにresources部分のディレクトリ構成はこのようになっています。
最後に
web系では当たり前のようですが、業務系SEの私は実務でsass(scss)を
まだ使ってません。。。
これを機に自分のいるプロジェクトでも導入できれば良いな、と思います。
参考リンク：
Discussion