English description | Описание на русском
A lean and powerful, gulp-based boilerplate for better front-end coding with Gulp, Pug and Stylus
- 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-cli
globally (once!)yarn global add gulp-cli
-
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-cli
globally (once!)npm install gulp-cli -g
-
Install dependencies
npm install
-
-
Start
gulp
gulp dev
-
In browser open page with address
http://localhost:3000/
gulp dev
- launches watchers and servergulp build
- compile a projectgulp zip
- compile a project in zipgulp deploy
- compile a project and push inbuild
branch to git repository
There is a script for add/delete modules in project in gulp-front.
For npm use npm run <command>
, for Yarn use yarn <command>
amo <moduleName>
- creates an empty module with a help of technologies, such as pug and styl;amo <moduleName> js yml
- creates an empty module with a help of pug and styl and also using additional technologies: js, yml and json;rmo <moduleName>
- Use to delete a module.
Examples: npm run amo my-module yml js
, yarn amo my-other-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