gulp 实现纯html、css、bootstrap 的打包

在开发 web 项目时，我们通常需要将 HTML、CSS、JavaScript 等文件打包成静态文件，以便于部署和运行。gulp 是一个流行的 JavaScript 流的构建工具，可以帮助我们自动化这个过程， 相比webpack， 我个人觉得gulp是一个较为轻量的打包工具了。本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。

1. 安装 gulp

在开始之前，请确保已经安装了 Node.js，这里不介绍如何安装node。然后，可以使用以下命令在全局围内安装 gulp：

npm install -g gulp

1. 创建项目目录

在本地磁盘上创建一个新的文件夹，例如 my-project，然后在其中创建以下文件：

my-project
├── css
│   ├── main.css
├── js
│   └── main.js
├── index.html
└── package.json

1. 安装依赖

在 my-project 文件夹中，打开终端，运行以下命令安装 Gulp 及其所需的依赖：

npm install --save-dev gulp gulp-cssmin gulp-uglify browser-sync

1. 编写 Gulp 文件

const gulp = require('gulp');
const cssmin = require('gulp-cssmin');
const uglify = require('gulp-uglify');
const browserSync = require('browser-sync').create();

// HTML 任务
function html() {
	return gulp.src('index.html')
    .pipe(browserSync.stream());
}

// CSS 任务
function css() {
  return gulp.src('css/main.css')
    .pipe(cssmin())
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.stream());
}

// JavaScript 任务
function js() {
	return gulp.src('js/main.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(browserSync.stream());
}

// 监视并刷新任务
gulp.task('watch', () => {
  browserSync.init({
    server: {
      baseDir: './'
    }
  });

  gulp.watch('index.html', gulp.series("html"));
  gulp.watch('css/main.css', gulp.series("css"));
  gulp.watch('js/main.js',  gulp.series("js"));
});

// 默认任务
gulp.task('default', gulp.series('html', 'css', 'js'));

1. 配置 Bootstrap

为了使用 Bootstrap，我们需要将其引入到 index.html 中。在 index.html 文件中加入以下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAx8ppTCeTTAs0pnLlR4t8Q/Nmd5-Mg" crossorigin="anonymous">

1. 运行 Gulp

在 my-project 文件夹中打开终端，运行以下命令启动 Gulp：

gulp

此时，浏览器会自动打开 http://localhost:3000/ 并显示您的 index.html 文件。您可以在 css 和 js 文件夹中添加或修改文件，Gulp 将自动检测并重新打包它们。

1. 打包静态文件

当您想要生成静态文件时，可以运行以下命令：

gulp dist

该命令将创建一个名为 dist 的文件夹，其中包含压缩后的 HTML、CSS 和 JavaScript 文件。

以上便是如何使用 Gulp 实现纯 HTML、CSS、Bootstrap 的打包。希望对您有所帮助！

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！