Migrate from bower to npm (#8209)

* Migrate from bower to npm

This change migrates from the use of bower (deprecated) to npm for dependencies.

We also update Bootstrap to 4.3

Several packages do not exist in NPM so they are copied into the static directory for the theme

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

* Add gulp for build

* Create gulp task for building scss and js

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

* Update with docs on gulp task

Author: mattstratton

gulp/tasks/dev/dev.js

@@ -0,0 +1,11 @@
+var gulp = require('gulp');
+var HubRegistry = require('gulp-hub');
+
+
+
+// load some files into the registry
+var hub = new HubRegistry(['tasks/dev/*.js']);
+
+// tell gulp to use the tasks just loaded
+gulp.registry(hub);
+gulp.task('dev', gulp.series('js-concat', 'sass'))

gulp/tasks/dev/javascript.js

@@ -0,0 +1,27 @@
+var gulp = require('gulp'),
+    concat = require('gulp-concat'),
+    rename = require('gulp-rename'),
+    uglify = require('gulp-uglify');
+    sourcemaps = require('gulp-sourcemaps');
+
+var scripts = [
+    'node_modules/jquery/dist/jquery.js',
+    'node_modules/tether/dist/js/tether.js',
+    'node_modules/bootstrap/dist/js/bootstrap.js',
+    'themes/devopsdays-theme/static/components/jquery-oembed-all/jquery.oembed.js',
+    'themes/devopsdays-theme/static/components/bootstrap-sortable/Scripts/bootstrap-sortable.js',
+    'node_modules/moment/moment.js',
+    'node_modules/jssocials/dist/jssocials.js',
+    'themes/devopsdays-theme/static/js/devopsdays.js'
+]
+
+gulp.task('js-concat', function(){
+    return gulp.src(scripts)
+        .pipe(sourcemaps.init())
+        .pipe(concat('concat.js'))
+        // .pipe(gulp.dest('dist'))
+        .pipe(rename('devopsdays-min.js'))
+        .pipe(uglify({ keep_fnames: true }))
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest('themes/devopsdays-theme/static/js'));
+});

gulp/tasks/dev/sass.js

@@ -0,0 +1,13 @@
+var gulp = require('gulp'),
+  sass = require('gulp-sass'),
+  sourcemaps = require('gulp-sourcemaps');
+
+sass.compiler = require('node-sass');
+
+gulp.task('sass', function () {
+    return gulp.src('themes/devopsdays-theme/static/scss/site.scss')
+        .pipe(sourcemaps.init())
+        .pipe(sass().on('error', sass.logError))
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest('themes/devopsdays-theme/static/css'));
+  });

gulpfile.js

@@ -1,4 +1,4 @@
 var requireDir = require('require-dir');
 
 // Require all tasks in gulp/tasks, including subfolders
-requireDir('./gulp/tasks', { recurse: true });
+requireDir('./gulp/tasks', { recurse: true });

package-lock.json

@@ -20,24 +20,32 @@
     "del": "~5.1.0",
     "gulp": "~4.0.0",
     "gulp-cache": "~1.1.0",
-    "gulp-concat": "~2.6.1",
+    "gulp-concat": "^2.6.1",
     "gulp-htmlmin": "~5.0.1",
     "gulp-hub": "~4.2.0",
     "gulp-imagemin": "6.1.0",
     "gulp-img-retina": "0.0.4",
-    "gulp-rename": "~1.4.0",
+    "gulp-rename": "^1.4.0",
     "gulp-responsive": "~2.11.0",
     "gulp-rev": "~9.0.0",
     "gulp-rev-replace": "~0.4.4",
-    "gulp-sass": "~4.0.2",
-    "gulp-sourcemaps": "~2.6.4",
-    "gulp-uglify": "~3.0.1",
+    "gulp-sass": "^4.0.2",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-uglify": "^3.0.2",
     "gulp-useref": "~3.1.6",
     "gulp-util": "~3.0.8",
     "gulp-watch": "~5.0.1",
+    "node-sass": "^4.12.0",
     "require-dir": "~1.2.0"
   },
   "dependencies": {
-    "netlify-cli": "^2.11.10"
+    "netlify-cli": "^2.11.10",
+    "bootstrap": "^4.3.1",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.4.1",
+    "jssocials": "^1.5.0",
+    "moment": "^2.24.0",
+    "popper.js": "^1.15.0",
+    "tether": "^1.4.7"
   }
 }

package.json

@@ -31,21 +31,13 @@ The technical details on how to set up your local development environment for ma
 
 ## Dev Setup
 
-Working with a Hugo theme outside of a content-based repo has a few challenges. The `devopsdays-theme` repo contains a directory called `exampleSite`, which is what is used for testing theme development. The `config.toml` for the `exampleSite` contains the following value:
+One of the more important things to know is that if you are going to make changes to CSS or JavaScript, you will need to be able to run the scripts that compile the SCSS files to CSS, and also concatenate and minifiy the JavaScript we use. In order to do this, you need the following installed on your local machine:
 
-```
-themesdir = "../.."
-```
-
-This tells Hugo where to look for its theme directories.
-
-You will need to run your watch command from the `exampleSite` directory; use something like this:
-
-```
-hugo server -w --baseUrl="http://localhost:1313"
-```
+- [node](https://nodejs.org/en/)
+- [npm](https://www.npmjs.com/get-npm)
+- [gulp](https://gulpjs.com/)
 
-NOTE: If you also load the existing `devopsdays-web` project, it is highly suggested that you use the `-p` flag on `hugo server` to load this theme on a different port. This will prevent your browser from caching assets like stylesheets, etc, from the other instance.
+Once you have these install, navigate to the root of `devopsdays-web` in a terminal, and run `npm install` to get all the pieces installed into `devopsdays-web`. The `node_modules` directory is not committed to source control, so you will have to run `npm install` any time you are setting up a new copy of the repo on a workstation.
 
 ## How can I help?
 
@@ -55,7 +47,7 @@ Sort the existing GitHub issues for the tag of `ready`. These are issues that ca
 
 ### Frameworks
 
-We use [Boostrap v4 Alpha](http://v4-alpha.getbootstrap.com/) as our basic framework.
+We use [Boostrap v4.3](https://getbootstrap.com/docs/4.3/getting-started/introduction/) as our basic framework.
 
 ### Blocks
 All page templates should make use of the `layouts/_default/baseof.html` file. This file contains all wrappers for the content. Anything within the `{{- block "main" . }} {{- end -}}` section is what will be displayed on a sub-template. Include a `{{ define "main" }}` block in your template to include what should be rendered.
@@ -81,28 +73,29 @@ The `devopsdays-theme` repo has hooks into Travis, Appveyor, and Netlify. Curren
 All changes are built by Netlify to https://dev.devopsdays.org once merged to master.
 
 ### Asset Pipeline
-Peruse the `gulpfile.js` to see what is processed for the asset pipeline. Gulp is only called when changes are merged to master. Pull requests, and local changes will not trigger gulp.
-
-If you are manipulating JavaScript or SCSS files, please be sure to use Gulp. If you run `gulp dev` inside the repo, it will build the CSS and JS files, and also start a `watch` task for you.
+If you make changes to SCSS files, or the `themes/devopsdays-theme/static/js/devopsdays.js` file, you will need to run a `gulp` task to compile the SCSS to CSS and to concatenate and minify the Javascript files.
 
-If you need help with this, ask @mattstratton.
-
-## Workflow
+To run this, navigate to the root of `devopsdays-web` in your terminal, and run `gulp dev`. If you get errors, you likely don't have `node`, `npm`, and/or `gulp` installed. You also may not have run `npm install`.
 
-Our workflow is inspired by [Ian Bickering's guide to using GitHub Issues](http://www.ianbicking.org/blog/2014/03/use-github-issues-to-organize-a-project.html).
+The output of `gulp dev` should look something like this:
 
-### Milestones
-
-**Stuff we are doing right now:** this is the “main” milestone. We give it a minor SemVer name (like 1.2 or 2.3). We create a new milestone when we have released a new minor version.
-
-**Stuff we’ll probably do soon:** this is the standing [“Next Tasks” milestone](https://github.com/devopsdays/devopsdays-theme/milestone/4). We never change or rename this milestone.
-
-**Stuff we probably won’t do soon:** this is the standing [“Blue Sky” milestone](https://github.com/devopsdays/devopsdays-theme/milestone/3). We refer to these tickets and sometimes look through them, but they are easy to ignore, somewhat intentionally ignored.
-
-**What aren’t we sure about?:** issues with no milestone.
+```
+[12:31:47] Using gulpfile ~/src/github.com/devopsdays/devopsdays-web/gulpfile.js
+[12:31:47] Starting 'dev'...
+[12:31:47] Starting 'js-concat'...
+[12:31:50] Finished 'js-concat' after 3.51 s
+[12:31:50] Starting 'sass'...
+[12:31:51] Finished 'sass' after 652 ms
+[12:31:51] Finished 'dev' after 4.16 s
+```
 
-There should be no other milestones; issues that are logged as `bug` or `enhancement` will be prioritized into the milestone when we are ready to work on them. Only issues with the tag of `ready` should be worked on.
+After running, you should see updates to the following files in `themes/devopsdays-theme/static`:
+- `css/site.css`
+- `css/site.css.map`
+- `js/devopsdays-min.js`
+- `js/devopsdays-min.js.map`
 
+## Workflow
 
 ### Issues
 
@@ -134,7 +127,3 @@ These are the labels we use, and what they mean:
 ### Pull Requests
 
 Please submit your proposed changes as a Pull Request against this repository. If the PR will resolve an issue, please add `Fixes #123` to the PR.
-
-## Releasing
-
-See [utils/README](https://github.com/devopsdays/devopsdays-theme/blob/master/utils/README.md) for instructions.