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

之前我们敲静态页面都是写好html，css, js，然后再去革新浏览器，艾尼马又不可，有从新写过再革新，一个页面下来按chrl+r的次数可以让你的键盘多活好几天，要不会革新快速按钮那不到手残了都。
厥后，grunt,gulp等东西应运而生，固然它们不止这个功用，但却很好地减轻了我们的累赘。这篇文章引见一些怎样运用这些东西使构建页面变得简朴高效。这只是个人的现在在用的不成熟的计划，更专业的还请参考百度FIS。

1.须要哪些东西？

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 ：图片紧缩

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