My SASS assets for a new project using Bootstrap, Bower & Gulp
This boilerplate uses a number of open source projects to work properly:
In order to start a project with Bootstrap SASS
& jQuery
, first you'll better get the repo
git clone git@github.com:zakaziko99/assets-bootstrap-sass-bower-gulp.git
Then customize your project by changing the name and delete the .git folder
mv assets-bootstrap-sass-bower-gulp <project-folder>
cd <project-folder>/
rm -rf .git
To use Bootstrap SASS
& jQuery
, your project requires the following major dependencies:
- Node.js, used to run JavaScript tools from the command line.
- npm, the node package manager, installed with Node.js and used to install Node.js packages.
- bower, a fast package manager for the web frameworks, libraries, assets, and utilities.
- gulp, a Node.js-based build tool.
To install dependencies:
- Check your Node.js version.
node --version
The version should be at or above 0.12.x.
-
If you don't have
Node.js
installed, or you have a lower version, go to nodejs.org and click on the big green Install button. -
Install
bower
andgulp
.
npm install -g bower gulp
This lets you run bower
and gulp
from the command line. (the working directory must be the root of your project)
- Install the
Bootstrap SASS
&jQuery
dependencies.
bower install && npm install
This installs Automate Tasks for better workflow.
on the 'gulpfile.js' file, you can customize the dist folder of your project:
var serverPath = '<dist-folder>';
Run the sass gulp task
gulp sass
This will compile the SASS through the file 'assets/sass/main.scss' and outputs the compiling minified css file 'main.css' on the '<dist-folder>/css' folder including Bootstrap SASS
files downlaoder with bower
You can customize the Bootstrap SASS
included by editing the 'assets/sass/includes/_bootstrap-config.scss' such Alerts, Modals, Carousels, ...
Run the jquery gulp task
gulp jquery
This will copy the minified jquery library fron '/bower_components' folder to '<dist-folder>/js/libs' folder
Run the generating Bootstrap js gulp task
gulp bootstrap_js
This will generate a customized bootstrap js script through the file 'assets/scripts/bootstrap.js' and outputs the generated and minified js file 'bootstrap.js' on the '<dist-folder>/js/libs' folder
You can customize the Bootstrap JS
plugins to include in the generated js file, by editing the 'assets/scripts/bootstrap.js' file & delete the calls of plugins files.
Run the generating js gulp task
gulp js
This will concatenate the files under the folder 'assets/scripts/dev/' and outputs the generated and minified js file 'main.js' on the '<dist-folder>/js' folder
Run the build gulp task
gulp build
This will run the sass
, jquery
, bootstrap_js
and js
gulp tasks.
Run the dev gulp task
gulp serve
This will run first the build
gulp task.
This outputs an IP address you can use to locally test and another that can be used on devices connected to your network.
This will be also reload the page in real time in case of changes on HTML pages or Js scripts located on '/assets/scripts/dev' folder.
In case of SASS changes on '/assets/sass/' folder, the page will update the css in real time without reloading.
The serve
gulp task is also the default task.