03
GulpでSass
【作成日】 2021/08/05 13:30 【更新日】
Sass とは CSS を効率的に管理するために CSS を拡張したものと解釈しています。
Sass を利用して CSS を管理する方法はいろいろあるが、Node.js + gulp で Sass 環境を構築します。
Node.js のバージョンは v14.11.0, sass のバージョンは 1.37.5 です。
1.Gulp のインストール
ターミナル(Mac)で以下をインストールします。
- gulp-cli … Gulp コマンドを使うためのもの
- gulp-sass … sass を使うためのもの
- gulp-concat … 複数の scss ファイルを 1 つの CSS ファイルにまとめるときに使う
- gulp-clean-css … CSS ファイルを圧縮するときに使う
- gulp-rename … ファイル名を変更するときに使う
コマンドコピーしました
npm install -g gulp-cli npm install -g gulp-sass npm install -g gulp-concat npm install -g gulp-clean-css npm install -g gulp-rename
自分の環境では -g でインストールしても使えなかったので、全部ローカル環境にインストールしています。
npm install gulp-cli npm install gulp-sass npm install gulp-concat npm install gulp-clean-css npm install gulp-rename
2.プロジェクトディレクトリに移動して Node.js が使えるようにする
ターミナル(Mac)でプロジェクトディレクトリに移動します。
cd ディレクトリ
ターミナル(Mac)で初期化コマンドを入力します。
コマンドコピーしました
npm init -y
CSS ファイルを出力するディレクトリ、CSS を管理する scss ファイルを置くディレクトリを決めます。
以下はその例。
gulpfile.js は Gulp コマンドを実行するためのファイル。
project-name/ ├── assets │ ├── scss │ │ ├── ***.scss │ │ └── ... │ └── css │ └── style.css ├── gulpfile.js ├── ...
3.gulpfile.js に処理を書く
scss ディレクトリ内の全ての scss ファイルを style.css にまとめて、圧縮したものを style.min.css で複製して、css ディレクトリに出力する場合の処理を例にすると以下のような処理になります。
gulpfile.jsコピーしました
var gulp = require('gulp'); var clean = require('gulp-clean-css'); var rename = require('gulp-rename'); var concat = require('gulp-concat'); var sass = require('gulp-sass')(require('sass')); gulp.task('sass', done => { return gulp.src('./assets/scss/*.scss') .pipe(sass()) .pipe(concat('style.css')) .pipe(clean()) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest('./assets/css')); }); gulp.task('log', done => { console.log("DONE") done()js }); gulp.task('watch', () => { gulp.watch('./assets/scss/*.scss',gulp.series('sass','log')); }); gulp.task('default', gulp.series('watch') );
4.Gulp で監視開始
ターミナル(Mac)で以下のコマンドを実行します。
コマンドコピーしました
gulp watch
ターミナル(Mac)で以下のような表示になったら監視されています。
[22:49:13] Using gulpfile ~/Documents/.../gulpfile.js [22:49:13] Starting 'watch'...
scss ファイルを上書き保存する度に、style.css と style.min.css ファイルが上書き保存されます。