Sassのビルドツールには様々な種類があります。おそらく多くの現場で使われているのはタスクランナーの「Gulp」でしょう。GulpはSassだけじゃなく、TypeScript、CofeeScriptなどのトランスパイル、構文チェックにも対応しています。
CUIツール
- Ruby Sass
- Grunt
- Gulp
GUIツール
Dreamweaverは2017 CCからSassをビルド機能が搭載されました。
- Dreamweaver
- Prepros
- Koala
インストール
|
1 |
npm i -D gulp gulp-sass sass |
ビルドファイル(gulpfile.js)を用意
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
'use strict' // gulpのライブラリを読み込む var { src, watch, dest, series } = require('gulp'); // gulp-sassのライブラリを読み込む var sass = require('gulp-sass')(require('sass')); const sassBuild = (done) => { // ビルド実行対象のフォルダ src('./_src/sass/**/*.scss') .pipe(sass({outputStyle: 'expanded'})) // オプション .pipe(dest('./css')); // 出力先 done(); }; // ファイルを監視して変化があったら再ビルドする設定 const watchScss = () => { watch('./_src/sass/**/*.scss', sassBuild); }; // seriesにて「sassBuild」と「watchScss」を順番に実行する。 exports.default = series(sassBuild, watchScss); exports.build = sassBuild; |
オプション
| 種類 | 説明 |
|---|---|
| nested | デフォルト、CSS出力した時にネストされます。 |
| expanded | 一般的なCSSのフォーマットで出力されます。 |
| compact | スタイルごとに1行でまとめて出力されます。 |
| compressed | インデントや改行が全てなくなって1行に圧縮されて出力されます。一番ファイルサイズが小さくなるのでリリース時はこのファイル形式で出力するのが望ましいです。 |
ビルドの実行
1度だけビルドを行います。
|
1 |
gulp build |
監視して変更の都度再ビルドを行います。
|
1 |
gulp |
プラグイン
gulp-notify
gulpタスクの終了時やタスクでエラーが発生した場合にデスクトップにエラーを通知してくれます。通常ターミナルなどはデスクトップの裏側に配置することも多いのでこれを使うとエラーに早く気づけて便利です。
gulp-plumber（プラマー）
gulpタスクでエラーが発生した場合にタスクが強制終了されることを防止するためのプラグインです。これがないとエラーが出るたびにいちいちgulpタスクを再起動しなければならなくなってしまいます。
browserSync
ローカルサーバーを立ち上げ、ローカルファイルに変更があったらブラウザを自動的に更新してくれます。
gulp-sass-lint
Sassのリンター。gulpfileのビルド処理の中にリンターの記述をできたりします。
.scss-lint.yml
リンターの設定ファイルです。実際に導入する際は必要なものを追加したり削除したりしてカスタマイズして使ってみると良いでしょう。以下のような感じで記述します。
|
1 2 3 4 5 |
.pipe(sassLint({ configFile: '.scss-lint.yml' })) .pipe(sassLint.format()) .pipe(sassLint.failOnError()) |
この記事へのコメントはありません。