Bootstrap 4.1 - Use Gulp to build internel css and javascript files to code and work offline


 
Support my channels

Its nice to work offline when you move around and want to work offline, i'm using gulp to everything i do and laravel-elixir are i'm using every time i work with frontend code like sass or javascript.

First we need to install gulp and laraval-elixir in our project folder in the terminal

npm install gulp -D
npm install laravel-elixir

When its installed you need to create a gulpfile.js in your project folder

var gulp = require('gulp');
var elixir = require('laravel-elixir');

elixir(function(mix) {
	mix.scripts([
		'main.js'
	],'public/js/main.min.js');
});

Then you need to create a new folder called resources/assets/js in this folder you create your main.js file

console.log('Hello world');

Go to your terminal at type gulp watch gulp shut compile your javascript file into your path public/js/main.min.js when you have this file, create a new index.html file so we can test its working.

<!DOCTYPE html>
<html lang="da">
	<head>
		<meta charset="utf-8">
		<script src="js/main.min.js"></script>
	</head>
	<body>

	</body>
</html>

open your file in the browser and right click > click Inspect and change to console reload one more time and there shut stay Hello world inside your console, if its true then you know the gulp will compile your javascript file so late go next to include our bootstrap inside gulp.

Now you need to create a new folder called framework inside your resources/assets/js path where you can put your bootstrap.js file inside the framework folder, you don't have it you can download all the files from https://getbootstrap.com

Now you need to tell gulp to include bootstrap.js file when its compile, so change your mix.scripts so its look line this

elixir(function(mix) {
	mix.scripts([
		'framework/bootstrap.js',
		'main.js'
	],'public/js/main.min.js');
});

now you need to create a new folder resources/assets/scss/bootstrap where you need to copy all your bootstrap scss files inside, and create main.scss in path resources/assets/scss so we can compile its to a single main.min.css file there can be included into our html head.

When you have it ready you can add next config to your gulpfile.js so its will compile all your scss files.

mix.sass([
	'framework/bootstrap/bootstrap.scss',
	'main.scss'
],'public/css/main.min.css');

Go back to your index.html file and add the following line into you head tags before the javascript.

<link href="css/main.min.css" rel="stylesheet">

Add now test html code into your body tag, late see about your bootstrap its ready to use?

<span class="badge badge-success">badge</span>

Reload you index file into your browser and now everything shut working


Similar video courses