Static Web Build dependencies Status

A simple workflow for static websites with live-reload local server, Babel transpiler for JavaScript and bundling CSS with PostCSS and postcss-preset-env.

🌍 https://staticbuild.website/


Features ⚑️

  • Processing styles using PostCSS with postcss-preset-env
  • Babel transpiler for JavaScript (ES6)
  • JavaScript concatenating and minification
  • CSS minification
  • HTML minification
  • Image compression
  • Assets copying
  • Templating & partial HTML injection
  • Cache-busting
  • Local development server
  • Live-reload for the development environment
  • Distribution files: build/.

Setup βš™οΈ

This project requires node version 7.5+. This is the only global dependency.

Installation ⏳

Development πŸ‘Ύ

To start the development server just run the dev task:

$ npm run dev

This will start the development server. The server is based on browserSync, supports live reloading which enables hot swapping of CSS styles without reloading the page.

Have fun ✌️

Terminal

Templating ✍️

To avoid repetitive HTML code the build uses gulp-file-include, it allow us to re-use chunks of code written in separate files. It is recommended to place the included files in the /src/includes directory to keep track of changes and live-reload.

Simple Include

@@include(β€˜./includes/header.html')

Include with Parameters

@@include('./includes/helmet.html', {
    "title": "Static Web Build"
})

/includes/helmet.html

<title>@@title</title>

If Statement

@@include(β€˜./includes/header.html’{
    "menu": true
});

/includes/header.html

<article>
    <h1>@@title</h1>
    @@text
</article>

Loop

<body>
    @@loop(β€˜./includes/loop-article.html’, [
        { "title": "My post title", "text": "<p>lorem ipsum...</p>" },
        { "title": "Another post", "text": "<p>lorem ipsum...</p>" },
        { "title": "One more post", "text": "<p>lorem ipsum...</p>" }
    ])
</body>

/includes/loop-article.html

<article>
    <h1>@@title</h1>
    @@text
</article>

File Structure πŸ—

β”œβ”€β”€ build/                   # Build files
β”œβ”€β”€ dist/                    # Distribution files
β”œβ”€β”€ src/                     # Source files
β”‚   β”œβ”€β”€ assets/              # Assets directory
β”‚       β”œβ”€β”€ css/             # CSS files
β”‚       β”œβ”€β”€ fonts/           # Fonts directory
β”‚       β”œβ”€β”€ img/             # Image directory
β”‚       β”œβ”€β”€ js/              # JavaScript files
β”‚   β”œβ”€β”€ etc/                 # Additional build files
β”‚   β”œβ”€β”€ includes/            # Included partials
β”œβ”€β”€ tools/                   # Tools and utilities
β”‚   β”œβ”€β”€ stylelintrc.json     # Stylelint configuration file
β”‚   β”œβ”€β”€ IntelliJ.xml         # IntelliJ code style
└── .babelrc                 # Babel configuration
└── .gitignore               # Git ignored files
└── gulpfile.js              # Gulp configuration
└── LICENSE                  # License agreements
└── package.json             # Node packages
└── README.md                # You are reading this

Note: Your project files: src/


Production 🎬

To build the production files run the prod task:

$ npm run prod

The files will be generated in the app/ directory. The production build automatically minifies the html and css. By default also the javascript files are concatenated in one bundle: assets/js/bundle.js.

Gulpfile.js

Note: The Gulpfile.js requires a build restart for any changes to take effect.

PostCSS Plugins 🎨

Currently, PostCSS has more than 200 plugins. YouΒ can find all of the plugins in the plugins list or in the searchable catalog. ostcss-preset-env is installed in the default configuration.

/* -------------------------------------------------------------------------------------------------
PostCSS Plugins
------------------------------------------------------------------------------------------------- */
const pluginsDev = [
    postcssImport,
    postcssPresetEnv({
        stage: 0,
        features: {
            'nesting-rules': true,
            'color-mod-function': true,
            'custom-media': true,
        },
    }),
];
const pluginsProd = [
    postcssImport,
    postcssPresetEnv({
        stage: 0,
        features: {
            'nesting-rules': true,
            'color-mod-function': true,
            'custom-media': true,
        },
    }),
    require('cssnano')({
        preset: [
            'default',
            {
                discardComments: true,
            },
        ],
    }),
];
//--------------------------------------------------------------------------------------------------

JavaScript Files βš’

JavaScript files located in the project source directory src/assets/js/ and are automatically concatenated and included in the build process. However you can add additional / external JavaScript libraries by including the files in the Gulp configuration.

/* -------------------------------------------------------------------------------------------------
    Your JavaScript Files
------------------------------------------------------------------------------------------------- */
const headerJS = [
    './src/etc/analytics.js',
    './node_modules/aos/dist/aos.js'
];
const footerJS = [
    './node_modules/jquery/dist/jquery.js',
    './src/assets/js/**'
];
//--------------------------------------------------------------------------------------------------

The headerJS is included before the DOM is loaded and it does not use Babel for transpiling JavaScript. The footerJS is included after the DOM is loaded, and it goes thourgh Babel.


Technologies πŸš€

  • NodeJS
  • Gulp
  • browserSync
  • Babel
  • PostCSS
  • postcss-preset-env

Codestyle and Quality Assurance βš”οΈ

The static web build repository comes with its own set of code style rules that can be imported into IntelliJ. The codestyle file can be found here: tools/IntelliJ.xml

It is advised to run the command $ npm run lint:css before pushing changes, to make sure the codestyle is consistent!

License βš–οΈ

MIT

Changelog

v0.0.7

  • Improve cache busting - switched to gulp-rev-all

v0.0.5

  • Added support for static server using Express.
  • Switched from postcss-cssnext to postcss-preset-env.

v0.0.4

  • Fix IE animation keyframe minification.

v0.0.3

  • Update dependencies.
  • Code legibility.

v0.0.2

  • HTML Templating with gulp-include.
  • Bugfixes & speed improvements.

v0.0.1

  • Initializing Static Web Build.

Staticweb Build

A simple workflow for static websites with live-reload local server, Babel transpiler for JavaScript and bundling CSS with PostCSS and CSSNext.

Staticweb Build Info

⭐ Stars 16
πŸ”— Source Code github.com
πŸ•’ Last Update a year ago
πŸ•’ Created 6 years ago
🐞 Open Issues 4
βž— Star-Issue Ratio 4
😎 Author DEEP-IMPACT-AG