• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

discardedbacon/bootstrap-sass-gulp-browsersync: Bootstrap, Sass, Gulp & Brow ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

discardedbacon/bootstrap-sass-gulp-browsersync

开源软件地址(OpenSource Url):

https://github.com/discardedbacon/bootstrap-sass-gulp-browsersync

开源编程语言(OpenSource Language):

JavaScript 63.8%

开源软件介绍(OpenSource 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.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap