Create Single HTML file from Stylus, Pug, JavaScript using Gulp, PostCSS, Rollup, Babel

README.md

├── gulpfile.babel.js
├── package.json
└── src
    ├── js
    │   └── index.js
    ├── pug
    │   └── index.pug
    └── stylus
        └── index.styl

gulpfile.babel.js

import gulp from 'gulp'
import gulpClean from 'gulp-clean'
import gulpStylus from 'gulp-stylus'
import gulpPostcss from 'gulp-postcss'
import gulpUglify from 'gulp-uglify'
import gulpInlineSource from 'gulp-inline-source'
import gulpFile from 'gulp-file'
import gulpPug from 'gulp-pug'
import gulpHtmlmin from 'gulp-htmlmin'

import autoprefixer from 'autoprefixer'
import cssnano from 'cssnano'

import {
  rollup
} from 'rollup'
import rollupBabel from 'rollup-plugin-babel'
import rollupAlias from 'rollup-plugin-alias'
import rollupCommonjs from 'rollup-plugin-commonjs'
import rollupNoderesolve from 'rollup-plugin-node-resolve'

import path from 'path'

const resolve = (...paths) => path.join(__dirname, ...paths)

const dirs = {
  src: resolve('src'),
  dist: resolve('dist'),
  temp: resolve('.temp')
}

const paths = {
  js: {
    entry: dirs.src + '/js/index.js',
    all: dirs.src + '/js/**/*.js'
  },
  stylus: {
    entry: [dirs.src + '/stylus/index.styl'],
    all: dirs.src + '/stylus/**/*.styl'
  },
  pug: {
    entry: [dirs.src + '/pug/index.pug'],
    all: dirs.src + '/pug/**/*.pug'
  }
}

const rollme = () => rollup({
    input: paths.js.entry,
    plugins: [
      rollupBabel({
        presets: [
          [
            '@babel/preset-env',
            {
              modules: false
            }
          ]
        ],
        plugins: [
          '@babel/transform-runtime'
        ],
        runtimeHelpers: true,
        exclude: 'node_modules/**',
        babelrc: false
      }),
      rollupAlias({
        resolve: ['.js'],
        '@': resolve('src/js')
      }),
      rollupCommonjs(),
      rollupNoderesolve()
    ]
  })
  .then(bundle => bundle.generate({
    format: 'iife',
    name: 'index'
  }))

const buildClean = done => gulp
  .src(dirs.dist, {
    read: false,
    allowEmpty: true
  })
  .pipe(gulpClean())

const buildStylus = done => gulp
  .src(paths.stylus.entry)
  .pipe(gulpStylus())
  .pipe(gulpPostcss([
    autoprefixer(),
    cssnano()
  ]))
  .pipe(gulp.dest(dirs.temp))

const buildJs = done => rollme()
  .then(gen => gulpFile('index.js', gen.code, {
      src: true
    })
    .pipe(gulpUglify())
    .pipe(gulp.dest(dirs.temp)))

const buildPug = done => gulp
  .src(paths.pug.entry)
  .pipe(gulpPug())
  .pipe(gulpInlineSource({
    rootpath: dirs.temp
  }))
  .pipe(gulpHtmlmin({
    minifyJS: true,
    minifyCSS: true,
    removeComments: true,
    collapseWhitespace: true
  }))
  .pipe(gulp.dest(dirs.temp))

const buildDist = done => gulp
  .src(dirs.temp + '/index.html')
  .pipe(gulp.dest(dirs.dist))

const clearTemp = done => gulp
  .src(dirs.temp, {
    read: false,
    allowEmpty: true
  })
  .pipe(gulpClean())

const build = gulp.series(buildClean, buildJs, buildStylus, buildPug, buildDist, clearTemp)

const watch = done => gulp
  .watch(dirs.src + '/**/*', build)

export default build
export { watch }

package.json

{
  "scripts": {
    "build": "gulp",
    "watch": "gulp watch",
    "serve": "gulp && serve ./dist"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/register": "^7.0.0",
    "autoprefixer": "^9.4.3",
    "cssnano": "^4.1.8",
    "gulp": "^4.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-file": "^0.4.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-inline-source": "^4.0.0",
    "gulp-postcss": "^8.0.0",
    "gulp-pug": "^4.0.1",
    "gulp-stylus": "^2.7.0",
    "gulp-uglify": "^3.0.1",
    "rollup": "^0.68.2",
    "rollup-plugin-alias": "^1.5.1",
    "rollup-plugin-babel": "^4.1.0",
    "rollup-plugin-commonjs": "^9.2.0",
    "rollup-plugin-node-resolve": "^4.0.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.2.0"
  }
}