前端构建和模块化工具-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