Gulp V4 - RollUp - Babel - Stylus - Pug

gulpfile.js

let gulp = require('gulp')
let rev = require('gulp-rev')
let concat = require('gulp-concat')
let rename = require('gulp-rename')
let replace = require('gulp-replace')
let clean = require('gulp-clean')
let uglify = require('gulp-uglify')
let autoprefixer = require('gulp-autoprefixer')
let cssnano = require('gulp-cssnano')
let htmlmin = require('gulp-htmlmin')
let inject = require('gulp-inject')
let file = require('gulp-file')

let stylus = require('gulp-stylus')
let pug = require('gulp-pug')

let rollup = require('rollup')
let babel = require('rollup-plugin-babel')
let alias = require('rollup-plugin-alias')
let commonjs = require('rollup-plugin-commonjs')
let noderesolve = require('rollup-plugin-node-resolve')

let browserSync = require('browser-sync')
let server = browserSync.create()

let path = require('path')

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

let rollme = () => rollup
  .rollup({
    input: paths.js.entry,
    plugins: [
      babel({
        presets: [ [ 'env', { modules: false } ] ],
        exclude: 'node_modules/**',
        babelrc: false
      }),
      alias({
        resolve: [ '.js' ],
        '@': resolve('src/js')
      }),
      commonjs(),
      noderesolve()
    ]
  })
  .then(bundle => bundle.generate({
    format: 'iife',
    name: 'main'
  }))

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

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

let serveClean = done => gulp
  .src(dirs.temp, { read: false, allowEmpty: true })
  .pipe(clean())

let serveJs = done => rollme()
  .then(gen => file('main.js', gen.code, { src: true })
    .pipe(gulp.dest(dirs.temp))
    .pipe(server.stream()))

let serveStylus = done => gulp
  .src(paths.stylus.entry)
  .pipe(stylus())
  .pipe(autoprefixer())
  .pipe(gulp.dest(dirs.temp))
  .pipe(server.stream())

let servePug = done => gulp
  .src(paths.pug.entry)
  .pipe(pug({
    pretty: true
  }))
  .pipe(inject(gulp.src([
    '**/*.css',
    '**/*.js'
  ], {
    cwd: dirs.temp,
    read: false
  }), {
    addRootSlash: false
  }))
  .pipe(gulp.dest(dirs.temp))
  .pipe(server.stream())

let serveStatic = done => gulp
  .src(paths.static.entry, {base: dirs.src})
  .pipe(gulp.dest(dirs.temp))

let serveWatch = done => {
  gulp.watch(paths.js.all, serveJs)
  gulp.watch(paths.stylus.all, serveStylus)
  gulp.watch(paths.pug.all, servePug)
  gulp.watch(paths.static.all, serveStatic).on('change', server.reload)
  done()
}

let serveStart = done => {
  server.init({
    server: {
      baseDir: dirs.temp
    }
  })
  done()
}

let serve = gulp.series(serveClean, serveJs, serveStylus, servePug, serveStatic, serveWatch, serveStart)

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

let buildJs = done => rollme()
  .then(gen => file('main.js', gen.code, { src: true })
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest(dirs.dist)))

let buildStylus = done => gulp
  .src(paths.stylus.entry)
  .pipe(stylus())
  .pipe(autoprefixer())
  .pipe(concat('main.css'))
  .pipe(cssnano())
  .pipe(rev())
  .pipe(gulp.dest(dirs.dist))

let buildPug = done => gulp
  .src(paths.pug.entry)
  .pipe(pug())
  .pipe(inject(gulp.src([
    '**/*.css',
    '**/*.js'
  ], {
    cwd: dirs.dist,
    read: false
  }), {
    addRootSlash: false
  }))
  .pipe(htmlmin({
    minifyJS: true,
    minifyCSS: true,
    removeComments: true,
    collapseWhitespace: true
  }))
  .pipe(gulp.dest(dirs.dist))

let buildStatic = done => gulp
  .src(paths.static.entry, { base: dirs.src })
  .pipe(gulp.dest(dirs.dist))

let build = gulp.series(buildClean, buildJs, buildStylus, buildStatic, buildPug)

exports.default = serve
exports.build = build

exports.clean = gulp.parallel(serveClean, buildClean)

package.json

{
  "name": "rollme",
  "version": "1.0.0",
  "description": "gulp, babel, stylus, pug, rollup",
  "author": "Ashish Suthar",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "browser-sync": "^2.23.6",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-file": "^0.4.0",
    "gulp-htmlmin": "^4.0.0",
    "gulp-inject": "^4.3.1",
    "gulp-pug": "^3.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.6.1",
    "gulp-rev": "^8.1.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-stylus": "^2.7.0",
    "gulp-uglify": "^3.0.0",
    "rollup": "^0.56.3",
    "rollup-plugin-alias": "^1.4.0",
    "rollup-plugin-babel": "^3.0.3",
    "rollup-plugin-commonjs": "^8.3.0",
    "rollup-plugin-node-resolve": "^3.0.3"
  }
}