static-cms/website/gulpfile.babel.js
Caleb 347fa403c4 Use scaled avatars for website contributors.
Right now we are using full size contributor avatars on the website,
which really slows down the loading. This PR allows us to use avatars
scaled down to the size that we are actually using.
2018-01-27 11:47:08 -07:00

134 lines
3.6 KiB
JavaScript
Executable File

import gulp from "gulp";
import cp from "child_process";
import hugoBin from "hugo-bin";
import gutil from "gulp-util";
import postcss from "gulp-postcss";
import transform from "gulp-transform";
import yaml from "yamljs";
import rename from "gulp-rename";
import cssImport from "postcss-import";
import neatgrid from "postcss-neat";
import nestedcss from "postcss-nested";
import colorfunctions from "postcss-colour-functions";
import hdBackgrounds from "postcss-at2x";
import cssvars from "postcss-simple-vars-async";
import cssextend from "postcss-simple-extend";
import styleVariables from "./config/variables";
import BrowserSync from "browser-sync";
import webpack from "webpack";
import webpackConfig from "./webpack.conf";
import url from "url";
const browserSync = BrowserSync.create();
const defaultArgs = ["-d", "../dist", "-s", "site", "-v"];
function buildSite(cb, options) {
const args = options ? defaultArgs.concat(options) : defaultArgs;
return cp.spawn(hugoBin, args, { stdio: "inherit" }).on("close", code => {
if (code === 0) {
browserSync.reload();
cb();
} else {
browserSync.notify("Hugo build failed :(");
cb("Hugo build failed");
}
});
}
gulp.task("hugo", ["copy"], cb => buildSite(cb));
gulp.task("hugo-preview", ["copy"], cb =>
buildSite(cb, ["--buildDrafts", "--buildFuture"])
);
gulp.task("build", ["css", "js", "fonts", "images", "hugo"]);
gulp.task("build-preview", ["css", "js", "fonts", "images", "hugo-preview"]);
gulp.task("css", () =>
gulp
.src("./src/css/**/*.css")
.pipe(
postcss([
cssImport({ from: "./src/css/main.css" }),
neatgrid(),
nestedcss(),
colorfunctions(),
hdBackgrounds(),
cssextend(),
cssvars({ variables: styleVariables })
])
)
.pipe(gulp.dest("./dist/css"))
.pipe(browserSync.stream())
);
gulp.task("js", cb => {
const myConfig = Object.assign({}, webpackConfig);
webpack(myConfig, (err, stats) => {
if (err) throw new gutil.PluginError("webpack", err);
gutil.log(
"[webpack]",
stats.toString({
colors: true,
progress: true
})
);
browserSync.reload();
cb();
});
});
gulp.task("fonts", () =>
gulp
.src("./src/fonts/**/*")
.pipe(gulp.dest("./dist/fonts"))
.pipe(browserSync.stream())
);
gulp.task("images", () =>
gulp
.src("./src/img/**/*")
.pipe(gulp.dest("./dist/img"))
.pipe(browserSync.stream())
);
gulp.task("copy", () =>
gulp
.src("../.all-contributorsrc")
.pipe(
transform(
"utf8",
content =>
new Promise((resolve, reject) => {
const contributors = JSON.parse(content).contributors.map(c => {
const avatar = url.parse(c['avatar_url'], true);
avatar.search = undefined; // Override so that we can use `avatar.query`.
if (avatar.hostname.endsWith('githubusercontent.com')) {
// Use 32px avatars, instead of full-size.
avatar.query['s'] = '32';
}
const avatar_url = url.format(avatar);
return Object.assign({}, c, { avatar_url });
});
resolve(yaml.dump({ contributors }));
})
)
)
.pipe(rename("contributors.yml"))
.pipe(gulp.dest("./site/data"))
);
gulp.task("server", ["css", "js", "fonts", "images", "hugo"], () => {
browserSync.init({
server: {
baseDir: "./dist"
},
notify: false
});
gulp.watch("./src/js/**/*.js", ["js"]);
gulp.watch("./src/css/**/*.css", ["css"]);
gulp.watch("./src/img/**/*", ["images"]);
gulp.watch("./src/fonts/**/*", ["fonts"]);
gulp.watch("./site/**/*", ["hugo"]);
});