本帖最后由 neekin 于 2017-12-29 11:57 编辑
继续上次的,想要使用gulp,得先熟悉gulp的api, gulp.src(globs[, options])读取符合参数条件文件,加载到pipe的管道里,并对文件进行处理 gulp.dest(path[, options])将pipe管道里的文件,写入到指定路径下,并输出所有读取到的数据,如果某文件不存在,将会自动创建它 gulp.task(name[, deps], fn)gulp任务 gulp.watch(glob[, opts], tasks)监视文件,并且可以再文件发生改动的时候做一些事情. 好了,知道以上4个api,配合一些gulp的插件,就可以完成负载的前端构建化工程了. 还是拿上次的项目,如果你没有,请参考咱们的第一篇文章 运行cmd或者终端,到项目的目录下,运行 [Shell] 纯文本查看 复制代码 npm install gulp-ejs --save-dev
ejs是一种js模板引擎,常用在node.js的后台开发中,现在我们利用它开发,可以将html代码实现模块化,然后生成真正的纯静态HTML.
安装完毕后,我们在gulpfile.js里写上 [JavaScript] 纯文本查看 复制代码 var gulp = require('gulp');
var ejs = require('gulp-ejs')
gulp.task('default', function() {
return gulp.src("./src/*.ejs")
.pipe(ejs({ msg: 'Hello Gulp!' }, {}, { ext: '.html' }))
.pipe(gulp.dest("./dist"))
})创建一个src文件夹,并在里面创建一个名为index.ejs的文件,写入如下内容 [HTML] 纯文本查看 复制代码 <!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%= msg %>
</body>
</html>
最后你的目录结构应该是这样的 然后在cmd或者终端输入 gulp 没有报错的情况下,会在当前目录下多出了一个dist目录,而里面就会有有一个index.html. 好了,初步完成一个完整的并可用的gulp任务. 接下来,我们简单的利用ejs引擎打造一个可以模块化开发的html 首先,同样的在src目录下,创建一个partial目录,并且在里面创建两个文件 header.ejs和footer.ejs,并分别写入: [Shell] 纯文本查看 复制代码 #header.ejs
<header>头部</header>
#footer.ejs
<footer>脚部</footer> 然后稍微修改下index.ejs [HTML] 纯文本查看 复制代码 <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title></head><body>
<%include partial/header.ejs %>
<%= msg %>
<%include partial/footer.ejs %></body>
</html>
然后在cmd运行gulp,就帮我们生成了一个完整的html,今天就大功告成了,Yeah!!!
| 
收藏
淘帖
踩
