toddmotto / fireshell

Fiercely quick front-end boilerplate and workflows, HTML5, Grunt, Sass.

Home Page:http://getfireshell.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Suggestion for change in folder structure

creativeaura opened this issue · comments

I have a suggestion regarding the directory structure. Currently you have src folder outside the app. This ways our development and production folder is the same. It works fine when you want to JavaScript and CSS files but I prefer using requirejs to manage my Javascript assets and this way my development index.html is different from production. I prefer using grunt-usemin to replace some content from my development file.

Let me show you one scenario where my i use requirejs to load source files asynchronously and in my production / deployment file I don;t have to use requirejs and can can make just one http request to my bundle file. Another reason can be if you want to optimise your images via some grunt plugin and in the current structure you will override them.

Development

<!-- build:js scripts/bundle.js -->
<script data-main="scripts/config" src="scripts/libs/require.js"></script>
<!-- endbuild -->

Deployment

<script src="scripts/bundle.js"></script>

So my suggested scaffolding will look something like this

├── deploy
│   ├── apple-touch-icon-precomposed.png
│   ├── assets
│   │   ├── css
│   │   ├── fonts
│   │   ├── img
│   │   └── js
│   ├── favicon.ico
│   └── index.html
├── app
│   ├── apple-touch-icon-precomposed.png
│   ├── js
│   │   └── scripts.js
│   └── scss
│       ├── mixins
│       ├── modules
│       ├── partials
│       ├── vendor
│       └── style.scss
│   ├── favicon.ico
│   └── index.html
├── docs
├── grunt-build.command
├── grunt-build.bat
├── grunt-dev.command
├── grunt-dev.bat
├── package.json
├── README.md
├── .editorconfig
├── .gitignore
├── .jshintrc
└── .travis.yml

I really wanted to use the bootstrap for my projects but the current structure will not fit well in my most projects. I you agree I can help in restructure in a separate branch.

I would suggest to make the production and development directories separate. This would open some new possibilities such as automatic compressing and crunching of image assets.

I also agree that it would be better to break both libs.
it will also makes it possible for using HTML minify.

+1 for separate production and development directories

if you do seperate the directories, wouldn't it be best to keep the same folder structure to avoid confusion ?

i.e.

  • prod
    • assets
      • js
      • fonts
      • img
      • css
    • index.html
  • dev
    • assets
      • js
      • fonts
      • img
      • scss
    • index.html

I can mirror the directory structure with all pre-processor file like coffee-script, sass, less etc in dev and production optimised and ready for deployment. I follow this for all my projects but I have to always create this from scratch, If fireshell can provide this new structure it will be awesome.

Thanks for the ideas guys, really nice. I'm wondering if a RequireJS 'version' of FireShell (possibly as a release branch) would be ideal here? Require would take some extra configuration in Gruntfile.js as well as inside the /js/ folders and then concat'd for production. I do like the sound of splitting these into two so everything from src would be copied across to app, with all concats/mins/compressions applied.