This package of scripts gives you a starting point for building a website with Bootstrap, Sass and Gulp. BrowserSync built into the package allows you to confirm every code changes in a browser window on the fly. It is hoped to make your workflow faster, and more functionalities will be added until it can be used as a true alternative to Google Web Starter Kit. Version 0.2.0 includes gulp-gzip to generate gzip files for css and js.
Download the package, and place all the files on the root level of your project's directory. Then do the following:
-
Install Bootstrap3 Sass (Official) with Bower.
$ bower install bootstrap-sass-official -
Install gulp.js and other Node.js modules.
$ npm install -
Run gulp to configure.
$ gulp init
At the end of initialization process, BrowserSync will launch a local web server, open a new browser window/tab and load a barebone html template (index.html).
- Working files for development are in the '/app' directory.
- The site's preview (http://localost:3000/) will refresh everytime a scss, js, or html file gets updated.
- To suspend Sass's 'watch' tasks, hit
control+c. - To resume Sass's 'watch' tasks, run
gulp serve. - To create a clean output folder, run
gulp output. It will create a new '/dist' directory.
Default directory names are specified as follows in gulpfile.js By simply changing the bsk object's properties, you'll be able to use different directory names.
//working folder
var bsk = {
appDir : "app",
//folder for distribution
distDir :"dist",
//css folder name
cssDir : "css",
//scss folder name
scssDir : "stylesheets",
//minified js folder name
minifiedJsDir : "js",
//uncompressed js folder name
jsDir : "javascripts",
//font folder name
fontsDir : "fonts"
}
app/(jsDir)/bootstrap.js contains all of Bootstrap's JavaScript, concatenated in the correct order.
If you would like to selectively load the components, such as 'alerts', 'buttons', and 'tooltip', you can require bootstrap-sprockets.
To use the bootstrap-sprockets:
Open app/(jsDir)/bootstrap-sprockets.js and apped .js to file names you would like to use.
For example,
//= require ./bootstrap/tooltip
should be
//= require ./bootstrap/tooltip.js
The conpenent's codes will be inserted into app/(minifiedJsDir)/bootstrap-sprockets.min.js. Make sure to include the minified Javascript file in your templates.
Refer to the gulp-include page to learn more on how the Javascript files are included.
Some parts of Gulpfile.js are based on gaspanik/bootstrap3-sass-gulp by @cypher.
##License Code and documentation copyright of Bootstrap 3 are owned by Twitter, Inc, with code released under the MIT license and docs released under Creative Commons.
Each Node.js module may have different terms of use.