This is a lightweight framework used to create and compile your site

Latest docs accesible only in russian README.RU.md

• Nodejs run with nodemon
• Static server with browsersync
• Live code reload with nodemon and/or browsersync
• Deploy with rsync
• Pug or HTML templates
• Pug compilation
• HTML compilation (gulp-include) as fallback
• Browserify support
• JavaScript compilation with gulp-include as fallback
• Babel for JavaScript
• Uglify code for production
• Postcss support (precss and postcss-cssnext)
• CSS minimization with cssmin
• Sourcemaps support for JavaScript and CSS
• Image compressing with imagemin
• CSS lint with stylelint
• CSS fix with stylefmt and postcss-sorting
• JavaScript lint with eslint
• JavaScript fix with eslint and js-beautify
• HTML lint with htmllint
• HTML prettify with html-prettify
• Pug lint with pug-lint

src
├── package.json
├── bower.json
├── index.js
├── lib/
├── routes/
├── public/
│   ├── js/
│   │   ├── includes/
│   │   ├── partials/
│   │   └── views/
│   ├── css/
│   │   ├── includes/
│   │   ├── partials/
│   │   └── views/
│   ├── font/
│   └── img/
└── views/
   ├── partials/
   └── templates/

File with npm deps

File with bower deps

Main file of your Nodejs project. This script will be called by nodemon when you run gulp. If you"re making a static site, you won"t need this file.

Your JavaScript code for backend If you"re making a static site, you won"t need this folder either.

This folder should be used for scripts which define the routes for you site

This folder will be routed as "/public" with Browsersync, or, in case you use your own server, you must make this folder accesible as /public

It"ll be a good practice if you"ll use those files as the main scripts/styles for your site

Also it would be very nice if you"ll use this files for some of your routes, for example

views/index.css -> /
views/about.css -> /about

It"s recommended for you to use this files in order to include the main files Example of JavaScript including

const $ = require("jquery") // If you use Browserify
//=require includes/somefile.js // If you use fallback `gulp-include`

Example of CSS including:

@import "includes/somefile";
/* This import in your css includes/_somefile.css */

This folder is very similar to includes/, but it would be nice if you"ll use this folder for some widgets of your site, and it"s recommended to include this files only in the main files (and not in the views/* files)

This is the folder for your views of the site, if you use your own server If youre creating a static site - put your Pug or HTML there, and the files will be routed as /. For example

views/index.pug -> /index.html
views/about.html -> /about.html

• Bablel .babelrc
• Eslint .eslintrc
• htmllint .htmllintrc
• js-beautify .jsbeautifyrc
• postcss-sorting .postcss-sorting.json
• pug-lint .pug-lintrc
• Stylelint .stylelintrc

First you need create the file structure described previous (if you use Yeoman generator, you can skip this step)

cp -Rp example/ src/

Create a sample config (if you use Yeoman generator, skip this step)

cp config.example.json config.json
vim config.json

Now you can execute gulp in order to start the build, watching and live-reload your code. Or you can simply run gulp build or gulp server separately. Also you can run gulp lint for linting, gulp fix for fixing and beautifing the code and gulp self-update for updating this script.--all flag enables the building of all the files, without changing none of them. --production flag enables the production mode.--deploy flag enables deploying using rsync.

MIT © Grigorii Horos