前端速学成财:第十四课-实战演练:用gulp+webpack构建用户登录(1)

最新推荐文章于 2017-12-23 16:04:26 发布

SxinBoss

最新推荐文章于 2017-12-23 16:04:26 发布

阅读量594

点赞数 1

分类专栏：前端速学成财

本文链接：https://blog.csdn.net/sxinboss/article/details/52252819

版权

前端速学成财专栏收录该内容

14 篇文章 0 订阅

订阅专栏

登录页面,基本要素如下:
1.页面展示
2.基本脚本判断
3.后端交互

为了逼格,我们开始创建文件夹层级.
在项目根目录下创建

src
  --main.js
  --tpl
    --login.html(后缀随意)

注意:一旦发布到生成环境,以上文件是不需要上传到服务器上的

1.利用我们之前学习的gulp-webpack把JS编译
2.利用gulp把tpl下面的文件生成到build/html里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>用户登录</h2>
<div>用户名</div>
<div><input type="text" id="txtUserName"></div>
<div>密码</div>
<div><input type="password" id="txtUserPwd"></div>
<div>
    <button id="btnLogin">登录</button>
</div>
<!--本节课引用js先写死在这 -->
<script src="../js/build.js"></script>
</body>
</html>

main.js

var btnLogin=document.getElementById("btnLogin");
btnLogin.onclick=function () {
    alert("登录测试");
}

webpack.config.js

module.exports=
{
    entry:[    //entry是入口文件 可以多个
        __dirname+'/src/main.js'
    ],
    output:{
        path:__dirname+'/build/js',
        filename:'build.js'
    }
}

gulpfile.js

//生成JS文件
gp.task('build-js',function () {
    gp_webpack(webpack_config, webpack)
        .pipe(gp.dest('./build/js'));

});

//最终生成
gp.task('run',['build-js'],function () {
    gp.src(['./src/tpl/*.html'])
        .pipe(gp.dest('./build/html'));
})

运行
gulp run

SxinBoss

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端速学成财:第十四课-实战演练:用gulp+webpack构建用户登录(1)

登录页面,基本要素如下: 1.页面展示 2.基本脚本判断 3.后端交互为了逼格,我们开始创建文件夹层级. 在项目根目录下创建src --main.js --tpl --login.html(后缀随意)注意:一旦发布到生成环境,以上文件是不需要上传到服务器上的1.利用我们之前学习的gulp-webpack把JS编译 2.利用gulp把tpl下面的文件生成到build/html
复制链接

扫一扫