gulpfile.js

/*
 * Copyright (c) 2016, Globo.com (https://github.com/globocom)
 *
 * License: MIT
 */

const gulp = require("gulp");
const gutil = require("gulp-util");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");
const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");
const webpackConfig = require("./webpack.config.js");

// The development server (the recommended option for development)
gulp.task("default", ["dev-server"]);

const host = "localhost";
const port = 8080;

// http://stackoverflow.com/questions/30225866/gulp-webpack-dev-server-callback-before-bundle-is-finished
const hookStream = function(stream, data, cb) {
  // Reference default write method
  const oldWrite = stream.write;

  // Clear hook function
  const clearHook = function() {
    stream.write = oldWrite;
  };

  // New stream write with our shiny function
  stream.write = function() {
    // Old behaviour
    oldWrite.apply(stream, arguments);
    // Hook
    if (arguments[0] === data) {
      clearHook();
      cb();
    }
  };
};

gulp.task("sass", function() {
  return gulp
    .src("./src/styles/**/*.scss")
    .pipe(sass.sync({ outputStyle: "expanded" }).on("error", sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest("./dist/css"));
});

gulp.task("sass-copy", function() {
  return gulp.src("./src/styles/**/*.scss").pipe(gulp.dest("./lib/styles"));
});

gulp.task("site-sass", function() {
  return gulp
    .src("./website/styles/*.scss")
    .pipe(sass.sync().on("error", sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest("./website/styles/"));
});

gulp.task("site-watch", function() {
  gulp.watch("./src/styles/**/*.scss", ["site-sass"]);
  gulp.watch("./website/styles/*.scss", ["site-sass"]);
});

gulp.task("dev-server", function(callback) {
  gulp.start("site-sass");
  gulp.start("site-watch");
  // Start a webpack-dev-server
  new WebpackDevServer(webpack(webpackConfig), {
    stats: {
      colors: true
    },
    contentBase: __dirname + "/website"
  }).listen(port, host, function(err) {
    hookStream(process.stdout, "webpack: bundle is now VALID.\n", function() {
      gutil.log(
        "[dev-server]",
        gutil.colors.yellow("http://" + host + ":" + port)
      );
    });

    if (err) {
      throw new gutil.PluginError("webpack-dev-server", err);
    }
  });
});