-前言
在这里肯定有很多人认为gulp有官方的文档,并且还有中文文档,为什么还要看你的文章了,我想说的是,我写着篇文章并不是要和gulp文档比,我只是对所学的知识的总结和消化,给自己存货,并且有些人可能看不懂gulp官方文档,我这里都是大白话更易于理解。给那些和我遇到同样的问题的你们一些解决问题的办法,大佬请绕道,不浪费各位大佬的时间。
————————————————————————分界线—————————————————————————-
正题:
近期老大给的任务是给一个公司弄PC端网页,开始一听到PC端,我第一时间就惊恐的猜测要不要兼容,仁慈的老大说只要兼容到IE8就够了,大松了一口气;PC端的网页肯定是有很多重复的内容,例如header,banner,footer等等,如何重复利用这些组件呢?
复制粘贴
优点:简单,无脑操作,赋值粘贴;
缺点:一旦某个地方改错了,又要从新从头复制粘贴,整个过程心惊胆跳。
iframe
优点:方便,快捷,直接导入html;
缺点:不安全,容易被劫持;不能操作其中的Dom,而且不易于SEO,看情况使用iframe。
Vue
扫描二维码关注公众号,回复: 197518 查看本文章优点:组件化、数据驱动、易于管理、结构清晰;
缺点:不适用与PC端,适用于移动端的SPA单页应用。
$_ajax
优点:方便,操作简单;
缺点:需要请求,跨域。
打包工具-gulp(重点-今天刚学)
因为是今天所学,所以目前只看的到优点:打包方便,插件多,功能多,操作方便;
—————————————————————-再次分界线————————————————————————-
gulp
1.全局安装 gulp:
$ npm install --global gulp
2.作为项目的开发依赖(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的其他内容。。。。。。。。