An easy-to-use Bootstrap and Gulp project starter kit.
BootGulp in-effect, bootstraps a new Bootstrap project that uses Gulp to automate development workflow, and that uses npm to manage its dependencies.
Out of the box, BootGulp creates a typical src/dist file structure that separates source files from files generated for use in production environments. Theming or modifying Bootstrap is simplified by providing clearly-identified locations to make modifications and change default styles, or to add custom JavaScript. BootGulp also automates the following processing of code and files:
- Preprocesses .scss files into CSS
- Autoprefixes CSS as needed to support older web browsers
- Minifies CSS
- Concatenates CSS files into one file
- Minifies JS
- Concatenates JS into one file
- Losslessly compresses gif, jpeg, png, and svg files
- Minifies HTML and embedded JS/CSS
-
Install nodejs if it is not already installed. Check if
nodeandnpmare already installed (or verify that installation was successful).node --version npm --version
-
Install the
gulpCLI command globally if it is not already installed, and verify.sudo npm install --global gulp-cli gulp --version
-
Start a new npm project and install BootGulp as a dependency.
mkdir myproject npm init npm install bootgulp --save-dev
Once BootGulp has been installed as a dependency on a new npm project, the file structure will look similar to this.
├── dist/
│ ├── css/
│ ├── fonts/
│ ├── img/
│ ├── js/
│ ├── demo.html
│ └── index.html
├── node_modules/
├── src/
│ ├── fonts/
│ ├── img/
│ ├── js/
│ ├── scss/
│ ├── demo.html
│ └── index.html
├── gulpfile.js
├── package.json
└── package-lock.jsonThe important locations are noted below.
This location is where modifications and additions should be made to content, Sass files, images, fonts, and any included JavaScript that your project requires.
This directory is where the final output of the project will be generated and can be packaged for distribution/publication.
gulp- processes allgulp watch- processes all, then watches for changes and reprocessesgulp css- only processes Sass/CSSgulp js- only processes JavaScriptgulp img- only processes imagesgulp fonts- only processes fontsgulp content- only processes content (html files)