Bootstrap 4 开发环境快速入门

1. 项目目录结构及介绍

当您克隆本项目后，将会看到以下目录结构：

bootstrap-4-boilerplate/
├── assets/                # 存放项目静态资源，如CSS、JavaScript和图片等
│   ├── css/
│   │   └── main.css       # 主CSS文件，所有样式将编译到这个文件
│   ├── js/
│   │   └── main.js        # 主JavaScript文件，所有脚本将编译到这个文件
│   └── scss/              # 存放Sass文件
│       └── main.scss      # 主Sass文件，所有Sass文件将编译到这个文件
├── .gitignore             # 指定Git应该忽略的文件和目录
├── gulpfile.js            # Gulp配置文件，定义了各种任务
├── index.html             # 项目首页HTML文件
├── LICENSE.md             # 项目许可证文件
├── newpage.html           # 示例页面HTML文件
├── package-lock.json      # npm依赖锁文件
├── package.json           # npm项目配置文件
└── README.md              # 项目说明文件

2. 项目的启动文件介绍

启动文件主要是gulpfile.js。此文件中定义了使用Gulp执行的任务，包括启动本地服务器、热重载、编译Sass和JavaScript文件等。以下是几个常用的命令：

• gulp serve：启动本地服务器，并监视HTML、Sass和JavaScript文件的更改，自动在浏览器中更新。
• gulp（默认任务）：将CSS和JavaScript文件压缩并复制到dist目录，准备生产环境部署。

3. 项目的配置文件介绍

配置文件主要是gulpfile.js中的相关配置段。以下是一些重要的配置：

• 浏览器同步（BrowserSync）：配置一个本地服务器，并允许在设备上查看更改。
• Sass编译：配置Sass文件的编译，包括自动添加浏览器前缀。
• JavaScript和CSS压缩：配置任务来压缩和重命名JavaScript和CSS文件。
• 文件监听：配置文件更改时触发的任务，例如，当Sass文件更改时，自动编译并更新浏览器。

您可以在gulpfile.js中根据需要修改配置，例如，如果您需要使用MAMP等工具来支持PHP，可以修改浏览器同步的代理设置。

请根据实际需要调整项目配置，以匹配您的开发环境。