In this chapter, you will create a build process for an example project. The process not only prepares your CSS and JavaScript code, but also runs a static web server, which automatically reloads on file changes in browser testing, runs some tests for your code, and more.

To demonstrate the different steps of the build process, you will create an example project. The example project is a simple one-page marketing layout powered by Bootstrap. At the end, you should have created an HTML page, which will look like that shown in the following screenshot:

Bootstrap ships with its own build process. At the time of writing this book, Bootstrap's build process is written with Grunt. It enables you to compile and prepare a custom version of Bootstrap and run the documentation locally. Grunt is just like Gulp: it is a task runner for Node.js. Grunt does not use streams but saves the temporary code in file products.

The tasks for Bootstrap's Grunt build process can be found in the Gruntfile.js file included in the source files. You can use this file to understand which tasks you will have to run to get your code ready for testing in production.

In this chapter, we use Gulp instead of Grunt since Gulp is considered to be more intuitive and much easier to learn. Gulp is newer than Grunt, but its community is growing fast and new plugins are added every day.

Finally, you should note that task runners that link Gulp and Grunt will make your work easier but are not required to run your tasks on Node.js.

Before we go any further, we must first initiate npm for our project by running the following command in our console:

npm init

Answer the questions like those shown in the following screenshot:

The preceding command creates a new package.json file; this file holds various metadata relevant to the project, and it also contains the dependencies for the project. The Gulp plugins you will install later on are all (dev) dependencies of your project.

Now install Gulp in your project, devDependencies, by running the following command in your console:

npm install --save-dev gulp

The --save-dev flag writes down Gulp as a devDependency into the package.json file.

var gulp = require('gulp'); 
 
gulp.task('default', function() { 
  // place code for your default task here 
}); 

Of course, you will need your build process to develop your project, but after that you will run different tasks to get your code ready for production. In the development stage, you need CSS code with CSS sourcemaps for easy debugging, and in the production stage, you probably will minify the CSS code without CSS sourcemaps.

The gulp-environments plugin makes it convenient to create separate environments, such as development and production, to run your tasks in. You can install this plugin by running the following command:

npm install --save-dev gulp-environments

Then add the plugin to your Gulpfile.jsfile, which should look like this:

var environments = require('gulp-environments');

Then assign the environments as follows:

var development = environments.development;
var production = environments.production;

Now you can pass a command line flag --env to set the environment:

gulp build --env development

You can also, conditionally assign...

Bower is a package management system for client-side programming. You can use Bower to install Bootstrap's source code and keep it up to date more easily. Initiate Bower by running the following command in your console:

bower init

Answer the questions like those shown in the following screenshot:

After the preceding steps, a bower.json file is created. Then run the following command in your console:

bower install bootstrap#4 --save-dev

The preceding command downloads Bootstrap to the bower_components folder. Notice that jQuery and Tether are also installed since Bootstrap depends on these libraries.

The --save-dev flag writes down Bootstrap as a devDependency into the bower.json file.

Before we can start compiling Bootstrap's Sass code into CSS code, we have to create some local Sass or SCSS files. First, create a new scss subdirectory in your project directory. In the scss directory, create your main project file called app.scss.

Then create a new subdirectory in the new scss directory called includes. Now you will have to copy the bootstrap.scss and _variables.scss from the Bootstrap source code in the bower_components directory to the new scss/includes directory:

cp bower_components/bootstrap/scss/bootstrap.scss scss/includes/_bootstrap.scss
cp bower_components/bootstrap/scss/_variables.scss scss/includes/

Notice that the bootstrap.scss file has been renamed as _bootstrap.scss, starting with an underscore, and has become a partial file now.

Import the files you have copied in the previous step into the  app.scss file as follows:

@import "includes/variables";
@import "includes/bootstrap";

Then open the  scss/includes/_bootstrap.scss file...

Some of Bootstrap's components do not only require CSS but also JavaScript. Bootstrap comes with jQuery plugins for commonly used components. Similarly, the navbar requires the collapse plugin and the carousel component has its own plugin too.

Bootstrap's plugins require jQuery and the Tooltips and Popover components also require the Tether library.

In the build process, you can bundle jQuery, Tether, and the plugins into a single file by using the gulp-concat plugin.

You can install the gulp-concat plugin by running the following command in your console:

npm install gulp-concat --save-dev

After that the task that bundles the JavaScript files may look like:

gulp.task('compile-js', function() { 
  return gulp.src([bowerpath+ 'jquery/dist/jquery.min.js', bowerpath+ 'tether/dist/js/tether.min.js', bowerpath+ 'bootstrap/dist/js/bootstrap.min.js','js/main.js']) 
    .pipe(concat('app.js')) 
    .pipe(gulp.dest('./_site/js/')); 
}); 

The preceding...

Although we'll only create a one-page design in this chapter, using a template engine for your project is not a bad idea. Whenever you decide to extend your project with one or more other HTML pages, DRY coding your HTML will make your work more efficient and reusable. Many HTML template languages and engines are available. Bootstrap uses the Jekyll static site generator to enable you to run its documentation locally. Many templates for Bootstrap CLI use Nunjucks now. In this chapter, you will meet Panini for Gulp. Panini is a flat file compiler that uses the concepts of templates, pages, and partials powered by the Handlebars templating language.

For the marketing example project, you'll have to create the following file and directory structure, which holds your HTML templates:

In the preceding file and directory structure, the pages directory contains your pages. Each page has a layout, which can be found in the layouts directory. Both pages and layouts may include...

Now that your tasks to compile your HTML, CSS, and JavaScript code are ready, it's time to show and inspect the result in your browser. Browsersync is a module that keeps your browser in sync when developing your code. Browsersync works by injecting an asynchronous script tag right after the <body> tag during initial request.

To use Browsersync with Gulp no special plugin is required; you can simply require() the module.

First install Browsersync by running the following command:

npm install browser-sync gulp --save-dev

Then create a task in your  Gulpfile.js file which may look like the following:

var browser = require('browser-sync');
var port = process.env.SERVER_PORT || 8080;
// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){  browser.init({server: './_site', port: port});});

The server task depends on the build task (second argument ['build'] in the preceding code) which means that the build task should run before the server task...

At the end of the Gulpfile.js file we'll write down some tasks, including the default task, which runs a sequence of tasks of the build process. These tasks may look like the following:

gulp.task('set-development', development.task); 
gulp.task('set-production', production.task); 
gulp.task('test',['scss-lint','validate-html']); 
gulp.task('build', ['clean','copy','compile-js','compile-sass','compile-html']); 
gulp.task('default', ['set-development','server', 'watch']); 
gulp.task('deploy', ['set-production','server', 'watch']); 

The default task sets the environment to development by calling the set-development task first. Then it runs the server task, and starts the watch task after that. Because the server task depends on the build task, the build task always runs before the server task (Browsersync) starts. The deploys task does the same as the default task, but sets the environment to production in the...

At the start of this chapter, I have shown you a screenshot of a responsive mobile-first one-page marketing site built with Bootstrap. In the rest of the chapter, I will guide you to build this site using the Gulp build process you have created in the preceding sections.

You will have to split up the HTML page into different parts in accordance with the HTML template structure you have already created.

The project will have a single breakpoint at 768 pixels. For viewports wider than 768 pixels, the navigation menu will become horizontal and other adoptions are made.

Directly under the hero unit, the design shows three features. A single feature may look like that shown in the following screenshot. Each feature starts with a rounded image, which may contain a photo or icon followed by a heading and a text paragraph. At the end, you will find a button which is a Call to action.

On screens smaller than 768 pixels, the features should display under each other. On wider screens, the features become horizontal and form three equal width columns like those shown in the following screenshot:

Again we create two files: the html/includes/features.html HTML template and a scss/includes/_features.scss Sass partial.

The structure of the HTML code in the html/includes/features.html HTML template may look like the following (notice that in the HTML code, the features are left out):

    <div class="container features"> 
      <div class="row"> 
        <div class="col-md-4"> 
          <!-- first feature --> ...

Last but not least, we'll have to style the footer links to finalize our project. Again create an HTML template and a Sass partial to do this.

The html/includes/footer.html HTML template should contain HTML like the following:

<footer class="page-footer"> 
      <div class="container">     
        <div class="pull-xs-right"> 
            <a href="https://twitter.com/bassjobsen"><i class="fa fa-twitter fa-lg"></i></a> 
            <a href="https://facebook.com/bassjobsen"><i class="fa fa-facebook fa-lg"></i></a> 
            <a href="http://google.com/+bassjobsen"><i class="fa fa-google-plus fa-lg"></i></a> 
            <a href="http://stackoverflow.com/users/1596547/bass-jobsen"><i class="fa fa-stack-overflow fa-lg"></i></a> 
            <a href="https://github.com/bassjobsen"><i class="fa fa-github fa...