江西鄱阳专业做网站,wordpress网站怎么进入后台,网站投票链接怎么做的,免费网站建设网站前言#xff1a; 在做纯静态页面开发的过程中#xff0c;难免会遇到一些的尴尬问题。比如#xff1a;整套代码有50个页面#xff0c;其中有40个页面顶部和底部模块相同。那么同样的两段代码我们复制了40遍#xff08;最难受的方法#xff09;。然后#xff0c;这个问题就…前言 在做纯静态页面开发的过程中难免会遇到一些的尴尬问题。比如整套代码有50个页面其中有40个页面顶部和底部模块相同。那么同样的两段代码我们复制了40遍最难受的方法。然后这个问题就这样解决了。再然后产品经理看了几遍后突然说顶部的某块需要改改设计。。。突然感觉好尴尬~~心里是万马奔腾~然后呢然后就期待下一次的万马奔腾 虽然类似问题的解决方案很多但是纯前端不用各种框架的情况下一种比iframe更靠谱的解决方案莫过于用像gulp这样的构建工具来完成。虽然在体验上也许会有一点小小的瑕疵每次改完文件要预览都需要先gulp一下但是也并非是不能忍受。毕竟我们想要的仅仅是改一改某公共模块就能达到解决40个页面的目的。 举例的开发环境配置 Windows在iis里搭建项目方便在浏览器中预览使用webstorm编辑器习惯了感觉比记事本还是要好用很多还可以忽略某些文件夹。 MacOs 在apache里搭建项目方便在浏览器中预览使用webstorm编辑器习惯了感觉比sublime用得更liu一点还可以忽略某些文件夹。 必备插件 gulp-file-include 技能描述 将需要模块化的html代码放到一个独立的html文件中。如head.html 然后在需要使用的地方使用include(./head.html) 文件路径自定义~~ 最后配置好gulp并执行 使用Demo html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1, user-scalable0title/titlelink relstylesheet hrefcss/comm.css?v1.13link relstylesheet hrefcss/template.csslink relstylesheet hrefcss/news.css
/head
body
include(../Layout/head.html)
div classnews/div
include(../Layout/foot.html)
/body gulp var gulp require(gulp), fileinclude require(gulp-file-include); gulp.task(prew, function () { gulp.src([*.html,pages/*.html, !node_modules/**/*.html]) .pipe(fileinclude({ prefix: , basepath: file })) .pipe(gulp.dest(prew)); gulp.src([**/**.js, !node_modules/**/*]).pipe(gulp.dest(prew/)); gulp.src([**/**.css, !node_modules/**/*]).pipe(gulp.dest(prew/)); gulp.src([**/*.jpg, **/*.jpge, **/*.png, **/*.gif, **/*.bmp, !prew/**/*, !node_modules/**/*]).pipe(gulp.dest(prew/)); }); gulp.task(watch,function () { gulp.watch([pages/*.html,css/*.css,img/**/*,!prew/**/*.html,!prew/**/*.css,!prew/img/**/*], [prew]); }) 技能介绍 执行 gulp prew 会将文件复制到prew目录下并生成对应的完整html文件。注此处将pages文件夹下的文件直接放到了prew根目录下并非prew/pages。根据需要自改配置 执行 gulp watch后gulp会建立一个监听进程在开发的时候每次修改文件后gulp会自动执行prew这样就不用每次都手动执行gulp prew然后再去刷浏览器。这是一招实用技能 最后 这套技能的要点不在于如何使用gulp而是怎么去划分模块。每个模块除了有html代码以外其实还可以有js、css代码或者引入js、css文件的代码这样才能更模块一点。 转载于:https://www.cnblogs.com/aser1989/p/8206555.html
