concrete5テーマ開発にgulp.jsを導入してみました。
- 2016/12/17 12:13 JST
この記事はconcrete5 Japan Advent Calendar 2016 17日目の記事です。
今年の夏concrete5 Japan Evangelistになったこともあり、「何か自分に出来る事で貢献しなきゃ」と思い新しいテーマレスポンシブでアクセシブルなconcrete5のテーマ「Company」をリリース！しました。
PC&iPad&iPhoneのスクリーンショット
という事で本題に入りますが、ちょうどconcrete5 エバンジェリストになった頃、尊敬しているかたに「作業効率を上げたいんだったらgulp使うと良いよ」とアドバイスいたただいていたので、今更感は否めませんが、今回のconcrete5テーマ開発にgulp.jsを導入してみました。
作業手順
gulp.jsを使うのは今回が初めてではなく、CMSのテーマ開発時に使う為に何度も練習してから挑みました。なので、Node.jsとgulp.jsのインストールは済ませた状態から作業を始めています。gulp.jsのインストール方法は、WindowsでNode.js、gulp.jsをインストールして効率よい開発環境を目指す（準備編）に詳しい説明が載っているのでそちらをお読みください。
いつものように、MAMPにconcrete5をローカル開発環境にインストールし、下記のようにコマンドプロンプトに入力して作業するルートに移動します。今回は、デザインを元にコードをザザッと先に書いてしまい、後はcssの修正ほとんどだったのでこの移動位置にしています。
cd C:¥MAMP¥htdocs¥concrete5¥packages¥theme_テーマ名¥themes¥テーマ名そして、下記のように入力してプロジェクトの情報を設定するのですが、後から編集出来るので私は全部「Enter」で済ませました。するとpackage.jsonが自動生成されます。情報の編集は、このファイルを修正します。
npm init続いてgulpをインストールします。グローバルインストールは済んでいるのですが、プロジェクトごとにローカルインストールもしなければいけないのでここで行います。インストールが成功したらnode_modulesフォルダが自動生成されます。
npm install --save-dev gulp今回は、gulp-sassとBrowsersyncプラグインを使用するので、まずは下記のように入力してgulp-sassをインストールします。
npm install --save-dev gulp-sass次に下記のように入力してBrowsersyncプラグインをインストールします。
npm install --save-dev browser-sync次は、gulpfile.jsファイルの作成です。今回の場合は、sassファイルを修正したら自動的にコンパイルとブラウジングするようにしたかったので記述は下記のようにしてます。尚、Sassの構文エラー等でwatchが止まらないようにする記述はわざと記述してません。
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('sass', function(){
gulp.src('./css/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css/'));
});
gulp.task('watch', function() {
browserSync.init({
files: ['./css/'],
proxy: 'http://localhost:80/concrete5/',
});
gulp.watch('./css/*.scss', ['sass', reload]);
});
gulp.task('default', ['sass', 'watch']);これでgulpと入力するだけで、SCSS変更時に自動でコンパイルと同期しているブラウザ(コマンドプロンプトに表示されているExternal URLにアクセス)のリロードをしてくれるようになります。(watchを終了する時は「Ctrl」+cを入力してください。)sassのエラーで動きが止まった場合、sassを修正してgulpと入力すればまたwarch状態になります。
導入してみた感想
まだ自分が使うので精一杯な感じですが、なんとか無事作業効率を上げる事が出来ました。導入する前は「ブラウザのリロードを自動化ってF5押したらいいだけだからそんなに変わらないのでは？」なんて思っていたのですが、使ってみて「これ超便利。1工程だけでも各種ブラウザで何度も繰り返す作業だからかなり効率よくなるんだ。もういちいち「F5」なんて押したくない。」と思い直しました。
何ごとにおいてもそうですが、今回も「自分の手を動かし実体験しなきゃ本当の事はわからないし、発展や向上もない。」と実感しました。
今回の作業で1つだけタスク残してまして…同じネットワーク上にあるデバイスならスマホでの確認も出来るんですけど、ファイアウォールやルーターの設定は色々としてみたのですがメインマシン以外には接続出来ずに終わったのが心残りだったので、次回は出来る様に再チャレンジしたいと思ってます。