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

johndavemanuel/bootstrap-gulp-starter-template: Bootstrap 4 + Gulp 4 + Panini fo ...

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

开源软件名称(OpenSource Name):

johndavemanuel/bootstrap-gulp-starter-template

开源软件地址(OpenSource Url):

https://github.com/johndavemanuel/bootstrap-gulp-starter-template

开源编程语言(OpenSource Language):

CSS 70.5%

开源软件介绍(OpenSource Introduction):

BOOTSTRAP + GULP STARTER TEMPLATE

All Contributors

Note

The docs folder is for demo purposes only.

Changes should be commited to src files only.

The dist folder is not kept in source control.

How to use

The template is built with Sass and Gulp build system with these features:

  • Handlebars HTML templates with Panini – a super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials, external Handlebars helpers, or external data as JSON or YAML.
  • Sass compilation, prefixing with autoprefixer, and javaScript concatenation
  • Built-in BrowserSync server - will automatically reload your page when files are changed. It also live-injects CSS changes when you save a Sass file. This task runs continuously and defaults to localhost.
  • For production builds - CSS compression, JavaScript compression, Image compression and more.

Requirements

To use this template, your computer needs:

  • Node.js is used to run the build processes. https://nodejs.org/en/download/
  • Run node -v in the terminal
  • npm (Node comes with npm installed so you should have a version of npm.) Used to manage development dependencies.
  • Run npm -v in the terminal
  • Gulp – task runner npm install -g gulp
  • Run gulp -v in the terminal

Installing:

  • Clone this repo: git clone https://github.com/johndavemanuel/bootstrap-gulp-starter-template.git
  • Navigate into the repo directory: cd bootstrap-gulp-starter-template
  • Install all node packages: npm install
  • Run gulp development
  • Your site is now viewable at this URL: http://localhost:3000
  • To create compressed, production-ready assets run gulp production. This will delete everything in the dist folder and recreate all of your complied files. Never make updates directly into the dist folder as these files get overridden each time.

Folder Structure:

  • dist/ - compiled distribution files
  • node_modules - front-end dependencies
  • src/ - contains all of your core, working files—static assets, pages, templates, etc
  • src/assets/ - scss files, JS files, images, and fonts
  • src/data/ - external data (JSON or YAML)
  • src/layouts/ - HTML layouts templates
  • src/pages/ - site pages
  • src/partials/ - handlebars partials files.
  • gulpfile.js - all task definitions
  • package.json - handles the project dependencies
  • .htmllintrc - handles the HTML lint rules
  • .sass-lint.yml - handles the SCSS lint rules
  • reports - txt generated file for accessibility issues

Includes:

Gulp Plugins:

Additional Resources:

License

MIT

Contributors

Thanks goes to these wonderful people (emoji key):


tommix95


鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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