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