前言
在做纯静态页面开发的过程中，难免会遇到一些的尴尬问题。比如：整套代码有50个页面，其中有40个页面顶部和底部模块相同。那么同样的两段代码我们复制了40遍（最难受的方法）。然后，这个问题就这样解决了。再然后，产品经理看了几遍后突然说顶部的某块需要改改设计。。。突然感觉好尴尬~~（心里是万马奔腾~），然后呢？然后就期待下一次的万马奔腾！！！
虽然类似问题的解决方案很多，但是纯前端，不用各种框架的情况下，一种比iframe更靠谱的解决方案莫过于用像gulp这样的构建工具来完成。虽然在体验上也许会有一点小小的瑕疵（每次改完文件要预览，都需要先gulp一下），但是也并非是不能忍受。毕竟我们想要的仅仅是改一改某公共模块就能达到解决40个页面的目的。
gulp简介
gulp是一个自动化构建工具。在开发过工程中，能够使用gulp对项目进行自动构建，大大提高工作效率。
安装gulp
在安装gulp之前先要确认已经正确安装了node.js，然后在项目根目录下安装gulp：
$ npm install gulp
举例的开发环境配置：
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\" rel=\"external nofollow\" > <link rel=\"stylesheet\" href=\"css/template.css\" rel=\"external nofollow\" > <link rel=\"stylesheet\" href=\"css/news.css\" rel=\"external nofollow\" > </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文件的代码，这样才能更模块一点。
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。
暂无评论内容