Verified Commit 6cfe66d5 authored by David Haynes's avatar David Haynes 🙆

Furthering development of the Gulp build

parent 0ca0adb7
Pipeline #1570 passed with stage
in 25 seconds
......@@ -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
/*
"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
......@@ -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": {
......
......@@ -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
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment