最近想写一个项目，因为之前一直写后端，很少接触前端，所以这次会把前端学好。看完Yii框架，自带Bootstrap框架。起初，我想如何快速写一页。知道这一点就像剥洋葱一样，是学习制作工具的阶段。

让我告诉你一个非常令人沮丧的消息。调好大口工具后，发现Github上有很多这样的模板！做这件事花了我三天时间。给出一个关键词：自举4大口样板。嗯，还有一个网站，是我看了bootstrap的文档后找到的：https://vanillajstoolkit.com/plugins/

项目目录下的babelln/gulf file . babel . js :

//如果要编译babel，可以启用//const babel=require(' gout-babel ')；//const concat=require(' gull-concat ')；//const uglify=require('大口-uglify ')；const del=require(' del ')；const大口=require('大口')；const browser sync=require(' browser-sync ')；const sassCompile=require('大口-萨斯')；const server=browsersync . create()；const path={ script s : { src : ' src/scripts/*。js '，dest: 'dist/scripts' }，css: { src: 'src/scss/*。SCS '，dest : ' dist/CSS ' } }；//定义清理方式，将删除dist目录const clean=()=del([' dist '])；//定义要复制到dist目录的文件，其中一般APP使用的JS和CSS文件为const脚本文件=[path . scripts . src，' ' node _ modules/bootstrap/dist/JS/bootstrap . min . JS '。node _ modules/jquery/dist/jquery . min . js '，' node _ modules/popper . js/dist/UMD/popper . min . js ']；//babel//function scripts(){//return glaw . src(path . scripts . src，{ source maps 3360 true })//。pipe(babel())//。管道(uglify())//。pipe(concat(' index . min . js ')//。pipe(grave . dest(path . scripts . dest))；//}//将源代码文件复制到目标，并添加其他处理程序function scripts(){ return gout . src(script files)。pipe(grave . dest(path . scripts . dest))；}//重新启动web服务函数reload(完成){ server . reload()；done()；}//编译sass文件并生成结果文件函数sass(){ return gout . src([' node _ modules/bootstrap/scss/bootstrap . scss '，path . CSS . src])。管道(sasscompile())。烟斗(大口)。}//服务初始化，以当前目录babelln/作为网站的根目录。函数serve(done){ server . init({ server : { base dir : })。/'}});done()；}//定义要监控的文件const watchers=[path . scripts . src，' *。html '、path . CSS . src]；//定义watch函数，监视watch定义的文件，然后依次执行这些方法const watch=()=gought . watch(watch，gought . series(scripts，sass，reload))；//包装另一层，整个过程是清理，编译脚本，编译sass，初始化web服务，开始监控constdev=gulp.series(清理，脚本，sass，serve，watch)；//将默认方法公开给外部程序exports.default=dev这是基于grave的官方模板，最后还是可以用的。

最后放一张效果图

编译界面：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。