Gulpで外部CSSをhtmlに書き込み、BASEデザインマーケットの更新を楽にする

#BASEデザインマーケットとは?
「BASEデザインマーケット」は無料でネットショップの作成、運営ができるサービス「BASE」のテーマデザインを販売できるサービスです。テーマは5000円から販売することができます。

#ドキュメント
baseinc/template-docs

Gulpで環境設定

##外部CSSをhtmlに直接書き込む
cssをBASEのサーバにアップすることもできますが、頻繁に更新する場合は面倒です。そこでhtmlに直接cssを書く方式を取ります。scssファイルをコンパイルし、style.cssを書き出して、それをhtml内に出力することをやってみます。

##gulp-replace
gulp-replaceを使って外部CSSをhtmlに書き込みます。
https://www.npmjs.com/package/gulp-replace

<style type="text/css">
htmlReplace
</style>

文字列「htmlReplace」をstyle.cssの中身と置換します。

gulpfile.js

gulp.task('htmlReplace', function() {

    return gulp.src('template/resource/index.html')

        .pipe(gulpReplace(/htmlReplace/, function(s) {
            return fs.readFileSync('public/css/style.css', 'utf8');
        }))
        .pipe(gulp.dest('template/dist/'));
});

#「Material」と「Teen」の紹介
自分は「Material」と「Teen」を制作しました。良かったら制作の参考にしてください
Material
Teen

#関連記事
BASEデザインマーケットのドキュメントからは分かりづらい仕様を解説 - Qiita
BASEデザインマーケットの審査を通すためのチェックポイントまとめ - Qiita
BASEデザインマーケットのテーマ売り上げに繋がった工夫まとめ - Qiita