Implement better directory structure for pug

gulpfile.js

@@ -50,7 +50,7 @@ gulp.task('html', () => {
 });
 
 gulp.task('pug', () => {
-  return gulp.src([ src_folder + '**/*.pug' ], { base: src_folder })
+  return gulp.src([ src_folder + 'pug/**/!(_)*.pug' ], { base: src_folder + 'pug' })
     .pipe(plumber())
     .pipe(pug())
     .pipe(gulp.dest(dist_folder))
@@ -139,7 +139,7 @@ gulp.task('watch', () => {
 
   const watch = [
     src_folder + '**/*.html',
-    src_folder + '**/*.pug',
+    src_folder + 'pug/**/*.pug',
     src_assets_folder + 'sass/**/*.sass',
     src_assets_folder + 'scss/**/*.scss',
     src_assets_folder + 'js/**/*.js'

src/pug/_includes.pug

@@ -0,0 +1 @@
+include helpers/_mixins

src/pug/index.pug

@@ -0,0 +1,9 @@
+extends templates/_default
+
+block content
+  h1.title Gulp Starter Kit
+
+  p.description
+    strong A simple Gulp 4 Starter Kit for modern web development.
+
+  img.image(src="/assets/images/sample.jpg" alt="")

src/pug/templates/_default.pug

@@ -0,0 +1,8 @@
+include ../_includes
+
+include partials/_head
+
+body
+  block content
+
+  include partials/_foot

src/pug/templates/partials/_foot.pug

@@ -0,0 +1,2 @@
+link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300")
+script(async src="/assets/js/all.js")

src/pug/templates/partials/_head.pug

@@ -0,0 +1,8 @@
+doctype html
+html(lang="en")
+  head
+    meta(charset="UTF-8")
+    meta(name="viewport" content="width=device-width, initial-scale=1.0")
+    meta(http-equiv="X-UA-Compatible" content="ie=edge")
+    title Gulp Starter Kit
+    link(rel="stylesheet" href="/assets/css/pages/index.css")