こんにちは、エンジニアのオオバです。
※2021年9月はてなブログをやめました
本ブログは、はてなブログを使っています。
使われたことのある方は分かると思いますが、CSSを気軽にいじれません。
はてなブログを管理画面から直接生CSSを入力する必要があります。
ブログデザインをいじりたくなったのでCSS更新のワークフローを改善しました。
はてなブログのCSSをDropbox経由で更新して効率化する
今回はもう少し踏み込んで、生のCSSを書くのをやめ、デプロイ作業を自動化、運用の安全性を上げてみたいと思います。
Mac環境でのお話です。
→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら
生CSSから脱却
とりあえず以前使ったことのあるSass、それに近しい、CSSジェネレートツールを探しました。
現役のWebフロントの人に聞いたら現在もSassは現役とのことで、PostCSSも来ているとのことで、SassとPostCSSでワークフローを構築できないか調査しました。
その結果、以下のようなワークフローを組んでみたいと思います。
- SassでCSSを組む
- SassをCSSにコンパイル
- CSSをGithubにCommit + Push
- Dropboxの同期ファイルをコピー
Gulpを導入
このワークフローを実現するためにタスクランナー的なビルドシステムであるGulpを導入します。
GulpはNodeJS製のパッケージなのでnpmでインストールします。
もしnpmがインストールされていない場合は、HomeBrewでインストールします。
brew install npm
npmでGulp、GulpのSassプラグインをインストールしておきます。
今回はローカルにインストールするため、事前に開発フォルダ(~/workspace/blog/で作業する前提)に移動しておきます。
cd ~/workspace/blog/
npm inastall gulp gulp-sass -D
- node_modules
- package-lock.json
するとこのようにフォルダ1つ、JSONファイルが1つ出来上がります。
gulpfile.jsにGulpの処理を書いていく
先のパス(~/workspace/blog/)にgulpfile.js
を作成し、Gulpにやらせたい処理を書いていきます。
このような感じで
~/workspace/blog/src/
ディレクトリ内の*.scssファイルをコンパイルして、~/workspace/blog/dest/
ディレクトリに書き出されるシステムができました。
試しに以下のようなテストのscssファイルを作って以下のコマンドでコンパイルしてみます。
test.scss
.hoge{
font-size:50%;
.foo{
font-size:100%;
}
}
以下のコマンドでコンパイル。
gulp exportcss
成功すると以下のようなログが出力されます。
すると以下のようにCSSが出力され、ちゃんと動いている事が確認できました。
test.css
.hoge {
font-size: 50%;
}
.hoge .foo {
font-size: 100%;
}
Gulpコマンドが見つからない場合
gulp: command not found
今回Gulpをローカルにインストールしていますが、ローカルのGulpを動かすためにはグローバルにも一度インストールしておく必要があるようで、-g
オプションをつけてインストールします。
npm install -g gulp
すると動くようになると思います。
コンパイル後の処理を追加していく
コンパイルは成功できたので、当初の予定の通りGithubにCommit、Pushします。
gulp-git、gulp-git-pushプラグインをインストールします。
npm i gulp-git gulp-git-push -D
オプション「i」は「install」のショートカット
const git = require('gulp-git');
const push = require('gulp-git-push');
プラグインのRequireして、gitへバックアップするタスク、所定の場所にコピーするタスクを作成します。
gitへバックアップするタスク
※事前に~/workspace/blog/.git
を作っておく必要があります。
gulp.task('backup', function () {
return gulp.src(['./dest/*.css','./src/*.scss'])
.pipe(git.add())
.pipe(git.commit(new Date().toString()))
.pipe(push());
});
gulp-git-pushの参考 : gulp-git-push - npm
所定の場所にコピーするタスク
gulp.task('deploy', gulp.series('backup', function(){
return gulp.src('./dest/*.css')
.pipe(gulp.dest('../'));
}));
これで必要なタスクは実装完了しました。
ソースコード
最終的にはこんな感じになりました。
watchタスクを追加し、scssファイルに変更があったら自動でコンパイルされるようにしています。
ワークフロー
作業前
CSS(scssファイル)編集作業する前に以下のコマンドでscssを監視します。
gulp watch
この状態ではscssを変更すると自動でcssが書き出されます。
CSSの反映
CSSが完成したら、はてなブログに反映させるためにDeployします。
gulp deploy
deployすると、gitにバックアップという意味でpush、Dropboxにコピーされます。
残タスク
やば!!ミスった!!ってなった時のタスクを作成する必要があるかなと思います。
1つ前のコミットに戻す、ハッシュを指定して戻すの2種類かなと。
現状はgitコマンドでファイルを元に戻して再度ファイルコピータスクをするだけでリカバリーできます。
複数環境を用意すべきではあるが...
はてなブログを使用している以上、
ステージング環境などあったものではないので、
CSS反映も一発勝負になってしまいますが、
その辺は個人ブログなのでそこまで頑張らなくても良いかなと思っています。
現状のブログをクローンして非公開にし、
そちらをテスト環境とするということもやろうと思えばできそうです。
最後に
GulpとSassを使うことでだいぶCSS更新が楽になりました。
gitでバックアップすることで安全性も増し、
今後も安心して運用ができそうです。
余談
インターネットにGulpバージョン3と4の情報が
混ざってて少し焦りました。
srcの引数は2つになったという変更でハマりました。
今回Gulpを初めて使っていました。面白いですね!
この記事が気に入ったらフォローしよう
- macOS Mojave 10.14.5
- gulp CLI v2.2.0 Local v4.0.2
- git v2.22.0