gulp-front editorconfig travis-ci gulp npm

Frontend project for gulp, jade, stylus

Gulp Front

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

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

Build Status devDependency Status GitHub issues GitHub forks GitHub stars GitHub license Join the chat at https://gitter.im/zoxon/gulp-front

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 (css-mqpacker)
  • Server and synchronous site testing in the browser (using the browser-sync)
  • Autosubstitution of vendor prefixes in CSS (autoprefixer)
  • 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"
    

    or

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

    and execute

    npm install [email protected]
    
  • Clone the project or download the file

    git clone [email protected]: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)

Related Repositories

gulp-starter

gulp-starter

gulp starter kit for front-end developers ...

qualy-front

qualy-front

:construction: work in progress - A simple boilerplate with ES6, Gulp, Jade, Stylus and Browsersync. ...

gulp-front

gulp-front

Frontend project for gulp, jade, stylus ...

gulp-workflow

gulp-workflow

Gulp workflow for front-end development ...

gulp-boilerplate

gulp-boilerplate

easy gulp template for fast front-end build ...


Top Contributors

zoxon ilkome

Releases

-   v.7.0.3 zip tar
-   v.7.0.2 zip tar
-   v.7.0.1 zip tar
-   v.7.0.0 zip tar
-   v.6.0.13 zip tar
-   v.6.0.12 zip tar
-   v.6.0.11 zip tar
-   v.6.0.10 zip tar
-   v.6.0.9 zip tar
-   v.6.0.8 zip tar
-   v.6.0.7 zip tar
-   v.6.0.6 zip tar
-   v.6.0.5 zip tar
-   v.6.0.4 zip tar
-   v.6.0.3 zip tar
-   v.6.0.2 zip tar
-   v.6.0.1 zip tar
-   v.6.0.0 zip tar
-   v.5.3.2 zip tar
-   v.5.3.1 zip tar
-   v.5.3.0 zip tar
-   v.5.2.3 zip tar
-   v.5.2.2 zip tar
-   v.5.2.1 zip tar
-   v.5.2.0 zip tar
-   v.5.1.0 zip tar
-   v.5.0.8 zip tar
-   v.5.0.7 zip tar
-   v.5.0.3 zip tar
-   v.5.0.2 zip tar