前回の記事を書いてから、Flyをとりあえず試してみようと思って、自分自身Webデザインがメインなので、とりあえずコーディングできる環境を作ってみようと思い、Sass（SCSS）とJadeでコーディング出来る環境をFlyで組んでみました。
Fly 参考文献
Fly Coding format
実際に作ってみた物は下記に置いておきました。
https://github.com/kitaro729/fly-coding_format
タスク内容
- Sass（SCSS）のコンパイル
- Jadeのコンパイル
- ローカルサーバー立ち上げ
- Sass（SCSS）とJadeの更新を感知し自動コンパイル
- 自動コンパイル後にブラウザをリロード
今回使ったパッケージ
| パッケージ名 | 内容 |
|---|---|
| fly | Fly本体 |
| fly-sass | Sass（SCSS）のコンパイル |
| fly-jade | Jadeのコンパイル |
| browser-sync | ローカルサーバー立ち上げとライブリロード |
記述内容
flyfile.js
/*------------------------------------------------------------
0. Setting */
import browserSync from 'browser-sync'
const reload = browserSync.reload
const paths = {
jade: ['jade/**/*.jade'],
sass: ['sass/**/*.scss'],
watch: {
jade: 'jade/*.jade',
sass: 'sass/*.scss',
},
dist: {
jade: 'dist',
sass: 'dist/css',
}
}
/*------------------------------------------------------------
1. Default task */
export default function* () {
yield this.start(['sass', 'jade', 'server'])
yield this.watch(paths.sass, ['sass', 'liveReload'])
yield this.watch(paths.jade, ['jade', 'liveReload']);
}
/* SASS compile */
export function* sass () {
yield this
.source(paths.watch.sass)
.sass({
outputStyle: "compressed",
includePaths: ["sass"],
})
.target(paths.dist.sass);
}
/* Jade compile */
export function* jade () {
yield this
.source(paths.watch.jade)
.jade({
base: 'jade'
})
.target(paths.dist.jade);
};
/* Live reload */
export function* liveReload () {
browserSync.reload()
}
/* Local Server */
export function* server () {
browserSync({
server: 'dist/'
})
}