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

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

zoxon.github.io/gulp-front

• Fast and easy collector (gulp)
• Simplest modules realization (js, styl, pug, 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)
• Pug 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)
• Pug template and HTML preprocessor (gulp-pug)
• 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)
• Pug 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

• Install the node.js

• Clone the project or download the file

   git clone [email protected]:zoxon/gulp-front.git my-project && cd my-project

• For Yarn

  • Install gulp globally (once!)

     yarn global add gulp

  • Install dependencies

     yarn

• For NPM

  • Update npm to latest version Go to the folder with installed nodejs

     cd "C:\Program Files\nodejs"

    or

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

    and execute

     npm install npm@latest

  • Install gulp globally (once!)

     npm install gulp -g

  • Install dependencies

     npm install

• Start gulp

   gulp dev

• In browser open page with address http:https://localhost:3000/

• 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

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 pug and styl;
• npm run amo <moduleName> js yml - creates an empty module with a help of pug and styl and also using additional technologies: js, yml and json;
• npm run rmo <moduleName> - Use to delete a module completely;
• npm run rmo <moduleName> - Use to delete a module.

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

The MIT License (MIT)