·
bootpack
bootpack是一种样板模板，可以使用Bootstrap进行开发和WebPack来创建多页网站，以运行任务。在https://bootpack.gi**th*ub.io/ bootpack /上查看最新版本。
Bootstrap + WebPack =♥
- 只是开发：开始4个步骤。启动具有实时重新加载的开发服务器。
- 预先配置：预先配置的WebPack配置简化了过度复杂的构建过程。
-
可预测的文件输出：将CSS保留在您想要的位置；从您的JavaScript文件中出发！
dist目录将与src目录非常匹配。 - 缩小文件： JavaScript和CSS被缩小并输出为单个文件。
- 压缩资源： JS，CSS，字体，图像和Favicons被GZZE gzzs以最大程度的压缩。
- 开发和生产构建：在开发模式下构建项目，并启用了SourCemapping或生产模式。
- 开发工具：生成和压缩图像 +更多工具，以减轻Web开发。
- 内置测试：带有一个命令的LINT JavaScript和CSS文件。
目录
- 概述
- 入门
- 用法
- 关于
- 贡献
- 支持
入门
先决条件
- 该项目使用node.js v8.15.1或更大。
使用bootpack作为模板（选项1）
推荐方法使用bootpack作为模板。
-
要开始，请单击此存储库顶部的“使用此模板”按钮。
-
单击“使用此模板”按钮后，将要求您输入新的重新播放的名称。该存储库将使用所有bootpack存储库的文件和文件夹生成。
-
接下来，只需在终端中执行以下命令即可开始，用您在上一步中选择的位置和存储库名称替换
[USERNAME]/[REPOSITORY_NAME]。
git clone https://*gi*thub*.com/[USERNAME]/[REPOSITORY_NAME].git
npm install
npm run build
npm start
叉/克隆bootpack （选项2）
bootpack也可以分配到您自己的存储库中，并使用以下命令直接克隆或克隆。
bootpack.git
npm install
npm run build
npm start\”>
git clone https://git*hu*b.com*/bootpack/ bootpack .git
npm install
npm run build
npm start
- 导航到http：// localhost：8080在浏览器中。
- 将文件保存在项目中以刷新浏览器。
- 在终端中按CTRL+C停止服务。
用法
建造
npm run build – 以生产模式（缩小）创建项目，并输出到DIST目录。npm run watch – 在开发模式下创建项目（未经许可）。此模式观看更改并输出到DIST目录。npm start – 在开发模式（未经许可）中创建项目。此模式观看更改，输出到Dist目录并实时重新修饰页面。
测试
npm run test – 运行棉绒测试（+其他单位和E2E测试可以根据需要添加）npm run lint运行npm run lint:js和npm run lint:stylesnpm run lint:js在src/*/*.js文件上运行ESLINT测试npm run lint:css在src/css/*.css文件上运行Stylelint测试npm run lint:scss在src/scss/*.scss文件上运行Stylelint测试npm run lint:styles – 运行npm run lint:css和npm run lint:scss
工具
npm run compress:images
- 优化
images目录中的图像，将原始图像保存到images-original。 - 在建造之前或观察过程中运行。仅将
images目录复制到dist目录。 - 编辑
tools/image-compress.js以更改图像压缩。请参阅：https：//www.npmjs.com/package/compress-images设置
npm run generate:images width ### height ###
- 在
images目录中创建一个占位符。 - 用代表WWIDTH和高度的数字值替换
###。如果未指定宽度/高度，则占位符将默认为800px x 600px。
关于
Webpack 4
webpack：构建
WebPack构建创建了一个src目录密切模仿的dist目录。
- 在生产模式下，
dist目录包含缩小和压缩的文件。 - 在开发模式下，可以根据需要打开SourCemapping并且无压缩输出。
- WebPack服务器可通过实时浏览器刷新代码更改加速开发，同时保留了检查
dist目录的功能。
src目录包含启动文件，以使您的项目迅速脱离地面。
webpack：流程
WebPack任务Runner用以下命令构建网站：
-
npm run build将构建生产。 -
npm run watch构建开发模式，并手表进行文件更改。 -
npm start构建开发模式，观看文件更改，打开浏览器并在文件更改时刷新。
- 在更改时（
npm start或npm run watch）上清洁dist目录。 -
src/**/*.html被复制到dist/**/*.html - Favicons是从
src/favicon.png文件中生成并注入Dist index.html文件的。 - 引导程序组件将导入到index.js，输出到
dist/index.js。 -
src/css/和src/scss/中的CSS/SCSS文件捆绑在一起，缩小并输出到dist/styles.css。 - 图像和字体由
src/images>dist/images和src/fonts>dist/fonts复制。 - 通过GZIP压缩压缩文件。
引导4
Bootstrap：SCSS文件
Bootstrap 4通过@import \"~bootstrap/scss/*bootstrap*\";导入scss/boostrap.scss 。导入规则。可以通过评论此文件中的@import规则来排除可选组件（建议最小化捆绑包大小）。
SCSS/CSS覆盖和自定义样式：
- 包括
scss/variables.scss包括覆盖Bootstrap所有内置变量的所有内容。 - 包括
scss/custom.scss将自定义SCS添加到项目中。 - 包括
css/custom.css将自定义CSS添加到项目中。 - 包括
css/fonts.css将本地字体导入项目中。开放式SAN已被包括在内。
Bootstrap：JS文件
BootStap 4通过bootstrap.bundle在index.js文件中导入，其中包含完整的Bootstrap JavaScript以及popper.js Tooltip依赖项。在bootstrap.bundle导入的下方，注释包含其他用于导入引导程序的方法。最终用户可以选择导入bootstrap.bundle ， bootstrap或单个组件（建议最小化捆绑包大小）。
文件结构
src文件结构
|-css/
|--custom.css
|--fonts.css
|-fonts/
|--OpenSans/
|----[font_styles]/
|-images/
|--[images]
|-js
|--index.js
|-scss/
|--boostrap.scss
|--custom.scss
|--variables.scss
|-templates/
|--[templates]/
|----index.html
|-favicon.png
|-index.html
dist文件结构
/* All files compressed, minified & gzipped */
|-css
|--index.css
|--index.css.gz
|-fonts/
|--OpenSans/
|----[font_styles]/
|-images/
|--[images]
|-js
|--index.js
|--index.js.gz
|-templates/
|--[templates]/
|----index.html
|----index.html.gz
|-[favicons]
|-index.html
|-index.html.gz
贡献
请使用gitflow贡献。创建功能分支，添加提交，并打开拉动请求。
支持
请打开一个问题以供支持。
