Bundler - Rollup - Part Two

   
   
 rollup  
 frontend  
Article Series

HTML Basic Related Articles.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Put the whole stuff together using rollup bundler.

5: Template - Pug - Skipped

I found the rollup-plugin-pug works well. It can render a pug file into html, and put the html into build/js/script.js. But I still do not know, how to extract the string into external html file.

Objective

Generate build/index.html, from src/pug/alert.pug.

Result

Since I failed. I skip this part. But don’t worry, the rest of this article works well. And I think you can continue safely.

6: Stylesheet - Render Stylus

Objective

Generate output from the src/css/style.styl stylesheet into build/css/style.css.

Directory Tree

  • Additional artefact: src/css/style.styl.

  • Removed artefact: src/css/style.css.

├── build
│   ├── css
│   │   └── style.css
│   ├── index.html
│   └── js
│       └── script.js
├── package.json
├── rollup.config.js
└── src
    ├── css
    │   └── style.styl
    ├── entry.js
    ├── html
    │   └── alert.html
    └── js
        └── script.js

Example Stylus

Th example src/css/style.js contain this file:

...
.red
  color: #fff !important
  background-color: #f44336 !important

.yellow
  color: #000 !important
  background-color: #ffeb3b !important
...

package.json

Additional rollup plugin rollup-plugin-stylus-compiler.

Do not forget to install stylus first.

rollup.config.js

The configuration has only one entry point: the src/entry.js.

import html from 'rollup-plugin-generate-html-template';
import css from 'rollup-plugin-css-only';
import stylus from 'rollup-plugin-stylus-compiler';

export default {
  input: 'src/entry.js',
  output: { 
    file: 'build/js/script.js',
    format: 'iife'
  },
  plugins: [
    stylus(),
    css({ 
      output: 'build/css/style.css' 
    }),
    html({
      template: 'src/html/alert.html',
      target: 'build/index.html',
      inject: 'head',
      externals: [
        { type: 'js', file: "js/script.js", pos: 'before' }
      ]
    })
  ]
}

entry.js

To make life easier, I make a file named entry,js, with content as below code:

import './js/script.js'
import './css/style.styl'

You can name the file anything you like, as long as it is javascript.

The rollup-plugin-stylus-compiler enable the javacript, to understand the stylus file format to be imported.

Command Line Interface

Just run the rollup in terminal

rollup v2.9.0
bundles src/entry.js → build/js/script.js...
created build/js/script.js in 156ms

[2020-05-12 02:44:44] waiting for changes..

Again, still the very same output.

Result

The rollup generate build/css/style.css, that rendered from src/css/style.styl.

Plugin in Configuration

Based on rollup-plugin-stylus-compiler.

  plugins: [
    stylus(),
    ...
  ]

7: Javascript - Compile Coffeescript

Objective

Bundle Javascript from src/js/script.coffee to build/js/script.js.

Directory Tree

  • Additional artefact: src/js/script.coffee.

  • Removed artefact: src/jss/script.js.

├── build
│   ├── css
│   │   └── style.css
│   ├── index.html
│   └── js
│       └── script.js
├── package.json
├── rollup.config.js
└── src
    ├── css
    │   └── style.css
    ├── entry.js
    ├── html
    │   └── alert.html
    └── js
        └── script.coffee

Example Coffeescript

Th example src/css/style.js contain this file:

document.addEventListener 'DOMContentLoaded', (event) ->
  alertButtons = document.getElementsByClassName('dismissable')
  i = 0
  while i < alertButtons.length

    alertButtons[i].onclick = ->
      @parentElement.style.display = 'none'
      console.log 'Close Button. Element ' + @parentElement.id + ' dismissed'
      false

    i++
  return

package.json

Additional rollup plugin rollup-plugin-coffee-script.

Do not forget to install coffeescript first.

rollup.config.js

The configuration has only one entry point: the src/entry.js.

import html from 'rollup-plugin-generate-html-template';
import css from 'rollup-plugin-css-only';
import coffeescript from 'rollup-plugin-coffee-script';

export default {
  input: 'src/entry.js',
  output: { 
    file: 'build/js/script.js',
    format: 'iife'
  },
  plugins: [
    coffeescript(),
    css({ 
      output: 'build/css/style.css' 
    }),
    html({
      template: 'src/html/alert.html',
      target: 'build/index.html',
      inject: 'head',
      externals: [
        { type: 'js', file: "js/script.js", pos: 'before' }
      ]
    })
  ]
}

entry.js

To make life easier, I make a file named entry,js, with content as below code:

import './js/script.coffee'
import './css/style.css'

You can name the file anything you like, as long as it is javascript.

The rollup-plugin-coffee-script enable the javacript, to understand the coffeescript file format to be imported.

Command Line Interface

Just run the rollup in terminal

rollup v2.9.0
bundles src/entry.js → build/js/script.js...
created build/js/script.js in 114ms

[2020-05-12 02:55:02] waiting for changes...

Over and over, still the very same output.

Result

The rollup generate build/js/script.js, that compiled from src/jss/script.coffee.

Plugin in Configuration

Based on rollup-plugin-coffee-script.

  plugins: [
    coffeescript(),
    ...
  ]

8: Tools: Dev Server

Rollup is equipped by a web server. Instead of browsersync or other simple webserver, you may use rollup-plugin-serve.

Objective

Serve Development Site, along with livereload.js.

Directory Tree

We are going to use, our last 3: Template - HTML example.

├── build
│   ├── css
│   │   └── style.css
│   ├── index.html
│   └── js
│       └── script.js
├── package.json
├── rollup.config.js
└── src
    ├── css
    │   └── style.css
    ├── entry.js
    ├── html
    │   └── alert.html
    └── js
        └── script.js

package.json

Additional rollup plugin rollup-plugin-serve. And optionally plugin rollup-plugin-livereload.

rollup.config.js

The configuration has only one entry point: the src/entry.js.

import html from 'rollup-plugin-generate-html-template';
import css from 'rollup-plugin-css-only';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload'

export default {
  input: 'src/entry.js',
  output: { 
    file: 'build/js/script.js',
    format: 'iife'
  },
  plugins: [
    css({ 
      output: 'build/css/style.css' 
    }),
    html({
      template: 'src/html/alert.html',
      target: 'build/index.html',
      inject: 'head',
      externals: [
        { type: 'js', file: "js/script.js", pos: 'before' },
        { type: 'css', file: "css/style.css", pos: 'before' }
      ]
    }),
    serve('build'),
    livereload({
      watch: ['dist', 'src']
    })
  ]
}

Command Line Interface

Just run the rollup in terminal

rollup v2.9.0
bundles src/entry.js → build/js/script.js...
http://localhost:10001 -> /home/epsi/Documents/html-basic/05-rollup/08-server/build
LiveReload enabled
created build/js/script.js in 144ms

[2020-05-12 03:56:43] waiting for changes...

Finally, comes up something different.

Rollup: Stylesheet: Running Rollpack with Serve and LiveReload

Plugin in Configuration

Add both plugin:

import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload'

And configure:

  plugins: [
    ...
    serve('build'),
    livereload({
      watch: ['dist', 'src']
    })
  ]

9: Putting All Stuff Together

Objective

Putting Together, HTML + Stylus + Coffeescript

Directory Tree

├── build
│   ├── css
│   │   └── style.css
│   ├── index.html
│   └── js
│       └── script.js
├── package.json
├── rollup.config.js
└── src
    ├── css
    │   └── style.styl
    ├── entry.js
    ├── html
    │   └── alert.html
    └── js
        └── script.coffee

Rollup: Nerdtree configuration

package.json

We finally made this long dependency

  "devDependencies": {
    "rollup": "^2.9.0",
    "rollup-plugin-css-only": "^2.0.0",
    "rollup-plugin-generate-html-template": "^1.6.1",
    "rollup-plugin-livereload": "^1.3.0",
    "rollup-plugin-serve": "^1.0.1",
    "coffeescript": "^2.5.1",
    "rollup-plugin-coffee-script": "^2.0.0",
    "rollup-plugin-stylus-compiler": "^1.0.1"
  }

rollup.config.js

Still using the only one entry point: the src/entry.js.

import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload'

import html from 'rollup-plugin-generate-html-template';
import css from 'rollup-plugin-css-only';

import stylus from 'rollup-plugin-stylus-compiler';
import coffeescript from 'rollup-plugin-coffee-script';

export default {
  input: 'src/entry.js',
  output: { 
    file: 'build/js/script.js',
    format: 'iife'
  },
  plugins: [
    stylus(),
    coffeescript(),
    css({ 
      output: 'build/css/style.css' 
    }),
    html({
      template: 'src/html/alert.html',
      target: 'build/index.html',
      inject: 'head',
      externals: [
        { type: 'js', file: "js/script.js", pos: 'before' }
      ]
    }),
    serve('build'),
    livereload({
      watch: ['dist', 'src']
    })
  ]
}

Command Line Interface

Just run the rollup in terminal

rollup v2.9.0
bundles src/entry.js → build/js/script.js...
http://localhost:10001 -> /home/epsi/Documents/html-basic/05-rollup/09-all/build
LiveReload enabled
created build/js/script.js in 317ms

[2020-05-12 04:17:38] waiting for changes...

The same as previous screenshot.

Directory Tree Result

You can see the build directory content here:

Rollup: All: Directory Tree

View in Browser

It is a good time to check again, if everything works fine in browser.

Change in Configuration

The rollup configuration is pretty self-explanatory. All has been discussed, step by step.

I think that’s all about rollup. Now you are ready to generate your static site, without any framework, nor SSG, nor backend.

What’s Next?

Consider continue reading [ Bundler - Parcel ].