Skip to content

Instantly share code, notes, and snippets.

@asissuthar
Last active June 12, 2020 15:04
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save asissuthar/d3fbd3dbbd4182927e7a0c30c64d6cbd to your computer and use it in GitHub Desktop.
Save asissuthar/d3fbd3dbbd4182927e7a0c30c64d6cbd to your computer and use it in GitHub Desktop.
Gulp V4 - RollUp - Babel - Stylus - Pug
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)
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment