Gulp workflow#11 (#88)

* Change value of canonify URLs to false

This was needed for some gulp stuff.
We’ll have to see if it breaks other things.

Signed-off-by: Matt Stratton <[email protected]>

* Move gulp files to root of theme project

This might be weird later, but it makes sense for now.

Signed-off-by: Matt Stratton <[email protected]>

* Remove useless debug from 2016-chicago

Signed-off-by: Matt Stratton <[email protected]>

* Add dist and staging build directories to .gitignore for exampleSite

Signed-off-by: Matt Stratton <[email protected]>

* Add netlify build stuff

Signed-off-by: Matt Stratton <[email protected]>

* Create all the gulp things

Signed-off-by: Matt Stratton <[email protected]>

* Fix netlify base file

Signed-off-by: Matt Stratton <[email protected]>

bin/netlify-production.sh

@@ -0,0 +1,5 @@
+ln -s /opt/build/repo /opt/build/devopsdays-theme
+cd exampleSite
+../bin/hugo version
+../bin/hugo -v --theme=devopsdays-theme --buildDrafts=false --baseURL="/"
+gulp --cwd .

exampleSite/.gitignore

@@ -1,2 +1,4 @@
 public/
 themes
+dist/
+staging/

exampleSite/config.toml

@@ -5,7 +5,7 @@ themesdir = "../.."
 languageCode = "en-us"
 GoogleAnalytics = "UA-9713393-1"
 title = "DevOpsDays"
-canonifyurls = true
+canonifyurls = false
 dataDir = "data"
 archetypedir = "archetypes"
 PaginatePath = "blog"

gulpfile.js

@@ -0,0 +1,66 @@
+var gulp = require('gulp'),
+    useref = require('gulp-useref'),
+    gulpif = require('gulp-if'),
+    uglify = require('gulp-uglify'),
+    minifyCss = require('gulp-clean-css');
+    rev = require('gulp-rev');
+    revReplace = require('gulp-rev-replace');
+    htmlmin = require('gulp-htmlmin');
+    imagemin = require('gulp-imagemin');
+    cache = require('gulp-cache');
+    runSequence = require('run-sequence');
+
+gulp.task('useref', function(){
+  return gulp.src('public/**/*.html')
+      .pipe(useref({ searchPath: ['public/css', 'public/font-awesome'] }))
+      .pipe(gulpif('*.js', uglify()))
+      .pipe(gulpif('*.css', minifyCss()))
+      .pipe(gulpif('*.html', htmlmin({collapseWhitespace: true})))
+      .pipe(gulp.dest('staging'));
+});
+
+// The process-images task took about 6 minutes for just sponsors; for now we probably
+// will just copy the images and not optimize them
+
+gulp.task('process-images', function(){
+  return gulp.src('public/**/*.+(png|jpg|gif|svg)')
+  .pipe(cache(imagemin()))
+  .pipe(gulp.dest('staging'))
+});
+
+gulp.task('copy-images', function(){
+  return gulp.src('public/**/*.+(png|jpg|gif|svg)')
+  .pipe(gulp.dest('staging'))
+});
+
+gulp.task('process-files', function(){
+  return gulp.src(['staging/**/*.+(png|jpg|gif|svg|js|css)','!staging/favicon*', '!staging/apple-icon*', '!staging/android-icon*', '!staging/ms-icon*'])
+  .pipe(rev())
+  .pipe(gulp.dest('dist'))
+  .pipe(rev.manifest())
+  .pipe(gulp.dest('dist'))
+});
+
+gulp.task('update-files', function(){
+  var manifest = gulp.src('dist/rev-manifest.json');
+
+  return gulp.src(['staging/**/*.html', 'staging/**/*.xml', 'staging/**/*.css'])
+      .pipe(revReplace({manifest: manifest, replaceInExtensions: ['.html', '.xml', '.css']}))
+      .pipe(gulp.dest('dist'));
+});
+
+gulp.task('copy-other-files', function(){
+  return gulp.src(['public/sitemap.xml', 'public/tags/**/*.xml'])
+  .pipe(gulp.dest('dist'));
+});
+
+gulp.task('copy-icons', function(){
+  return gulp.src(['staging/favicon*', 'staging/apple-icon*', 'staging/android-icon*', 'staging/ms-icon*', 'manifest.json', 'browserconfig.xml'])
+  .pipe(gulp.dest('dist'));
+});
+
+gulp.task('default', function (callback) {
+  runSequence('useref', 'copy-images', 'process-files', 'update-files', 'copy-other-files', 'copy-icons',
+    callback
+  )
+})

layouts/partials/footer_scripts.html

@@ -1,5 +1,7 @@
+{{ "<!-- build:js /js/main.min.js -->" | safeHTML }}
 <script src="/js/jquery.min.js"></script>
 <script src="/js/bootstrap.min.js"></script>
 <script src="/js/jquery.oembed.js"></script>
 <script src="/js/jquery-ui.js"></script>
 <script src="/js/devopsdays.js"></script>
+{{ "<!-- endbuild -->" | safeHTML }}

layouts/partials/head_includes.html

@@ -1,8 +1,10 @@
-<link href="/css/bootstrap.css" rel="stylesheet">
-<link href="/css/site.css" rel="stylesheet">
-<!-- Fonts -->
 <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,300i,400,700,900" rel="stylesheet">
+{{ "<!-- build:css /css/main.min.css -->" | safeHTML }}
+<link href="bootstrap.css" rel="stylesheet">
+<link href="site.css" rel="stylesheet">
+<!-- Fonts -->
 <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 <!-- jquery fancy pants -->
-<link href="/css/jquery.oembed.css" rel="stylesheet">
+<link href="jquery.oembed.css" rel="stylesheet">
 <link rel="stylesheet" href="/css/jquery-ui.css">
+{{ "<!-- endbuild -->" | safeHTML }}

netlify.toml

@@ -0,0 +1,16 @@
+# Global settings applied to the whole site.
+[build]
+  publish = "exampleSite/public/"
+  command = "bin/netlify.sh"
+
+# Production context: All deploys to the main
+# repository branch will inherit these settings.
+[context.production]
+  command = "bin/netlify-production.sh"
+  publish = "exampleSite/dist"
+
+# Deploy Preview context: All Deploy Previews
+# will inherit these settings.
+[context.deploy-preview]
+  publish = "exampleSite/public/"
+  command = "bin/netlify.sh"

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "devopsdays-examplesite",
+  "version": "1.0.0",
+  "description": "This is the example site for DevOpsDays.org",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Matt Stratton",
+  "license": "MIT",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-cache": "^0.4.5",
+    "gulp-changed": "^1.3.2",
+    "gulp-clean-css": "^2.3.2",
+    "gulp-htmlmin": "^3.0.0",
+    "gulp-if": "^2.0.2",
+    "gulp-imagemin": "^3.1.1",
+    "gulp-rev": "^7.1.2",
+    "gulp-rev-replace": "^0.4.3",
+    "gulp-uglify": "^2.0.0",
+    "gulp-useref": "^3.1.2",
+    "run-sequence": "^1.2.2"
+  }
+}