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. 要开始，请单击此存储库顶部的“使用此模板”按钮。
   

2. 单击“使用此模板”按钮后，将要求您输入新的重新播放的名称。该存储库将使用所有bootpack存储库的文件和文件夹生成。

3. 接下来，只需在终端中执行以下命令即可开始，用您在上一步中选择的位置和存储库名称替换[USERNAME]/[REPOSITORY_NAME] 。

 git clone https://*gi*thub*.com/[USERNAME]/[REPOSITORY_NAME].git
npm install
npm run build
npm start

bootpack也可以分配到您自己的存储库中，并使用以下命令直接克隆或克隆。

 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:styles
npm 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构建创建了一个src目录密切模仿的dist目录。

• 在生产模式下， dist目录包含缩小和压缩的文件。
• 在开发模式下，可以根据需要打开SourCemapping并且无压缩输出。
• WebPack服务器可通过实时浏览器刷新代码更改加速开发，同时保留了检查dist目录的功能。

src目录包含启动文件，以使您的项目迅速脱离地面。

WebPack任务Runner用以下命令构建网站：

• npm run build将构建生产。
• npm run watch构建开发模式，并手表进行文件更改。
• npm start构建开发模式，观看文件更改，打开浏览器并在文件更改时刷新。

1. 在更改时（ npm start或npm run watch ）上清洁dist目录。
2. src/**/*.html被复制到dist/**/*.html
3. Favicons是从src/favicon.png文件中生成并注入Dist index.html文件的。
4. 引导程序组件将导入到index.js，输出到dist/index.js 。
5. src/css/和src/scss/中的CSS/SCSS文件捆绑在一起，缩小并输出到dist/styles.css 。
6. 图像和字体由src/images > dist/images和src/fonts > dist/fonts复制。
7. 通过GZIP压缩压缩文件。

Bootstrap 4通过@import "~bootstrap/scss/*bootstrap*";导入scss/boostrap.scss 。导入规则。可以通过评论此文件中的@import规则来排除可选组件（建议最小化捆绑包大小）。

• 包括scss/variables.scss包括覆盖Bootstrap所有内置变量的所有内容。
• 包括scss/custom.scss将自定义SCS添加到项目中。
• 包括css/custom.css将自定义CSS添加到项目中。
• 包括css/fonts.css将本地字体导入项目中。开放式SAN已被包括在内。

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贡献。创建功能分支，添加提交，并打开拉动请求。

请打开一个问题以供支持。