Speed Up Bootstrap Theme Making Process

Everybody wants a customized bootstrap theme for the project. We also need it faster. Whether you customize it either using source code or overriding default styles, following this guide will help you to develop themes much quicker.

There is an advantage with the making theme from source code. Size remains same with different looks.

We are gonna cover the following.
1. Installing gulp
2. Installing browser-sync
3. Running gulp tasks
4. Use browser-sync to refresh our changes.

Installing gulp and browser-sync

Create a folder in your work space. Make a node js project by running the command npm init. And install below packages (gulp & browser-sync).


npm install gulp-cli -g
npm install gulp -D
npm install browser-sync

Gulpfile.js

Create a file gulpfile.js and add the below code to it.



var gulp = require('gulp')
var browserSync = require('browser-sync').create()


gulp.task('server-monitor', function(){

 browserSync.init({
 port: 3600,
 proxy: 'localhost/pnpcalculator' // change this to your app url
 })
 
 // when css is changed
 gulp.watch([ "./**/style.css"], [ 'browser-reload'])
 
 // when html or php or js is changed
 gulp.watch(["./**/*.php", "./**/*.js", "./**/*.html"], ['browser-reload']) 
})

gulp.task('browser-reload', function(){
 browserSync.reload();
})


gulp.task('monitor', ['server-monitor']);

What is there in above code ?
1. We have created two tasks, browser-reload and server-monitor.
2. Task “server-monitor” will watch the files specified and calls the task browser-reload.
3. Created a server with proxy at port 3600.

Running Gulp Task

Now, as we run the gulp task “server-monitor”, the log shows something like below

The image shows, I am running the task “server-prod”.

Edit Files and Watch Changes Live

Now, edit files like css, js, html or php that are under project directory. Browser will be automatically refreshed and thus our css changes.

Bootstrap Theme

With the combination of grunt watch from making bootstrap theme and gulp server-monitor task explained here, you can do changes in your .less files and watch them in browser.

The con here is running two programs, soon will try to comeup with one program that does all the tasks.