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

henrikhb/bootstrap-4-boilerplate: Bootstrap 4.3.1 boilerplate with Browsersync, ...

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

开源软件名称(OpenSource Name):

henrikhb/bootstrap-4-boilerplate

开源软件地址(OpenSource Url):

https://github.com/henrikhb/bootstrap-4-boilerplate

开源编程语言(OpenSource Language):

CSS 96.6%

开源软件介绍(OpenSource Introduction):

Bootstrap 4 boilerplate

A Bootstrap v4.3.1 boiler plate with Sass, concatenation, minification, autoprefixer, Browsersync, hot reloading and sourcemaps all runned by Gulp.

bootstrap logo sass logo gulp logo browsersync logo

Quick Start

# 1 Clone this repo
git clone https://github.com/wapbamboogie/bootstrap-4-boilerplate.git

# 2 Navigate into the repo directory
cd bootstrap-4-boilerplate

# 3 Install all node packages
npm install

# 4 Get started
gulp serve - starts localhost server with browser-sync, watches HTML, Sass, JS with hot reloading
gulp - minify CSS/JS and builds your app into the dist directory, ready for production

Requirements

This project requires you have nodejs with npm installed. This project requires you have a global installation of gulp.

# Install gulp globally
npm install -g gulp

Gulp commands

gulp serve

The gulp serve command starts a local Browsersync server that serves your files in the browser. It reloads the current page when changing HTML, PHP, Sass and JS files. The output of all Sass files go to main.css All JS files are concatenated into main.js You can access the development server with other devices on the same network. Go to the "External" address specified by Browsersync (see the terminal) in the web browser of your device.

gulp serve

gulp (build)

The default gulp command is set to creating a "dist" directory with a production version of the project, ready to be deployed. It minifies and renames JS/CSS assets as well as cleaning the old "dist" directory. CSS is autoprefixed for the latest two browser versions.

gulp

gulp concatScripts

The gulp concatScripts command combines the specified JS resources into main.js You can add new JS files to this command on line 16 in gulpfile.js You might want to run concatScripts once separately after adding new JS files.

gulp concatScripts

Overwriting Bootstrap sass variables

You can overwrite specific bootstrap sass variables by uncommenting lines in assets/css/1-frameworks/bootstrap/bootstrap-user-variables.scss

PHP

If you need a server with PHP support you can use the project with MAMP Pro or similar.

  • Create a new host in the hosts panel of MAMP Pro and choose the project folder as the document root.
  • Enable Symlinks settings in the "Extended" tab of the host configuration.
  • On line 82 in gulpfile.js change the browserSync.init function to the following:
browserSync.init({
    proxy: "http://name-of-your-mamp-host:8888",
    open: "external"
});
  • Start the MAMP services and run "gulp serve" as before.



鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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