Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Gulpfile using Stylus, Pug, Browsersync, and Browserify.

Directory Template

๐Ÿ“ src
  ๐Ÿ“ assets
    ๐Ÿ“ images
    ๐Ÿ“ videos
  ๐Ÿ“ js
  ๐Ÿ“ pug
    ๐Ÿ“ templates
  ๐Ÿ“ styl
mkdir src/ src/assets/ src/assets/images/ src/assets/videos/ src/js/ src/pug/ src/pug/templates/ src/styl/ ;
echo 'h1(style="font-family: sans-serif") Hello world!' > src/index.pug ;
curl -o gulpfile.js ;
yarn add gulp gulp-stylus gulp-pug browser-sync browserify vinyl-source-stream ;
gulp ;
// Uses the Gulp build system
var gulp = require('gulp')
// Transforms .styl files into .css
var styl = require('gulp-stylus')
// Transforms .pug files into .html
var pug = require('gulp-pug')
// Creates browser-sync server with the name of the directory
var bs = require('browser-sync').create(__dirname.split('/').pop())
// Bundles node.js requires for use in the browser
var browserify = require('browserify')
// Allows us to use browserify in Gulp
var source = require('vinyl-source-stream')
var src = {
html: './src/**/*.html',
pug: './src/**/*.pug',
styl: './src/styl/**/*.styl',
js: './src/js/**/!(main)*.js',
mainjs: './src/js/main.js',
assets: './src/assets/**/*',
server: './src'
var app = {
html: './app/**/*.html',
htmlDir: './app/',
cssDir: './app/css/',
js: './app/js/**/!(main)*.js',
mainjs: './src/js/main.js',
jsDir: './app/js/',
assetsDir: './app/assets/',
server: './app'
var handleError = function (e) {
gulp.task('default', ['styl', 'pug', 'browserify', 'js', 'assets'], () => {
server: app.server,
https: true
}), ['styl']), ['pug']), ['browserify', () => { bs.reload() }]), ['js', () => { bs.reload() }]), ['assets'])'change', bs.reload)
gulp.task('styl', () => {
return gulp.src(src.styl)
.pipe(styl({outputStyle: 'expanded'}))
.on('error', handleError)
gulp.task('pug', () => {
return gulp.src(src.pug)
.pipe(pug({pretty: true}))
.on('error', handleError)
gulp.task('browserify', () => {
return browserify(src.mainjs)
.on('error', handleError)
gulp.task('js', () => {
return gulp.src(src.js)
gulp.task('assets', () => {
return gulp.src(src.assets)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You canโ€™t perform that action at this time.