超現場ブログ

Technique,Design and Events

私の作業用フォルダ構成

Twitter Facebook Google+ はてブ

フォルダ構成

フロントエンド開発をする中で様々なツールが取りざたされてきていますが、皆さんはどのようなツールを使用されているでしょうか。

最近私はひとまずシンプルなGulpの利用に落ち着かせています。
(Webpack、Vue.jsの利用を控えさせつつ・・・)

さて、その際に皆さんフォルダ構成はどうされているでしょうか。
使用されているツールや、これまで使用してきた言語環境によって似たような構成であっても若干異なっていたりしますよね。

もちろん、その環境にあった構成であればいいと思いますが、私は以下にしています。
(これが正解というわけでもないです)

私のフロントエンド開発用フォルダ構成


./
├─.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

皆さんはどのような環境でしょうか。
WEB塾では体験・カウンセリングを行っておりますのでこのような部分も気になっている方はぜひお越しください。
WEBデザイナー育成・WEBの技術が学べるスクール WEB塾超現場主義 体験・カウンセリング

また、10月から長野校がリニューアルオープンいたしました。
11月から毎週土曜日に人数限定のオープン記念無料イベントを開催いたします。

長野にいる方はこの機会にぜひイベントにお越しください。
また入塾キャンペーンも実施中です。
詳しくは以下をご確認ください。
WEB塾超現場主義 長野校 リニューアルオープン!

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.