henrikhb/bootstrap-4-boilerplate

Bootstrap 4.3.1 boilerplate with Browsersync, Sass and Gulp.js

Bootstrap 4 boilerplate

A Bootstrap v4.3.1 boiler plate with Sass, concatenation, minification, autoprefixer, Browsersync, hot reloading and sourcemaps all runned by Gulp.

Quick Start

# 1 Clone this repo
git clone https://github.com/wapbamboogie/bootstrap-4-boilerplate.git

# 2 Navigate into the repo directory
cd bootstrap-4-boilerplate

# 3 Install all node packages
npm install

# 4 Get started
gulp serve - starts localhost server with browser-sync, watches HTML, Sass, JS with hot reloading
gulp - minify CSS/JS and builds your app into the dist directory, ready for production

Requirements

This project requires you have nodejs with npm installed. This project requires you have a global installation of gulp.

# Install gulp globally
npm install -g gulp

Gulp commands

gulp serve

The gulp serve command starts a local Browsersync server that serves your files in the browser. It reloads the current page when changing HTML, PHP, Sass and JS files. The output of all Sass files go to main.css All JS files are concatenated into main.js You can access the development server with other devices on the same network. Go to the "External" address specified by Browsersync (see the terminal) in the web browser of your device.

gulp serve

gulp (build)

The default gulp command is set to creating a "dist" directory with a production version of the project, ready to be deployed. It minifies and renames JS/CSS assets as well as cleaning the old "dist" directory. CSS is autoprefixed for the latest two browser versions.

gulp

gulp concatScripts

The gulp concatScripts command combines the specified JS resources into main.js You can add new JS files to this command on line 16 in gulpfile.js You might want to run concatScripts once separately after adding new JS files.

gulp concatScripts

Overwriting Bootstrap sass variables

You can overwrite specific bootstrap sass variables by uncommenting lines in assets/css/1-frameworks/bootstrap/bootstrap-user-variables.scss

PHP

If you need a server with PHP support you can use the project with MAMP Pro or similar.

• Create a new host in the hosts panel of MAMP Pro and choose the project folder as the document root.
• Enable Symlinks settings in the "Extended" tab of the host configuration.
• On line 82 in gulpfile.js change the browserSync.init function to the following:

browserSync.init({
    proxy: "http://name-of-your-mamp-host:8888",
    open: "external"
});

• Start the MAMP services and run "gulp serve" as before.

bootstrap-4-boilerplate's Issues

Gulp build task creates minified versions of js and css, but they are mislinked in the html

After uploading the contents of the dist folder to a web server, index.html is logging 404's in the console. It's looking for assets/css/main.css and assets/js/main.js instead of what exists (assets/css/main.min.css and assets/js/main.min.js).

v4.0.0

Could you update to last Bootstrap version (Currently v4.0.0) ?

gulp task for 2 scss

how to make the gulp renders 2 scss at the same time ?

let say I want to add 1 more scss named ‘styles.scss’

how to set up the gulp task for that ?

Do you think this library should also support a transpiler?

tweak to get sourcemaps showing

Fantastic work!

To get sourcemaps showing up in Dev Tools I had to add
/*# sourceMappingURL=style.css.map */
to the bottom of assets/css/main.scss

Hope this helps someone...

Images for readme

is possible without sass ?

Hi i dont want to use it with sass. I only want to use with css is this possible ?

How to include third party css/js/images plugin?

What is the correct way to include a third-party plugin (bxslider-4) that has images, css and js and make it work with gulp serve and build?

Thanks!

Is this updated to the latest Bootstrap 4.0.0?

Error is gulp start

Hi,
Followed the instructions and everything is installed, but I get stuck at starting gulp (that is globally installed. What does this error mean?
Regards & Thanks,
David
David@DESKTOP-2A2S3DO MINGW64 ~/Bootstrap4Boilerplate/bootstrap-4-boilerplate (master) $ gulp serve gulp serve[9404]: c:\ws\src\node_contextify.cc:626: Assertion args[1]->IsString()' failed.
1: 00007FF669ECF04A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+5114
2: 00007FF669EAA0C6 node::MakeCallback+4518
3: 00007FF669EAA17F node::MakeCallback+4703
4: 00007FF669E7F630 node::DecodeWrite+13024
5: 00007FF66A6AC122 v8::internal::OptimizingCompileDispatcher::Unblock+59890
6: 00007FF66A6AD289 v8::internal::OptimizingCompileDispatcher::Unblock+64345
7: 00007FF66A6AC5CC v8::internal::OptimizingCompileDispatcher::Unblock+61084
8: 00007FF66A6AC4EB v8::internal::OptimizingCompileDispatcher::Unblock+60859
9: 000000EA94BDC5C1
`

HTML main.css/main.js aren't replaced with .min during build?

How to include fontawesome 5?

I've been trying to add fontawesome 5 to the template. I've followed the instructions here: https://fontawesome.com/how-to-use/web-fonts-with-css#basic-use and it works well when testing using gulp serve.

However, when creating an output with just gulp, font awesome doesn't load.

Here is what I've done:

1 - Added a folder called "fontawesome" containing all .scss files under the assets/css/2-plugins directory

2 - added @import 'fontawesome/fontawesome'; into the index.scss file of the plugins directory

3 - added the "webfonts" directory under the "assets" directory

4 - Changed line 11 of the _variables.css file under the css/3-base directory to:
$path-fonts : $fa-font-path;

Any clues what I'm missing?

gulp-rigger or etc.

Could you include in your gulp config "gulp-rigger" plugin or etc ?

Bootstrap 4 beta

Are you going to update Bootstrap 4 beta ?

How would one go about integrating gulp-file-include in this boilerplate?

https://www.npmjs.com/package/gulp-file-include

I am looking to use the above library for templating.

gulp serve dont work

the console give this error:

gulp serve[25492]: ../src/node_contextify.cc:629:static void node::contextify::ContextifyScript::New(const FunctionCallbackInfov8::Value &): Assertion `args[1]->IsString()' failed.
1: node::Abort() [/usr/local/bin/node]
2: node::MakeCallback(v8::Isolate*, v8::Localv8::Object, char const*, int, v8::Localv8::Value, node::async_context) [/usr/local/bin/node]
3: node::contextify::ContextifyScript::New(v8::FunctionCallbackInfov8::Value const&) [/usr/local/bin/node]
4: v8::internal::FunctionCallbackArguments::Call(v8::internal::CallHandlerInfo) [/usr/local/bin/node]
5: v8::internal::MaybeHandlev8::internal::Object v8::internal::(anonymous namespace)::HandleApiCallHelper(v8::internal::Isolate*, v8::internal::Handlev8::internal::HeapObject, v8::internal::Handlev8::internal::HeapObject, v8::internal::Handlev8::internal::FunctionTemplateInfo, v8::internal::Handlev8::internal::Object, v8::internal::BuiltinArguments) [/usr/local/bin/node]
6: v8::internal::Builtin_Impl_HandleApiCall(v8::internal::BuiltinArguments, v8::internal::Isolate*) [/usr/local/bin/node]
7: 0x480a030427d
Abort trap: 6

Update to Bootstrap v4.1.3

Vulnerabilitites after npm install

Hi, i get the following message in the terminal after doing npm install:

found 24 vulnerabilities (7 low, 13 moderate, 4 high) in 1941 scanned packages

Is it normal ? can i fix it ?

Thank you in advance.

Easy maintainable?

Is your dev-environment easy maintainable with the coming bootstrap updates?

How do we go about versioning?