前端构建和模块化工具-coolie
【前言】
假设你之前用过前端模块化工具：seajs。requirejs。
用过前端构建工具grunt、gulp,
而且感到了一些不方便和痛苦，那么你能够试试coolie
【coolie】
本文不是一篇介绍coolie的文章。而是偏向新手上手coolie的常见问题解答，
coolie相关：
社区文章：http://frontenddev.org/column/introduce-coolie/
git-book：http://coolie.ydr.me/index.html
【知识储备】
假设你没实用过前端模块化。没实用过前端构建，没有听过nodejs，
还请先百度google之，当初步了解以上内容。使用过一段时间在看这篇文章，
在使用coolie。你会发现coolie的长处所在。
【声明】
关于js模块化，前端构建的内容，使用的时间比較久，版本号比較旧，
仅仅是凭记忆说说。不是非常准确，可能如今这些工具已经非常完好了。
【能够做什么-模块化】
老生长谈的问题。请自行百度之，
简单的来说就是管理各个js，模块化的使用js。类似java中的import+jar。
能够看看这篇文章：http://uikoo9.com/blog/detail/java-vs-nodejs-reactjs-angularjs-requirejs-seajs
【能够做什么-构建】
假设你常常改动js，css，恰巧你们服务端会做缓存。
那你应该知道类似这样有多痛苦：jquery.js?v=1。
。。
上两张图，对照下构建前的项目，和构建后的项目。请自行意会：
这张图是正常的项目。当中html中假设要引入js，css，解决服务端缓存的办法就是?v=xxx，
每次改动都得改动版本。改动工具类js还得批量替换版本。非常是痛苦。
这张是构建后的项目。你会发现几点：
全部静态资源文件名称编码化。
并且假设有改动。构建后这个编码的名称会自己主动改动，
结果就是html中的js，css照样写，对付服务端缓存，直接构建，
由于每次都不同。
【学习coolie】
请阅读顶部两个coolie链接内容，学习后開始自己上手，你大概会碰上以下这些问题。
【准备工作】
1.安装nodejs--百度去
2.安装coolie
运行npm install -g coolie
3.下载coolie样例
https://github.com/cloudcome/coolie-example/
【问题1-构建】
官网仅仅说了coolie build webroot-dev这个命令，
可是在哪里运行，在哪个文件夹下运行，？
我们想看看样例的文件结构：
事实上这个build命令就是去找coolie.json配置文件，
所以假设你cd到webroot-dev下的话，能够直接coolie build构建。
假设你在webroot-dev父一级文件夹。能够coolie build webroot-dev，
假设你在webroot-dev同级的还有一个目录test内。你能够coolie build ../webroot-dev。
也就是说coolie build path，这个path中要有coolie.json
【问题2-文件结构和配置文件】
不同于其它的一些构建工具，coolie中，仅仅要你遵循默认的文件结构，那coolie.json你基本是不须要改动的。
默认的文件结构如上图，
简单的说就是，按默认结构去开发，然后忘记coolie.json
【问题3-页面约定】
上面谈到文件结构约定，是为了构建方便，
那页面约定就是为了，构建能够正常工作和模块化正常工作。
css约定：
将要构建的css这样写：
<!--coolie-->
<link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/index.css">
<!--/coolie-->
写到两段凝视中间，不想构建的css则放到外头。
js约定：
<!-- mine --> <script coolie src="/static/js/coolie.min.js" data-config="./coolie-config.js" data-main="./index.js"></script>
用过模块化工具的人应该好理解。仅仅是coolie的路径有点绕。看看官网说明吧，
或者按约定文件结构照猫画虎吧。
【问题4-不想构建】
假设碰到不想构建的静态文件，请在coolie.json中配置，
coolie.json也就是之前说的须要忘记的东西。可是这个配置在我看来是唯一的用处，
【问题5-http以及绝对路径】
假设你习惯用直接打开html的方式看页面，那会发现非常多问题，
来吧跑起来看吧。用http看，然后页面全部静态文件请写绝对路径，
比如：/static/img/xx.png
也就是你的http訪问加上上面的路径能够正确看到图片。
怎样http？java。php，。net都有自己的方法，
前端也有，
请npm install -g sts
cd到webroot-dev
sts 8082就可以
【開始happy】
1.依照文件文件夹约定创建项目
2.依照页面约定開始写页面
记住上面的css和js约定就可以，
另外假设习惯使用jquery，bootstrap等工具框架，能够直接引入到页面。（赞~~）
同一时候在js中也能够直接使用$，再赞一个~~
3.查看开发效果
写完后。用上述sts 8082查看效果
4.构建
coolie build path
5.查看构建效果
cd到webroot-pro后sts 8083查看效果。
【为啥happy】
1.压缩&合并
压缩静态文件，降低每次请求文件大小
合并静态文件，降低请求次数
2.js模块化
从一堆js苦海中脱离出来，该干什么的js干什么。并且能够非常方便的找到它
3.构建
脱离服务端缓存和？v=xx的苦海
【很多其它】
很多其它文章，请訪问：http://uikoo9.com
