思路
希望有一个站点可以归并技术文章、产品探索、生活记录和项目代码。
技术文章 Hexo 活跃齐全的生态的确很诱人,但通过 Github 管理文章、图片资源其实并不是很优雅。再者,存在流通和传播上的问题。现有的专栏平台支持标签和交流功能,也可手动设计标题代替类别目录,够够的,于是选择了 segmentfault。
产品探索研究一些好用的应用,个人对产品的思考,记在知乎专栏。
生活记录日志、画、书音影,豆瓣再合适不过。
项目代码自然是 GitHub。
个人站点即一个集中入口,简单明了的首页 + 个人介绍页,完毕。
开发流程
在 iPad 上画了个草图,四个明晃晃的入口,要有 Logo。
各种分辨率的屏上表现不差劲,用 SVG。
资源请求尽量简单,SVG 样式可控,svg-sprite,那得上 gulp 了。
gulp 处理完的 symbol 要插入页面,加上入口项复用,用模板吧,熟悉的是 handlebars。
既然上了 gulp,干脆 SCSS,livereload,dev-server 都搞一搞。
为什么一个简单的页面要搞那么复杂,练手而已。
开发记录
gulp4 的更新
gulp 默认装了 4.0.0 的版本,很久没关注。
增加 gulp.series 和 gulp.parallel
gulp 默认最大化并行执行任务,以往需要顺序执行任务时,需要借助辅助插件 run-sequence 之类。上述两个方法提供串行和并行选择,同时 gulp4 中不再支持 [task] 写法,必须使用上述两个方法代替。
gulp.series(‘clean’, ‘build’); // 先执行 clean task,再执行 build task
gulp.series(‘clean’, function () {
// do some things
});
gulp.parallel(‘watch’, ‘connect’) // 同时执行 watch 和 connect
gulp.series(‘clean’, gulp.parallel(‘styles’, ‘scripts’)) // 先执行 clean,然后 styles + scripts
gulp.watch(‘src/**/*.js’, [‘scripts’]) // error: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
异步任务需要结束信号
当任务中可能有异步代码(比如 watch,比如 dev-server),需要显示发出异步完成信号
在 Gulp 3.x 中,你可以在不这样做的情况下离开。如果您没有显式地发出异步完成信号,则只会假设您的任务是同步的,并且在任务函数返回后立即完成。Gulp 4.x 在这方面更加严格。您必须明确表示任务完成。
支持的写法挺潮的
DONE
项目仓库:https://github.com/curlywater… 线上效果:https://curlywater.github.io/
主内容区布局
豆瓣卡片动画
TODO
页脚设计
Github 卡片动画
单位转换
移动端动效