gulp-sass-variablesで環境ごとの変数の値を変える
環境によってCSSの中身を切り替えたいということがある。
たとえば、background画像のURLを、開発環境ではローカル、本番環境ではCDNのものにするといった場合である。
gulp-sass
を使っている場合は、gulp-sass-variables
を利用するとこれが実現できる。
まず関連パッケージのインストール
$ npm install gulp gulp-sass gulp-sass-variables yargs --save-dev
次にgulpfile.js
を用意。
sassVariables
の部分が今回の重要ポイント。
var gulp = require('gulp'), sass = require('gulp-sass') sassVariables = require('gulp-sass-variables'), argv = require('yargs').argv; var env = argv.production ? 'production' : 'development'; gulp.task('css', function() { gulp.src('src/*.scss') .pipe(sassVariables({ $env: env })) .pipe(sass()) .pipe(gulp.dest('dist/')); });
小さなscssファイルを書いてみる。
$env: 'development' !default; $color: 'blue' !default; @if $env == 'production' { $color: 'red'; } h1 { background: $color; }
cssにコンパイルして中身を確認する。
blueとredで値が変化していることが分かる。
$ gulp css $ cat dist/main.css h1 { background: "blue"; } $ gulp css --production $ cat dist/main.css h1 { background: "red"; }
変数定義のためのscssファイルを一つ用意して、それを各scssファイルにimportさせるようにすれば便利そう。