Bourbon 依存の Sass(SCSS)ファイルを gulp.js でCSSにコンパイルする手順
サンプルのディレクトリ構造は以下の通り
プロジェクトディレクトリ
├ gulpfile.js
├ scss
│ ├ style.scss
│ └ test.scss
└ dist（公開用）
└ css
├ style.css
└ test.css
設定の手順
npm で node-bourbon をインストール
npm install node-bourbon
gulpfile.js
bourbon.with()に、Bourbon を使う Sass(SCSS) をもれなくセットする必要がある
それを、sass()関数のオプション includePaths にセットする
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
bourbon = require('node-bourbon');
bourbon.with('./style.css', './scss/test.scss');/*bourbon.includePathsに入る*/
var paths = {
dist: './dist/',
scss: './scss/*.scss'
};
gulp.task('css', function() {
return gulp.src(paths.scss)
.pipe(sass({includePaths: bourbon.includePaths}))
.pipe(gulp.dest(paths.dist + 'css/'));
});
Sass(SCSS)
Bourbonをインポートするだけ
サンプルとして各SCSSファイルにミックスインを一つ書いてみる
scss/style.scss
@import "bourbon";
button {
@include button;/*bourbon mixin*/
}
scss/test.scss
@import "bourbon";
.triangle-down {
@include triangle(12px, gray, down);/*bourbon mixin*/
}
gulp でタスクを実行
ターミナルで、プロジェクトルートで
gulp css
コンパイルされ、公開ディレクトリに以下のCSSが生成される
Bourbon のミックスインを自在に使えるようになった
dist/css/style.css
button {
border: 1px solid #0772e4;
border-radius: 3px;
box-shadow: inset 0 1px 0 0 #8ebef1;
color: white;
display: inline-block;
font-size: inherit;
font-weight: bold;
background-color: #4294f0;
background-image: -webkit-linear-gradient(#4294f0, #0779f3);
background-image: linear-gradient(#4294f0, #0779f3);
padding: 7px 18px;
text-decoration: none;
text-shadow: 0 1px 0 #0068d7;
background-clip: padding-box;
/*bourbon mixin*/ }
button:hover:not(:disabled) {
box-shadow: inset 0 1px 0 0 #60a3ec;
cursor: pointer;
background-color: #2f89ea;
background-image: -webkit-linear-gradient(#2f89ea, #0872e3);
background-image: linear-gradient(#2f89ea, #0872e3); }
button:active:not(:disabled), button:focus:not(:disabled) {
border: 1px solid #0772e4;
box-shadow: inset 0 0 8px 4px #086ad3, inset 0 0 8px 4px #086ad3; }
button:disabled {
opacity: 0.5;
cursor: not-allowed; }
dist/css/test.css
.triangle-down {
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid grey; }
参考用：実際のタスクは他に様々な処理が入る
やりたい処理を数珠つなぎ
すっきり見やすいのが gulp.js のいいところですね
gulp.task('css', function() {
return gulp.src(paths.scss)
.pipe(plumber())
.pipe(sass({includePaths: bourbon.includePaths}))
.pipe(mediaQueries())
.pipe(autoprefixer('last 1 version'))
.pipe(csscomb())
.pipe(concat('style.css'))
.pipe(minifyCss())
.pipe(gulp.dest(paths.dist))
.pipe(gzip())
.pipe(gulp.dest(paths.dist))
.pipe(connect.reload());
});