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

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

1.需要哪些工具?

工具作用
nodejs提供执行环境
gulp / grunt自动化
sasscss预编译
compasssass工具库
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 :图片压缩

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

    原文作者:kraaas
    原文地址: https://segmentfault.com/a/1190000002995392
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞