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