Firebase + ExpressでのSassの自動コンパイルについて
実現したいこと
Firebaseのfunctionsとhostingを利用してExpress製のNode.jsアプリを開発中です。
CSSプリプロセッサにSassを利用したいと思っております。
問題点
Sassファイルを変更後に $firebase serve
を行ってもCSSファイルが自動的に更新されません。
destのstyle.cssファイルが存在しない場合はstyle.sassがコンパイルされstyle.cssが生成されるのですが
一度style.cssファイルが生成されて存在している状態ではskipとなってしまいます。
その場合コンソールに下のようなログが出ます。
error: [sass] skip: / nothing to do
style.sassに変更を加えるたびに別途コンパイルを行うようにすればよいのですが
通常のようにExpressを $npm start
で起動した場合のように
functionsからのリクエストに対しても常にコンパイルを行うようにできないでしょうか。
なにかアドバイスをいただければ大変ありがたいです。
ディレクトリ構造
.
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── functions
│ ├── assets
│ │ └── stylesheets
│ │ └── style.sass
│ ├── index.js
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ └── views
└── public
├── 404.html
└── stylesheets
├── style.css
└── style.css.map
functions/index.js
const functions = require("firebase-functions")
const express = require("express")
const path = require("path")
// Express Appを準備
const app = express()
// ExpressのView EngineにPUGを指定
// pugファイルを格納するフォルダ「views」を宣言
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')
const sassMiddleware = require('node-sass-middleware')
app.use(sassMiddleware({
src: path.join(__dirname, 'assets'),
dest: path.join(__dirname, '../public'),
indentedSyntax: true, // true = .sass and false = .scss
debug: true,
force: true,
response: false,
sourceMap: true
}))
app.use(express.static(path.join(__dirname, '../public')))
// Expressルーティングルールの設定
// サイトルートへのリクエスト時にはindex.pugをレンダリングするように指定
app.get('/', function (req, res, next) {
res.render('index', { title: 'Express' })
})
// CloudFunctionへのリクエストをExpressに引き継ぐためのコード
const api = functions.https.onRequest(app)
module.exports = {
api
}