在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题。比如:整套代码有 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 lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
- <title></title>
- <link rel="stylesheet" href="CSS/comm.css?v=1.13">
- <link rel="stylesheet" href="css/template.css">
- <link rel="stylesheet" href="css/news.css">
- </head>
- <body>
- @@include('../Layout/head.html')
- <div class="news">
- </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