[ 前端练习日志 ] 构建静态页面基本架构

之前我们敲静态页面都是写好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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞