コーディングが早くなるgulpのタスク設定を公開します

コーディングが早くなるgulpのタスク設定を公開します




コーディングが早くなるgulpのタスク設定を公開します

最近フロント案件が多くなってきたので、僕のコーディングを加速させてくれるgulpのタスクを公開したいと思います。普通にコーディングするより作業スピードが全然違うと思うので、ぜひこれからgulpを導入したい人は設定してみてください!

僕もgulpとは??の状態から自力で調べて実装してみたので初心者の方もこれからgulp導入したいな、と思う人はぜひ参考にしてみてください。

 

gulpってそんな便利なの?コーディングは早くなる?

コーディングって結構時間がかかったりするんですよね。

細かい部分の修正が重なってミスに繋がったり、ソースが汚くなっていったりとめんどくさい作業が多いなーという印象ですが、gulpを導入すると手間のかかる作業は自動でやってくれるので設定しておいて損はないですよ。

導入方法はこちらを参考にしてみてください。
結構簡単でsassを導入するだけでgulpをいれてみるのもいいかもしれません。

 

コーディング作業環境はこんな感じ

gulpfile.jsのルートディレクトリ配下に以下を配置しています。

gulp
|-_frontend <——実際に作業するディレクトリ
|-_dest <——納品するファイルが保存されるディレクトリ
|-gulpfile.js
|-node_modules
|-package-lock.json
|-package.json

こんな感じになっています。
ざっくり説明すると、作業用ディレクトリと納品用ディレクトリを別にしていることですね。

理由としては、sassやejsといった納品時に不要なファイルは余分になってしまうので、必要なファイルを絞って出力してすぐに納品できるようにしてあります。

 

コーディング時の ディレクトリ配下

gulpでコーディング

主に以下のディレクトリになっています。ここで見慣れないファイルがあると思いますが,「.ejs」は「.html」と同じと思ってもらえれば大丈夫です。

|-css
|-style.css
|-common.css
|-reset.css
|-scss
|-style.scss
|js
|-common.js
|-jQuery.Ver00.js
|ejs
|-index.ejs
|-layout
|-header.ejs
|-footer.ejs
|-一覧ディレクトリ
|-hoge.ejs
|-詳細ディレクトリ
|-hoge.ejs

理由としては、headerやfooterといった共通で使うパーツをモジュール化して呼び出せるようにしてます。
コーディングあるあるですが、デザインが変わったためheaderの一部を変えて欲しいという依頼があったとします。

もし大型サイトの制作で30Pあったとしたら全て修正しなければなりません。

一括置換で修正できますが結構神経使う作業なんですよね。考え方はPHPと同じでheader.phpやfooter.phpと同じです。headerだけ修正したら全てのページに反映させることができます。
大型案件の時はこれ結構便利なんですよ!!

scssディレクトリ内のファイルを修正すると自動でcssに出力される仕組みとなっています。

開発環境での実装方法

開発環境での実装方法

文字ばかりでわかりにくいですよね・・笑
もう少しわかりやすく書くと大きく分けて2つです。

・htmlをテンプレート化してコーディングを早くする
・sassを使ってcssの設計を早くする

仕組みになっています。編集して保存時に納品用にも自動で保存がされる仕組みです。

 

htmlの編集は?

主にejs/配下のindex.ejsを作成していけば問題なし。gulpで_frontend/配下のファイルに更新がかかれば自動でオートリロードがかかる仕組みになっている。

ejsファイルが保存された段階で_dest/配下に.htmlファイルとして出力がされるようになっていて楽ですよー

きゅん
ブラウザで表示されるファイルは_dest/配下のindex.htmlになっているのでブラウザ確認で表示されているのは納品用のファイルになるのです!開発環境と同じファイルなので問題なしですね!

 

cssの編集は?

_frontend/配下のscss/配下を編集すれば問題なし。imageフォルダも_frontend/に追加した段階でgulpにより_dest/にも自動で追加される。

scssファイル保存時に自動で_dest/配下のcss/ファイルが自動でコンパイルされるのでコーディングが神速になる。

きゅん
テンプレートとして.ejsを使っていますが、scssもheader.scssやfooter.scssのように部分で分けています。なのでstyle.css(大元のcss)の行数が増えることなくcssの編集が早くなると思いますよ!

 

gulpファイルのタスク一覧

僕が設定しているgulpファイルになります。
ひとつひとつ説明していきますー

gulpfile.jsの中身
[crayon-5ce9c83658f04238146761/]  

gulp-autoprefixer

ブラウザごとのベンダープレフィックスを自動で付与します。最近ではそんなに気にならないと思いますが「display: flex」などを多用するのでgulp-autoprefixerで自動でcssに付与してくれます。

コマンドラインで下記を入力してんストールします
[crayon-5ce9c83658f16695113657/] それぞれのブラウザを指定しているのと
const options = {
browsers: [‘last 2 version’, ‘iOS >= 8.1’, ‘Android >= 4.4’],
cascade: false
};

開発用と納品用の2つに付与されるようにしています。
[crayon-5ce9c83658f1e598996317/]  

ejs

こちらで先述したhtmlをテンプレート化して編集を楽にすることができるようになっています。

コマンドラインで下記を入力してんストールします
[crayon-5ce9c83658f21024068093/]  

bs-sync

編集したファイルを即座にブラウザで更新してくれます。編集して更新ボタンを押すことなく、すぐにブラウザ確認ができます。
[crayon-5ce9c83658f24160681013/] 下記でタスクの指定を記述します。
[crayon-5ce9c83658f26242773992/]  

gulp-sass

sassを使えるようにしてくれます。これもコマンドを入力するだけで使えるようになります!
[crayon-5ce9c83658f29655013513/] 僕のgulpファイルではcssを出力する場所を指定して、エラー時にメッセージを出してくれるように設定しています。
cssに出力したファイルはインデントがうまく整えてないので、インデントも整えるようにも設定しています。

その他の設定

・scssの編集エラー時にエラーメッセージがなるのでscss編集時にすぐに対処が可能。
・ブラウザsyncをかけているので更新の動作がなくなる。
・gulpエラー時にgulpの動作が止まることがなくなる。

 

個人的に思うこと

だいたいこんな感じで設定しています。後半端折り過ぎてしまいましたかね?
これと同じように設定していただければ、コーディングがスムーズになるかと思いますよ!

gulpをこれから使ってみようかな?と思う方がいましたらぜひ参考にしてみてください(^^)