-前言
在这里肯定有很多人认为gulp有官方的文档，并且还有中文文档，为什么还要看你的文章了，我想说的是，我写着篇文章并不是要和gulp文档比，我只是对所学的知识的总结和消化，给自己存货，并且有些人可能看不懂gulp官方文档，我这里都是大白话更易于理解。给那些和我遇到同样的问题的你们一些解决问题的办法，大佬请绕道，不浪费各位大佬的时间。
————————————————————————分界线—————————————————————————-
正题：
近期老大给的任务是给一个公司弄PC端网页，开始一听到PC端，我第一时间就惊恐的猜测要不要兼容，仁慈的老大说只要兼容到IE8就够了，大松了一口气；PC端的网页肯定是有很多重复的内容，例如header，banner，footer等等，如何重复利用这些组件呢？
复制粘贴
优点：简单，无脑操作，赋值粘贴；
缺点：一旦某个地方改错了，又要从新从头复制粘贴，整个过程心惊胆跳。
iframe
优点：方便，快捷，直接导入html；
缺点：不安全，容易被劫持；不能操作其中的Dom,而且不易于SEO，看情况使用iframe。
Vue
优点：组件化、数据驱动、易于管理、结构清晰；
缺点：不适用与PC端，适用于移动端的SPA单页应用。
$_ajax
优点：方便，操作简单；
缺点：需要请求，跨域。
打包工具-gulp（重点-今天刚学）
因为是今天所学，所以目前只看的到优点：打包方便，插件多，功能多，操作方便；
—————————————————————-再次分界线————————————————————————-
gulp
1.全局安装 gulp：
$ npm install --global gulp2.作为项目的开发依赖（devDependencies）安装：（这里我另外安装了2个 less装换工具 和 内容拼接工具）
$ npm install gulp --save-dev
$ npm install gulp-less --save-dev
$ npm install gulp-file-include --save-dev 3.在项目根目录下创建一个名为 gulpfile.js 的文件：
// 导入模块 var后面的为你定义的模块的名称（啥都行，只要自己知道，最好符合规范取名）
var gulp = require('gulp')
var less = require('gulp-less')
var fileinclude = require('gulp-file-include')
// 在这里创建一个task任务 task('任务名称',要执行的操作)
gulp.task('less', function (cb) {
// .src 任务的目标文件位置
gulp.src('./demo.less')
.pipe(less())
// dest 将新的文件重新输出并且写入到某个文件夹中 文件被写入的路径是以当前设置的相对路径
.pipe(gulp.dest('./css'))
// 注意：可以写入多个文件， 如果没有这个文件夹，将会自动创建一个新的文件夹
// .pipe(gulp.dest('./dist'))
});
gulp.task('fileinclude',['less'],function () {
gulp.src(['page/*.html','!page/include/*.html'])
.pipe(fileinclude({
// 前缀
prefix: '@@',
// 路径
basepath: '@file'
}))
.pipe(gulp.dest('./dist'))
})4.最后在终端运行命令：
$ gulp less //gulp + 任务名运行完这些代码，然后就可以在./css路径下看到新生的文件
再给出我的文件夹目录：
解释下文件夹目录（常见的就不说了）：
dist（分配）: gulp打包后新生成的.html文件就放在了这里;
node_modules: gulp运行所需要的模块包；
page/include: 这里放置的是.html 公共的部分（用于拼接）；
page/demo2.html: 上面那个是公共的，那这个文件肯定就是不公共啦，是用来拼接产生不同的.html；
不直观，放出代码：
<body>
@@include('./include/header.html')
<!-- 不同的内容 -->
@@include('./include/footer.html')
</body>不要停继续：
demo.less: less文件；
gulpfile.js: gulp工具包配置文件；
package.json： node，模块版本的配置文件
关于gulp API 的.src .task .dest等等我已经够大白话的描述了，所以望大家（有耐心的大佬）指点有错的地方。
后期会继续更新gulp的其他内容。。。。。。。。