フロントエンド開発をする中で様々なツールが取りざたされてきていますが、皆さんはどのようなツールを使用されているでしょうか。
最近私はひとまずシンプルなGulpの利用に落ち着かせています。
（Webpack、Vue.jsの利用を控えさせつつ・・・）
さて、その際に皆さんフォルダ構成はどうされているでしょうか。
使用されているツールや、これまで使用してきた言語環境によって似たような構成であっても若干異なっていたりしますよね。
もちろん、その環境にあった構成であればいいと思いますが、私は以下にしています。
（これが正解というわけでもないです）
私のフロントエンド開発用フォルダ構成
[bash]./
├─.git
├─dist
├─node_modules
│ ├─省略
│
├─src
│ ├─_sass
│ ├─css
│ ├─fonts
│ ├─images
│ ├─js
│ ├─index.html
│
├─gulpfile.js
├─package.json
├─その他
もう少し違った階層がいいのかもしれませんが、わかりやすさを優先しました。
gulpで開発用と本番用で切り替えて使ってます。
通常はsrcフォルダ内で開発、OKになったらdistフォルダに出力します。
（distフォルダはdestが正解なのかもしれませんが、distのほうがよく見かけるので浸透具合に併せてしまいました。）
ちなみにgulpのモジュールには以下をインストールしています。
私のフロントエンド開発用Gulpモジュール
若干機能が被っているものがあり、インストールしたものの使っていないものもあります。
- gulp-sass
- gulp-sourcemaps
- gulp-plumber
- gulp-autoprefixer
- gulp-combine-media-queries
- gulp-pleeease
- browser-sync
- gulp-cssmin
- gulp-rename
- gulp-concat
- gulp-uglify
- gulp-if
- minimist
皆さんはどのような環境でしょうか。
Akrosでは体験・カウンセリングを行っておりますのでこのような部分も気になっている方はぜひお越しください。
WEBデザイナー育成・WEBの技術が学べるスクール Akros Web & Business Design Academy 体験・カウンセリング
また、10月から長野校がリニューアルオープンいたしました。
11月から毎週土曜日に人数限定のオープン記念無料イベントを開催いたします。
長野にいる方はこの機会にぜひイベントにお越しください。
また入塾キャンペーンも実施中です。
詳しくは以下をご確認ください。
Akros Web & Business Design Academy 長野校 リニューアルオープン!
