Gulp static compiler

bower.json

{
  "name": "gulp-static-compiler",
  "description": "A static gulp compiler",
  "main": "gulpfile.js",
  "authors": [
    "Sebastian Kessler <[email protected]>"
  ],
  "license": "ISC",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "include-media": "*",
    "include-media-export": "*",
    "normalize-scss": "normalize.scss#^6.0.0",
    "isotope": "^3.0.3",
    "imagesloaded": "^4.1.1",
    "mustache.js": "mustache#^2.3.0",
    "jquery": "^3.2.1"
  }
}

Gulpfile.js

'use strict';

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var sass = require('gulp-sass');
var include = require('gulp-include');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var sourcemaps = require('gulp-sourcemaps');
var data = require('gulp-data');
var uglify = require('gulp-uglify');
var pug = require('gulp-pug');
var fs = require('fs');
var pngquant = require('gulp-pngquant');
var imagemin = require('gulp-imagemin');
var git = require('gulp-git');
var runSequence = require('run-sequence');
var critical = require('critical').stream;

var bowerPath = 'bower_components/';
var npmPath = 'node_modules/';
var paths = {
    scripts: './src/scripts/**/*.js',
    sass: './src/sass/**/*.sass',
    views: './src/views/**/*.pug',
    images: './src/images/**/**/*.*'
};

var jsFiles = [
    bowerPath + 'jquery/dist/jquery.min.js',
    bowerPath + 'include-media-export/dist/include-media-1.0.1.min.js',
    bowerPath + 'isotope/dist/isotope.pkgd.min.js',
    bowerPath + 'imagesloaded/imagesloaded.pkgd.min.js',
    bowerPath + 'mustache.js/mustache.min.js',
    npmPath + 'fontfaceobserver/fontfaceobserver.js',
    './src/scripts/app.js'
];

var fontFiles = [
    'src/fonts/**/*.*'
];

// --------------------------------------
// Browser Sync Task ----------
// --------------------------------------

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./dist"
        }
    });
});

// --------------------------------------
// JS Task ----------
// --------------------------------------

gulp.task('js', function() {
    return gulp
        .src(jsFiles)
        .pipe(sourcemaps.init())
        .pipe(include())
        .pipe(concat('app.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist/js'))
        .pipe(browserSync.stream());
});

gulp.task('js-build', function() {
    return gulp
        .src(jsFiles)
        .pipe(include())
        .pipe(uglify())
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./build/js'));
});

// --------------------------------------
// CSS Task ----------
// --------------------------------------

gulp.task('sass', function() {
    var processors = [
        autoprefixer({ browsers: ['last 1 version'] })
    ];
    return gulp.src('./src/sass/**/*.sass')
        .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths: [
                bowerPath + 'normalize-scss/fork-versions/default',
                bowerPath + 'include-media-export/dist',
                bowerPath + 'include-media/dist'
            ]
        }).on('error', sass.logError))
        .pipe(gulp.dest('./dist/css'))
        .pipe(postcss(processors))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist/css'))
        .pipe(reload({
            stream: true,
        }));
});

gulp.task('sass-build', function() {
    var processors = [
        autoprefixer({ browsers: ['last 1 version'] }),
        cssnano({
          discardComments: {
            removeAll: true
          }
        })
    ];
    return gulp.src('./src/sass/**/*.sass')
        .pipe(sass({
            includePaths: [
                bowerPath + 'normalize-scss/fork-versions/default',
                bowerPath + 'include-media-export/dist',
                bowerPath + 'include-media/dist'
            ]
        }).on('error', sass.logError))
        .pipe(gulp.dest('./dist/css'))
        .pipe(postcss(processors))
        .pipe(gulp.dest('./build/css'));
});

// --------------------------------------
// HTML Task ----------
// --------------------------------------

gulp.task('views', function() {
  return gulp.src('./src/views/index.pug')
  .pipe(data(function(file) {
    var gridItems = require('./src/data/grid.json');
    var generalData = require('./src/data/data.json');
    var data = Object.assign(gridItems, generalData);
    return data;
  }))
  .pipe(pug({
    pretty: true
  }))
  .pipe(gulp.dest('./dist'))
  .pipe(reload({
      stream: true,
  }));
});

gulp.task('views-build', function() {
  return gulp.src('./src/views/index.pug')
  .pipe(data(function(file) {
    var gridItems = require('./src/data/grid.json');
    var generalData = require('./src/data/data.json');
    var data = Object.assign(gridItems, generalData);
    return data;
  }))
  .pipe(pug())
  .pipe(gulp.dest('./build'));
});

// --------------------------------------
// Watch Task ----------
// --------------------------------------

gulp.task('watch', function() {
    gulp.watch(paths.sass, ['sass']);
    gulp.watch(paths.scripts, ['js']);
    gulp.watch(paths.views, ['views']);
    gulp.watch(paths.images, ['images']);
});

// --------------------------------------
// Fonts Task ----------
// --------------------------------------

gulp.task('fonts', function() {
    return gulp.src(fontFiles)
        .pipe(gulp.dest('./dist/fonts'));
});

gulp.task('fonts-build', function() {
    return gulp.src(fontFiles)
        .pipe(gulp.dest('./build/fonts'));
});

// --------------------------------------
// Images Task ----------
// --------------------------------------

gulp.task('images', function() {
    return gulp.src(paths.images)
    .pipe(gulp.dest('./dist/images'));
});

gulp.task('images-build', function() {
    return gulp.src(paths.images)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{
                removeViewBox: false,
              },],
            use: [pngquant()],
          }))
        .pipe(gulp.dest('./build/images'));
});

// --------------------------------------
// Dev & Prod Task ----------
// --------------------------------------

gulp.task('default', ['watch', 'browser-sync', 'sass', 'js', 'fonts', 'images', 'views']);

gulp.task('build', ['sass-build', 'js-build', 'fonts-build', 'views-build', 'images-build'], function(){
    return gulp.src('./build/**/*.*')
        .pipe(gulp.dest('../../htdocs/'));

})

// --------------------------------------
// Test Auto Commit Task ----------
// --------------------------------------

gulp.task('build-commit', ['build'], function(){
  runSequence('critical', 'add', 'commit', 'pull', 'push');
});

// --------------------------------------
// Git Tasks ----------
// --------------------------------------

gulp.task('add', function() {
  return gulp.src('../../htdocs/**/*.*')
    .pipe(git.add());
});

gulp.task('commit', function() {
  return gulp.src('../../htdocs/**/*.*')
    .pipe(git.commit('update build'));
});

gulp.task('pull', function(){
  git.pull('origin', 'develop', function (err) {
    if (err) throw err;
  });
});

gulp.task('push', function(){
  git.push('origin', 'develop', function (err) {
    if (err) throw err;
  });
});

// --------------------------------------
// Critical Task ----------
// --------------------------------------

gulp.task('critical', function () {
    return gulp.src('../../htdocs/*.html')
        .pipe(critical({base: '../../htdocs/', inline: true, minify: true, css: ['../../htdocs/css/app.css']}))
        .on('error', function(err) { gutil.log(gutil.colors.red(err.message)); })
        .pipe(gulp.dest('../../htdocs'));
});

package.json

{
  "name": "gulp-static-compiler",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sebastian Kessler <[email protected]>",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "*",
    "browser-sync": "*",
    "critical": "^0.8.4",
    "cssnano": "*",
    "fontfaceobserver": "*",
    "fs": "*",
    "gulp": "*",
    "gulp-concat": "*",
    "gulp-data": "*",
    "gulp-git": "*",
    "gulp-include": "*",
    "gulp-postcss": "*",
    "gulp-pug": "*",
    "gulp-sass": "*",
    "gulp-sourcemaps": "*",
    "gulp-uglify": "*",
    "gulp-util": "*",
    "jstransformer-uglify-js": "*",
    "run-sequence": "*",
    "tiny-lr": "*"
  },
  "devDependencies": {
    "gulp-imagemin": "^3.2.0",
    "gulp-pngquant": "^1.0.10"
  }
}