https://github.com/p3yman/frontier
🚀 A workflow for front-end projects with gulp
https://github.com/p3yman/frontier
css front-end gulpjs html javascript ui workflow
Last synced: 4 months ago
JSON representation
🚀 A workflow for front-end projects with gulp
- Host: GitHub
- URL: https://github.com/p3yman/frontier
- Owner: p3yman
- License: mit
- Created: 2018-03-11T06:16:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-07T08:24:15.000Z (almost 8 years ago)
- Last Synced: 2025-07-17T13:42:08.971Z (11 months ago)
- Topics: css, front-end, gulpjs, html, javascript, ui, workflow
- Language: JavaScript
- Homepage:
- Size: 108 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 Frontier
### A starter for front-end projects with gulp
This is a workflow for front-end and ui projects. Works done with this workflow is:
- Sass: Watch, compile, add source maps, autoprefix, minify, csscomb and rtl
- HTML: Use partials, conditions and loops using gulp-file-include
- JS: Concat, uglify and minify js files with seperation of vendor and libraries files.
- Images: Compression
- Fonts: Copy
- Build: Backup source, zip and clear dist
### Packages used:
- [gulp](https://www.npmjs.com/package/gulp)
- [gulp-sass](https://www.npmjs.com/package/gulp-sass)
- [gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps)
- [gulp-cssnano](https://www.npmjs.com/package/gulp-cssnano)
- [gulp-autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer)
- [gulp-rename](https://www.npmjs.com/package/gulp-rename)
- [gulp-newer](https://www.npmjs.com/package/gulp-newer)
- [gulp-rimraf](https://www.npmjs.com/package/gulp-rimraf)
- [gulp-concat](https://www.npmjs.com/package/gulp-concat)
- [gulp-file-include](https://www.npmjs.com/package/gulp-file-include)
- [gulp-uglify](https://www.npmjs.com/package/gulp-uglify)
- [gulp-csscomb](https://www.npmjs.com/package/gulp-csscomb)*
* `gulp-csscomb` has a config file that is placed in route folder called `.csscomb.json`. You can change it's configs using it's own [documentations](http://csscomb.com/docs).
### Install
- Make sure you have these installed
- [Node.js](https://nodejs.org)
- [npm](https://www.npmjs.com/)
- [Git](https://git-scm.com/)
- Clone this repository using `git clone https://github.com/peyman3d/frontier.git FOLDERNAME`
- CD to the folder cd FOLDERNAME
- Run `npm install` to install the node.js dependencies
- Run `gulp` to start gulp workflow watchers
### Folder structure
I tried to make folder structure as simple as it can and it's like this:
```
project
└── src
├── fonts
├── html
│ ├── elements // for elements like post-item.html
│ ├── partials // for partials like header.html or sidebar.html
├── images
├── js
├── vendor // for external plugins like jquery
├── lib // for project js files
└── sass // for sass files. you can set inner structure as you want
```