前端构建和模块化工具-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
前端构建和模块化工具-coolie的更多相关文章
- “流式”前端构建工具——gulp.js 简介
Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- 前端模块化工具-webpack
详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- (转载)前端构建工具gulp使用
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...
- 前端构建工具gulp
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...
- 【webpack学习笔记(一)】流行的前端模块化工具webpack初探
从开发文件到生产文件 有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...
- 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上
.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...
- 【webpack】流行的前端模块化工具webpack初探
从开发文件到生产文件 有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...
随机推荐
- 20155233 2016-2017-2 《Java程序设计》第5周学习总结
20155233 2016-2017-2 <Java程序设计>第5周学习总结 学习目标 理解异常架构 牚握try...catch...finally处理异常的方法 会用throw,thro ...
- Android改进版CoverFlow效果控件
最近研究了一下如何在Android上实现CoverFlow效果的控件,其实早在2010年,就有Neil Davies开发并开源出了这个控件,Neil大神的这篇博客地址http://www.inter- ...
- [译]使用chage来管理Linux密码过期时间的七个例子
本文译自 7 Examples to Manage Linux Password Expiration and Aging Using chage 本文主要介绍命令chage的使用,译文会对原文内容会 ...
- [转]Centos 安装Sublime text 3
本文简单介绍在CentOS上安装Sublime text 3, 转自:Centos 安装Sublime text 3 Step 1 :建立软件安装目录 # mkdir /opt # cd /opt S ...
- MySQL删除数据后磁盘空间的释放情况【转】
OPTIMIZE TABLE 当您的库中删除了大量的数据后,您可能会发现数据文件尺寸并没有减小.这是因为删除操作后在数据文件中留下碎片所致.OPTIMIZE TABLE 是指对表进行优化.如果已经删除 ...
- springcloud使用Hystrix实现微服务的容错处理
使用Hystrix实现微服务的容错处理 容错机制 如果服务提供者相应非常缓慢,那么消费者对提供者的请求就会被强制等待,知道提供者相应超时.在高负载场景下,如果不作任何处理,此类问题可能会导致服务消费者 ...
- React-Native 之 TabBarIOS
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- 【前端开发】关于闭包最通俗易懂的解释 for循环,定时器,闭包混合一块的那点事。
for循环,定时器,闭包混合一块的那点事. 1,对于一个基本的for循环,顺序输出变量值. for(var i = 1; i < 4; i++){ console.log(i);//结果不多说了 ...
- Python外部脚本调用Django项目Model表
在实际生产中有时候会出现这种情况,原本运行了一个Django项目,后面又需要一些外部脚本进行辅助,而这些脚本又不希望集成到项目当中,但是又需要用到Django项目的Model,这时候是无法像在项目当中 ...
- 2018-2019-2 网络对抗技术 20165301 Exp5 MSF基础应用
2018-2019-2 网络对抗技术 20165301 Exp5 MSF基础应用 实践原理 1.MSF攻击方法 主动攻击:扫描主机漏洞,进行攻击 攻击浏览器 攻击其他客户端 2.MSF的六个模块 查看 ...