gulpfile.babel.js

/*eslint-env node */

"use strict";

import gulp from "gulp";
import gulpLoadPlugins from "gulp-load-plugins";
import browserSync from "browser-sync";
import runSequence from "run-sequence";
import del from "del";

const plugins = gulpLoadPlugins();

// SASS
gulp.task("sass", () => {
  return gulp.src("src/scss/*.scss")
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.sass())
    .pipe(plugins.sourcemaps.write({includeContent: false}))
    .pipe(plugins.sourcemaps.init({loadMaps: true})) // Load sourcemaps generated by sass
    .pipe(plugins.autoprefixer({browsers: ["last 2 versions"]}))
    .on("error", plugins.util.log)
    .pipe(plugins.sourcemaps.write("."))
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream())
    .on("error", plugins.util.log);
});

// CSS
gulp.task("css", () => {
  return gulp.src("src/css/*.css")
    .pipe(plugins.csso())
    .pipe(gulp.dest("dist/css"))
    .on("error", plugins.util.log);
});

gulp.task("images", () => {
  return gulp.src("src/images/**/*")
    .pipe(plugins.cache(plugins.imagemin({
      progressive: true,
      interlaced: true,
      // don"t remove IDs from SVGs, they are often used
      // as hooks for embedding and styling
      svgoPlugins: [{cleanupIDs: false}]
    })))
    .pipe(gulp.dest("dist/images"));
});

gulp.task("lint", () => {
  return gulp.src(["src/js/**/*.js"])
    .pipe(plugins.cached("js")) //Process only changed files
    .pipe(plugins.eslint())
    .pipe(plugins.eslint.format())
    .pipe(plugins.eslint.failOnError());
});

// BrowserSync Server
gulp.task("serve", ["sass", "lint"], () => {
  browserSync.init([
    "src/js/**/*.js",
    "src/**/*.html"
  ], {
    notify: false,
    server: {
      baseDir: ["src"]
    },
    port: 3000,
    browser: [],
    tunnel: false
  });

  gulp.watch("src/scss/**/*.scss", ["sass"]);
  gulp.watch("src/js/**/*.js", ["lint"]);
});

// Default
gulp.task("default", ["serve"]);

// Copy files to "dist"
gulp.task("files", () => {
  return gulp.src(["src/*.*", "CNAME"], {dot: true}).pipe(gulp.dest("dist"));
});

// Delete dist Directory
gulp.task("clean", del.bind(null, ["dist"]));

gulp.task("jspm", () => {
  return gulp.src("src/jspm_packages/**/*").pipe(gulp.dest("dist/jspm_packages"));
});

gulp.task("js", ["lint"], () => {
  return gulp.src("src/js/**/*.js").pipe(gulp.dest("dist/js"));
});

// Bundle with jspm
gulp.task("bundle", ["js", "jspm"], plugins.shell.task([
  "cd dist; jspm bundle js/main app.js"
]));

gulp.task("html", () => {
  var opts = {
    conditionals: true
  };
  return gulp.src("src/**/*.html")
    .pipe(plugins.minifyHtml(opts))
    .pipe(gulp.dest("dist"));
});

// Uglify the bundle
gulp.task("uglify", () => {
  return gulp.src("dist/app.js")
    .pipe(plugins.sourcemaps.init({
      loadMaps: true
    }))
    .pipe(plugins.uglify())
    .pipe(plugins.sourcemaps.write("."))
    .pipe(gulp.dest("dist"))
    .on("error", plugins.util.log);
});

gulp.task("gzip", () => {
  return gulp.src("dist/**/*").pipe(plugins.size({title: "build", gzip: true}));
});

gulp.task("build", () => {
  runSequence(
    "clean",
    "files",
    "sass",
    ["css", "images", "html", "bundle"],
    "uglify",
    "gzip"
  )
});