@emintayfur/hub v0.1.2

The Hub

The Hub plain is a CLI Toolkit coded to make plain HTML developers' work easier and reduce their workload.

Features

• Live server
• Scroll watcher
• JS Uglify
• Globalization
• SASS support
• TailwindCSS support
• HTML beautifier for production
• Common scripts and styles
• Image minifier
• CSS minifier
• JS minifier
• Stupidly easy to use

Installation / Update

Hub needs NodeJS. Please install NodeJS from here if npm is not installed.

$ npm i -g @emintayfur/hub

Initialize a new Project

$ hub init

New Page or Section

for creating a new page, you can use the following command:

$ hub new page {pageName}

for creating a new section, you can use the following command:

$ hub new section {sectionName}

Build

$ hub build

Tailwind Configuration

You can configure tailwind in hub.config.js file.

Example:

module.exports = {
    template: 'tailwind',
    port: 3000,
    // tailwind configuration
    tailwind: {
        extend: {
            colors: {
                red: {
                    300: '#ff0000',
                },
                blue: '#0000ff',
            }
        }
    },
};

Folder structure

Let's explain the folder structure that the hub expects through the example project structure below.

• My Template
  • src
    • *assets
      • *common
        • *css
          • ...
        • *js
          • ...
      • *vendors
        • ...
      • css
        • ...
      • js
        • ...
    • sections
      • footer
        • *index.html
        • *section.config.js
      • ...
    • pages
      • home
        • src
          • assets
            • css
              • ...
            • js
              • ...
          • *index.html
        • *section.config.js
  • *hub.config.js

./pages/**/section.config.js

module.exports = {
    include: [
        '@/assets/images/1.jpg',
        // ...
    ],
}

./hub.config.js

module.exports = {
    // template is required. Please do not change this.
    template: 'tailwind',
  
    port: 4000,
};

Usage / Commands

Initialize new project

$ cd {your_project_parent_folder}
$ hub init
$ # And answer the questions :)  

Start your project

$ cd {your_project}
$ hub start  

Build your project

$ cd {your_project}
$ hub build  

Globalize the page

$ cd {your_project}
$ hub globalize 
$ # and select your page.

Use globalized page

$ cd {your_project}
$ hub use 
$ # and select your page.

Un-globalize the page

$ hub un-globalize 
$ # and select your page.