实践教程：使用Gulp和Webpack构建用户登录系统

### 项目结构概览
首先，让我们了解项目的整体结构。项目包含两个主要目录：`src` 和 `build`。`src` 目录存放所有的源文件，而 `build` 目录则是编译后的输出文件所在位置。

#### 登录页面模板
`tpl/login.html` 文件是登录页面的模板，其核心HTML结构如下：
```html

用户登录

用户名：

密码：

登录

```

#### 控制脚本
`src/main.js` 文件负责处理登录按钮的点击事件，当前仅作为示例，弹出一个提示框显示“登录测试”。
```Javascript
var loginBtn = document.getElementById("loginBtn");
loginBtn.Onclick= function() {
alert("登录测试");
}
```

### 使用 Webpack 打包 Javascript
为了将 `main.js` 文件打包到 `build/js` 目录下，我们需要配置 `webpack.config.js` 文件：
```Javascript
module.exports = {
entry: ['./src/main.js'],
output: {
path: __dirname + '/build/js',
filename: 'build.js'
}
};
```
配置完成后，在命令行中运行 `webpack` 命令即可完成打包过程。

### 结合 Gulp 自动化构建流程
我们的目标是自动化地将 `src/tpl/login.html` 文件复制到 `build/html` 目录，并将 `src/main.js` 打包到 `build/js` 目录。这可以通过配置 `gulpfile.js` 来实现。

#### 配置 `gulpfile.js`
```Javascript
var gulp = require('gulp');
var gulpWebpack = require('gulp-webpack');
var webpack = require('webpack');
var webpackCOnfig= require('./webpack.config.js');

// 打包JS文件的任务
gulp.task('build-js', function() {
return gulp.src('./src/main.js')
.pipe(gulpWebpack(webpackConfig, webpack))
.pipe(gulp.dest('./build/js'));
});

// 定义默认任务，执行构建JS和复制HTML
gulp.task('default', ['build-js'], function() {
return gulp.src('./src/tpl/*.html')
.pipe(gulp.dest('./build/html'));
});
```

#### 执行构建
在命令行中运行 `gulp` 命令，Gulp 将自动执行定义的任务，完成文件的复制和打包。

### 测试结果
在浏览器中打开 `build/html/login.html` 文件，确保页面正常加载并能响应登录按钮的点击事件。