Gulp Front

English description | Описание на русском

A lean and powerful, gulp-based boilerplate for better front-end coding with Gulp, Jade and Stylus

Demo

zoxon.github.io/gulp-front

Benefits & Features

Fast and easy collector (gulp)
Simplest modules realization (js, styl, jade, json and other files)
Base modules (bread-crumbs, button, footer, form, form-item, header, input-group, logo, main-menu, page-title, pagination and etc.)
Build of svg sprites for inline connection (gulp-svg-symbols)
Build of png and retina sprites (gulp-spritesmith)
Jade mixins for @media (rupture)
Merging @media and transfer it to the end of the file (gulp-combine-mq)
Server and synchronous site testing in the browser (using the browser-sync)
Autosubstitution of vendor prefixes in CSS (autoprefixer-stylus)
Jade template and HTML preprocessor (gulp-jade)
JavaScript files concatenation (gulp-include)
CSS formatting (gulp-csscomb)
Image compression (gulp-imagemin)
CSS preprocessor (gulp-stylus)
CSS minification (gulp-csso)
HTML formatting (gulp-htmlprettify)
JavaScript Minification (gulp-uglify)
Errors searching and output without stopping gulp (gulp-plumber)
Jade mixins for form elements
Customized typography based on normalize.css
Mixins for grid (fluid and fixed)
Mixins for font-face and others.
Customized configs for Travis CI and EditorConfig
Compiled files package in zip

Quick start

Install the node.js

Go to the folder with installed nodejs, update npm to the latest version

 cd "C:\Program Files\nodejs"

 cd "C:\Program Files (x86)\nodejs"

and execute

 npm install npm@latest

Clone the project or download the file

 git clone git@github.com:zoxon/gulp-front.git my-project && cd my-project

Install gulp globally (once!)
```
 npm i -g gulp
```
Install dependencies
```
 npm i
```
Start gulp
```
 gulp dev
```
In browser open page with address http://localhost:3000/

Main tasks

gulp dev - launches watchers and server
gulp build - compile a project
gulp zip - compile a project in zip
gulp deploy - compile a project and push in build branch to git repository

Module generation

There is a script for add/delete modules in project in gulp-front.

npm run amo <moduleName> - creates an empty module with a help of technologies, such as jade and styl;
npm run amo <moduleName> js yml json - creates an empty module with a help of jade and styl and also using additional technologies: js, yml and json;
npm run rmo <moduleName> - Use to delete a module.nologies: js, yml and json;
npm run rmo <moduleName> - Use to delete a module.

Files and folders structure

gulp-front/                             # Project root
├── dest                                # Compiled files
├── source                              # Source files
│   ├── modules                         # Modules folder
│   ├── pages                           # Pages
│   └── static                          # Static files
│       ├── assets                      # Other files
│       ├── scripts                     # JavaScript files
│       │   ├── plugins                 # JavaScript plgins and libs
│       │   ├── main.js                 # Main JavaScript file
│       │   └── plugins.js              # Plugins assemblage file
│       └── styles                      # Static styles
│           ├── components              # Componetns
│           ├── plugins                 # Plugins styles
│           ├── _common.styl            # Different styles
│           ├── _media.styl             # @media
│           ├── _variables.styl         # Variables
│           ├── main.styl               # Main styles
│           └── reset.styl              # Styles reset + typography
├── tmp                                 # Temp folder
├── zip                                 # Folder with zip archives
├── package.json                        # Dependencies for node.js
├── .csscomb.json                       # csscomb config
├── .editorconfig                       # EditorConfig
├── .travis.yml                         # TravisCI config
├── gulpfile.js                         # gulp.js config
├── LICENSE                             # License
└── README.md                           # File you read

License

The MIT License (MIT)

emily0604 / gulp-front