Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation. The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Installing Gulp in your project


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.

Creating the Gulpfile.js which holds your tasks

Create a new file called Gulpfile.js  in your project directory and write down the following JavaScript code into it:

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

Later on...