Furthering development of the Gulp build

README.md

@@ -33,34 +33,8 @@ files such as JS dependencies and fonts.
         sudo npm install -g yarn
         yarn
 
-3. Build the stylesheets:
+3. Install Gulp, the build system that we use:
 
-        npm run build-masonstrap
-
-    Head to `./public/assets/css` to find built masonstrap css files.
+        sudo npm install -g gulp-cli
 
 ## Local development
-
-You can dev on masonstrap either in Docker or on your local machine, whichever
-you prefer.
-
-### Docker
-
-Assuming you have Docker and Docker Compose installed:
-
-    docker-compose up
-
-Will run a process to rebuild masonstrap on any changes and spin up a dev server
-at [127.0.0.1:8000](http://127.0.0.1:8000)
-
-### Manual setup
-
-Spin up a process to watch for changes and rebuild masonstrap on the fly:
-
-    npm start
-
-Spin up a local web server to view the demo site:
-
-    npm run http
-
-Head to [127.0.0.1:8000](http://127.0.0.1:8000) to see the demo site!
\ No newline at end of file

gulpfile.js

 /*
   "scripts": {
     "copy-fonts": "cp -r ./node_modules/font-awesome/fonts/ ./public/assets/",
-    "copy-js": "cp ./node_modules/jquery/dist/jquery.min.js ./public/assets/js/jquery.min.js && cp ./node_modules/jquery/dist/jquery.min.map ./public/assets/js/jquery.min.map && cp ./node_modules/bootstrap/dist/js/bootstrap.min.js ./public/assets/js/bootstrap.min.js && cp ./node_modules/popper.js/dist/umd/popper.min.js ./public/assets/js/popper.min.js && cp ./node_modules/popper.js/dist/umd/popper.min.js.map ./public/assets/js/popper.min.js.map",
     "http": "http-server -r -p 8000",
     "dev": "npm-run-all --parallel build-masonstrap start http"
   },
@@ -15,12 +14,41 @@ const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
 const uglifycss = require('gulp-uglifycss');
 const rename = require("gulp-rename");
+const imagemin = require('gulp-imagemin');
+const merge = require('merge-stream');
 
 // Reusable directories
-const src = './src/'
-const dest = './dist/'
+const src = './src'
+const dest = './build'
 
-// Compile, autoprefix, minify scss
+// Move html to build/html
+gulp.task('html', () => gulp.src(src + '/html/*.html')
+  .pipe(gulp.dest(dest))
+);
+
+// Optimize images and move them to build/img
+gulp.task('img', () => gulp.src(src + '/img/*')
+.pipe(imagemin())
+.pipe(gulp.dest(dest + '/img')));
+
+// Move required js files to build/js
+gulp.task('js', () => {
+  let bootstrap = gulp.src('./node_modules/bootstrap/dist/js/bootstrap.min.js')
+  .pipe(gulp.dest(dest + '/js/'))
+  
+  let jquery = gulp.src('./node_modules/jquery/dist/jquery.min.js')
+  .pipe(gulp.dest(dest + '/js/'))
+  
+  let popper = gulp.src('./node_modules/popper.js/dist/umd/popper.min.js')
+  .pipe(gulp.dest(dest + '/js/'))
+  
+  let masonstrap = gulp.src(src + '/js/*.js')
+  .pipe(gulp.dest(dest + '/js/'))
+
+  return merge(bootstrap, jquery, popper, masonstrap)
+});
+
+// Compile, autoprefix, minify scss with sourcemaps
 gulp.task('sass', () => gulp.src(src + '/scss/*.scss')
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
@@ -31,12 +59,16 @@ gulp.task('sass', () => gulp.src(src + '/scss/*.scss')
 .pipe(rename({extname: ".min.css"}))
 .pipe(gulp.dest(dest + '/css/')));
 
+// Run task whenever associated files change
 gulp.task('watch', () => {
-  // Run `sass` task whenever scss files change
   gulp.watch(src + '/scss/*.scss', ['sass'])
+  gulp.watch(src + '/html/*.html', ['html'])
+  gulp.watch(src + '/img/*', ['img'])
+  gulp.watch(src + '/js/*.js', ['js'])
 });
 
 // Run all tasks
-gulp.task('run', ['sass']);
+gulp.task('run', ['sass', 'html', 'img', 'js']);
 
-gulp.task('default', ['run', 'watch'])
\ No newline at end of file
+// By default, run all tasks and then rebuild on changes
+gulp.task('default', ['run', 'watch']);
\ No newline at end of file

package.json

@@ -9,6 +9,7 @@
     "autoprefixer": "^7.1.4",
     "bootstrap": "4.0.0-beta",
     "font-awesome": "^4.7.0",
+    "gulp-imagemin": "^3.3.0",
     "gulp-postcss": "^7.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
@@ -16,6 +17,7 @@
     "gulp-uglify": "^3.0.0",
     "gulp-uglifycss": "^1.0.8",
     "jquery": "^3.2.1",
+    "merge-stream": "^1.0.1",
     "popper.js": "^1.11.1"
   },
   "devDependencies": {

src/scss/masonstrap.scss

@@ -7,9 +7,9 @@
  */
 
 // Load in FA 4
-@import '../node_modules/font-awesome/scss/font-awesome.scss';
+@import '../../node_modules/font-awesome/scss/font-awesome.scss';
 // Load in bootstrap 4
-@import '../node_modules/bootstrap/scss/bootstrap.scss';
+@import '../../node_modules/bootstrap/scss/bootstrap.scss';
 // Load in variable overwrites
 @import '_variables.scss';
 // Load in component overwrites