在开发 web 项目时,我们通常需要将 HTML、CSS、JavaScript 等文件打包成静态文件,以便于部署和运行。gulp 是一个流行的 JavaScript 流的构建工具,可以帮助我们自动化这个过程, 相比webpack, 我个人觉得gulp是一个较为轻量的打包工具了。本文将介绍如何使用 gulp 实现纯 HTML、CSS、Bootstrap 的打包。
在开始之前,请确保已经安装了 Node.js,这里不介绍如何安装node。然后,可以使用以下命令在全局围内安装 gulp:
npm install -g gulp
在本地磁盘上创建一个新的文件夹,例如 my-project,然后在其中创建以下文件:
my-project
├── css
│ ├── main.css
├── js
│ └── main.js
├── index.html
└── package.json
在 my-project 文件夹中,打开终端,运行以下命令安装 Gulp 及其所需的依赖:
npm install --save-dev gulp gulp-cssmin gulp-uglify browser-sync
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'));
为了使用 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">
在 my-project 文件夹中打开终端,运行以下命令启动 Gulp:
gulp
此时,浏览器会自动打开 http://localhost:3000/ 并显示您的 index.html 文件。您可以在 css 和 js 文件夹中添加或修改文件,Gulp 将自动检测并重新打包它们。
当您想要生成静态文件时,可以运行以下命令:
gulp dist
该命令将创建一个名为 dist 的文件夹,其中包含压缩后的 HTML、CSS 和 JavaScript 文件。
以上便是如何使用 Gulp 实现纯 HTML、CSS、Bootstrap 的打包。希望对您有所帮助!
我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。