Bootstrap Gulp Starter Template

Overview:

The Bootstrap + Gulp Starter Template is a pre-built template that combines the popular Bootstrap framework with the Gulp build system. It provides a starting point for web developers to quickly set up a project with features such as Sass compilation, JavaScript concatenation, and a built-in BrowserSync server for live-reloading. It also includes additional features like Handlebars HTML templates with Panini, CSS and JavaScript compression, image compression, and more. The template is easy to install and can be customized to suit individual project needs.

Features:

• Handlebars HTML templates with Panini: Utilizes a simple flat file generator for Gulp, allowing for the compilation of HTML pages using a common layout. Can include HTML partials, external Handlebars helpers, or external data as JSON or YAML.
• Sass compilation and prefixing: Automatically compiles Sass files and adds vendor prefixes using autoprefixer.
• JavaScript concatenation: Combines multiple JavaScript files into one.
• Built-in BrowserSync server: Automatically reloads the page when files are changed, and live-injects CSS changes when a Sass file is saved.
• Production builds: Provides options for CSS compression, JavaScript compression, image compression, and more for creating optimized, production-ready assets.

Installation:

To use the Bootstrap + Gulp Starter Template, follow these steps:

1. Clone this repository: git clone https://github.com/johndavemanuel/bootstrap-gulp-starter-template.git
2. Navigate into the repository directory: cd bootstrap-gulp-starter-template
3. Install all Node packages: npm install
   • Make sure you have Node.js installed on your computer. You can download it from the official website: Node.js
   • Check if Node.js is installed by running node -v in the terminal.
   • npm (Node Package Manager) is installed automatically with Node.js. Check its version by running npm -v in the terminal.
4. Install Gulp globally: npm install -g gulp
   • Check the version of Gulp by running gulp -v in the terminal.
5. Run the development task: gulp development
   • This will start a development server and your site will be viewable at http://localhost:3000.
6. To create compressed, production-ready assets, run: gulp production
   • This command will delete everything in the dist folder and recreate all compiled files.
   • Note: Do not make updates directly into the dist folder, as these files will be overridden each time.

Summary:

The Bootstrap + Gulp Starter Template is a comprehensive starting point for web developers who want to quickly set up a project using Bootstrap and benefit from the automation provided by the Gulp build system. It offers features like Handlebars HTML templates, Sass compilation, JavaScript concatenation, live-reloading with BrowserSync, and production-ready asset optimization. By following the installation guide, developers can easily clone the template, install the necessary dependencies, and start developing their websites or web applications with a solid foundation.