Front end file structures

This project is basic template for front end developers, with perfect file structrues using gulp.js, npm and bower

• You can also use npm and bower libraries
• See HTML in the right
• Magic

project

└── assets
    ├── css
    │   ├── build
    │   └── src
    ├── fonts
    │   └── fontName
    ├── img
    ├── js
    │   ├── build
    │   │   ├── libs
    │   │   ├── plugins
    │   │   └── view
    │   │       ├── about
    │   │       ├── contact
    │   │       └── main
    │   └── src
    │       ├── libs
    │       ├── plugins
    │       └── view
    │           ├── about
    │           ├── contact
    │           └── main
    └── sass
        ├── components
        ├── fonts
        ├── libs
        ├── mixins
        ├── plugins
        └── vendors
             

Tech

FrontEndFileStructures uses a number of open source projects to work properly:

• SASS - CSS with superpowers.
• node.js - evented I/O for the backend.
• NPM - Build amazing things.
• Bower - A package manager for the web.
• Gulp - the streaming build system.

And of course this project itself is open source with a FrontEndFileStructures on GitHub.

Installation

Using Bower.io

$ bower install --save front-end-file-structures

This project requires Node.js v4+ to run. Download and extract the latest pre-built release.

Install the dependencies and devDependencies and start the server.

$ cd FrontFileStrucutres
$ npm install

Install bower

$ npm install -g bower

Install bower dependencies and devDependencies

$ bower install

Gulpfile.js Plugins

FrontEndFileStructures is currently extended with the following plugins

• gulp
• gulp-sourcemaps
• gulp-sass
• gulp-uglify
• gulp-minify-css
• gulp-ignore
• gulp-htmlmin
• gulp-rename
• gulp-watcer

Development

Want to contribute? Great!

FrontEndFileStructures uses Gulp for fast developing. Make a change in your file and instantanously see your updates!

Open your favorite Terminal and run these commands.

Run Gulp Watcher:

$ gulp watcher

sass:

$ gulp sass

minify css:

$ gulp minify-css

compress js:

$ gulp compress-js

License

MIT

Free Software, Hell Yeah!