[ 前端实习日记 ] 构建静态页面基础架构

lidashuang 发布于2019-08-21 10:35 / 764人阅读

以前我们敲静态页面都是写好html，css, js，然后再去刷新浏览器，艾尼马又不行，有重新写过再刷新，一个页面下来按chrl+r的次数可让你的键盘多活好几天，要不会刷新快捷按钮那不得手残了都。
后来，grunt,gulp等工具应运而生，当然它们不止这个功能，但却很好地减轻了我们的负担。这篇文章介绍一些如何使用这些工具使构建页面变得简单高效。这只是个人的目前在用的不成熟的方案，更专业的还请参考百度FIS。

1.需要哪些工具？

工具	作用
nodejs	提供执行环境
gulp / grunt	自动化
sass	css预编译
compass	sass工具库
bower	前端框架/库管理

2.建一个合理的项目目录

项目的目录结构也是很有讲究的，目录结构好的话可能事半功倍，来看看我的目录结构：

+++ Project　　　　　　　　　主目录

　　+++ dist　　　　　　　　　　　发布代码目录
　　　　+++ js　　　　　　　　　　　　产出js
　　　　+++ css　　　　　　　　　　　　产出css
　　　　+++ imgs　　　　　　　　　　　产出images
　　　　+++ libs　　　　　　　　　　　项目以来框架/库
　　　　+++ pages　　　　　　　　　　　产出页面
　　　　
　　+++ src　　　　　　　　　　　生产代码目录
　　　　+++ js　　　　　　　　　　　　　源js
　　　　+++ img　　　　　　　　　　　　　源图片
　　　　+++ sass　　　　　　　　　　　　源css
　　　　+++ pages　　　　　　　　　　　源页面
　　　　+++ public　　　　　　　　　　复用页面
　　　　
+++ node_modules　　　　　　　gulp组件
+++ gulpfile.js　　　　　　　　gulp任务配置
+++ package.json　　　　　　　gulp插件管理

3.这些工具做什么

3.1 ： nodejs
Node 是一个服务器端 JavaScript 解释器，提供模块管理，为后面用到的gulp，grunt，bower等提供了一个执行环境。当然不止这些功能。
3.2 ： sass
提供css预编译，css的函数式编程，方便快捷，有趣。
3.3 ： compass
sass的工具库，相当于js与jquery的关系，compass为sass提供了丰富的插件模块，rest，css3,layout,让你编写sass更加快捷。sass为css提速，compass为sass提速，组合的力量还是蛮大的。
3.4 ： gulp / grunt
gulp和grunt，用过两者之后，我更倾向于gulp，因为gulp配置任务简单，和grunt不是一个量级的。
3.5 ： bower
包依赖管理工具，需要任何框架的时候，我们不必再到网上去下载再使用了，直接使用bower命令即可下载使用，还解决各个库之间的兼容性问题，比如bootstrao3.0需要jquery1.9.1以上的版本，则破环这个关系之后它会智能提醒你。但目前我还只是把它当作下载器，所以目录中并没有bower的管理目录。

4.重点是gulp/grunt

这里就使用gulp举例说明了。

gulp为我们提供了丰富的组件，那我们构建页面会需要哪些组件：

browser-sync ：功能强大，配置gulp服务器，自动刷新
gulp-sass ：编译sass
gulp-file-include ：使静态页面具有文件访问能力，实现页面模块复用
gulp-rename ：文件重命名
gulp-concat ：文件合并
gulp-uglify ：文件压缩
gulp-imagemin ：图片压缩

不完全，不详细，仅供记录，具体请点击文章各个连接学习。

云服务器 GPU云服务器 web前端实习构建架构前端构建构建架构微服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85813.html

前端面试日记（二）

摘要：面试时间晚上时长小时分钟公司，一面一简单的介绍下自己介绍的真的很简单。。。。。。二平时都是怎么学习前端的学习前端的话，我主要是以书籍为主然后是网站视频博客文档等学习理论，之后再通过代码实践。。。大概是在6月11号在Boss直聘投的简历，6月12号中午收到电话约的面试时间，刚开始说是13号晚上7点；后面可能时间有变，中午来了个电话说改到9-10点；怎么说算是第一次面试自己目标公司之一吧...

huayeluoliuhen 2019-08-02 16:02 评论0 收藏0
前端面试日记（二）

摘要：面试时间晚上时长小时分钟公司，一面一简单的介绍下自己介绍的真的很简单。。。。。。二平时都是怎么学习前端的学习前端的话，我主要是以书籍为主然后是网站视频博客文档等学习理论，之后再通过代码实践。。。大概是在6月11号在Boss直聘投的简历，6月12号中午收到电话约的面试时间，刚开始说是13号晚上7点；后面可能时间有变，中午来了个电话说改到9-10点；怎么说算是第一次面试自己目标公司之一吧...

zombieda 2019-08-22 18:05 评论0 收藏0
11.24开篇-实习日记

摘要：号早上报道啦，简单地参观了一下公司四楼技术服务中心十四楼产品中心十七楼研发中心环境氛围都太棒了工作日报，有点小懒，暂且用图诉说每日工作内容吧哈哈各位看官，且看 ...

不知名网友 2021-11-29 10:50 评论0 收藏0
前端开发在淘宝主要是在做什么事情？

摘要：前阵子，有些师弟师妹问我在淘宝，前端开发主要是在做什么事情作为一个在淘宝已经工作年的老兵，我想我有资格来全面地回答一下这个问题，并通过这个机会向外部介绍一下我们团队的同学。以上便是我们在淘宝主要在做的事情。前阵子，有些师弟师妹问我：在淘宝，前端开发主要是在做什么事情？作为一个在淘宝已经工作 5 年的「老兵」，我想我有资格来全面地回答一下这个问题，并通过这个机会向外部介绍一下我们团队...

liuyix 2019-08-23 16:29 评论0 收藏0