Code Monkey home page Code Monkey logo

bootstrap-sass-gulp-browsersync's Introduction

Bootstrap, Sass, Gulp & BrowserSync

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.

Dependencies

How to Install

Download the package, and place all the files on the root level of your project's directory. Then do the following:

  1. Install Bootstrap3 Sass (Official) with Bower. $ bower install bootstrap-sass-official

  2. Install gulp.js and other Node.js modules. $ npm install

  3. 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).

How It Works

  • 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.

Directories

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"
}

Methods to include Bootstrap's Javascript components

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.

Credits

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.

bootstrap-sass-gulp-browsersync's People

Contributors

discardedbacon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.