本帖最后由 neekin 于 2018-1-4 16:58 编辑
当我们学会使用ejs模板的时候,我们总觉得这个世界缺少了些什么. 世界应该更美妙点,一些标签,再加点模块化,哪能满足这个多姿多彩的世界呢. 所以我们就要给我们的gulp任务添加一点对CSS样式的处理. 希望你还是保持了上次的目录结构 我们首先在src创建一个目录,取名叫 style; 再在style文件里创建一个文件 style.css; 并且写入一点内容
[CSS] 纯文本查看 复制代码 body{
background:#0094ff;
}
然后在partial目录里创建一个style.ejs文件,里面的内容为 [HTML] 纯文本查看 复制代码 <link rel="stylesheet" href="styls/styls.css"> 最后修改我们的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>
<%include partial/style.ejs %>
</head>
<body>
<%include partial/header.ejs %>
<%= msg %>
<%include partial/footer.ejs %>
</body>
</html>
最后运行gulp bingo 完全没有效果.哈哈,因为我们忘了我们的主角gulpfile.js了,忘了给它写个任务,始终别忘记gulp是任务驱动的构建工具. 给我们的gulpfile.js,写入一些内容,最后结果应该是这样的
[JavaScript] 纯文本查看 复制代码 var gulp = require('gulp');
var ejs = require('gulp-ejs')
gulp.task('default', ["style"], function() {
return gulp.src("./src/*.ejs")
.pipe(ejs({ msg: 'Hello Gulp!' }, {}, { ext: '.html' }))
.pipe(gulp.dest("./dist"))
})
gulp.task('style', function() {
return gulp.src('./src/**/*.css')
.pipe(gulp.dest("./dist"))
})
保存后,我们再次运行 gulp,OK 完美运行.
| 
收藏
淘帖
踩
