Simple Gulpjs taskrunner configuration for pug and scss integration into a project

gulp.project.gist.md

Add Gulpjs to a Project

npm install --save-dev gulp gulp-pug gulp-sass gulp-sourcemaps gulp-autoprefixer browser-sync

gulpfile.babel.js

Here is a sample gulpfile for composing static webpages using pug and scss.

// gulp views
// gulp sass
// gulp serve

import gulp from "gulp";
import pug from "gulp-pug";
import sass from "gulp-sass";
import sourcemaps from "gulp-sourcemaps";
import autoprefixer from "gulp-autoprefixer";
import browserSync from "browser-sync";

const paths = {
  styles: {
    src: "./src/styles/**/*.scss",
    dest: "public/styles/"
  },
  views: {
    src: "./src/templates/*.pug",
    dest: "public"
  }
};

gulp.task("views", function() {
  return gulp
    .src(paths.views.src)
    .pipe(
      pug({
        doctype: "html",
        pretty: true
      })
    )
    .pipe(gulp.dest("./public"))
    .pipe(browserSync.reload({ stream: true }));
});

gulp.task("watch", ["views", "sass"], function() {
  gulp.watch("./src/styles/**/*.scss", ["sass"]);
  gulp.watch("./src/templates/*.pug", ["views"]);
});

var sassOptions = {
  errLogToConsole: true,
  outputStyle: "expanded"
};

gulp.task("sass", function() {
  return gulp
    .src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on("error", sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer())
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(browserSync.reload({stream: true}))
});

gulp.task("serve", ['sass', 'views', 'watch'],() => {
  browserSync.init({
    server: {
      baseDir: "./public"
    }
  })

});

Project File Structure

.
|____.editorconfig
|____bower.json
|____dist
|____Dockerfile
|____etc
|____gulpfile.babel.js
| |____styles
|____README-DockerCommands.md
|____src
| |____assets
| |____components
| | |____pages
| | | |____Header.js
| |____index.html
| |____index.js
| |____scripts
| |____styles
| | |____includes
| | | |_____normalize.scss
| | |____navigation.scss
| | |____style.scss
| |____templates
| | |____index.pug
| | |____mixins
| | | |_____mixins.pug
| | | |_____nav.pug
| | |____navigation.pug
|____webpack.config.js