黑马程序员技术交流社区

标题: 【广州前端】人生苦短 04 让gulp 给前端人生一丢丢色彩 [打印本页]
作者: neekin    时间: 2018-1-4 16:53
标题: 【广州前端】人生苦短 04 让gulp 给前端人生一丢丢色彩
本帖最后由 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 完美运行.





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2