jdf2e / jdf

🛠️京东前端自动化构建工具

关于JDFX

JDFX是京东前端团队自主研发的一款自动化构建工具，目的是合理、快速和高效的解决前端开发中的工程和项目问题，核心集成了本地调试、本地构建、远程布署、代码生成等一系列开发命令工具。

安装使用

• [email protected]到最新LTS版本可用

$ npm install jdfx -g

• 执行jdf -V，测试是否安装成功（注意是大写的V）

• 快速开始

• 配置config.json

更新日志

完整日志

3.4.13 / 2020/11/20 18:34:00

• [fix] 修改node-sass版本，修复node-sass更新到5.0.0后无法在node 8安装的问题。

说明文档

• 示例安装
• 命令文档
• 配置文档
• api调用文档
• css优化策略
• css雪碧图
• smarty模版
• tpl模版
• vm模版
• widget说明
• widgetOutputName标签
• 插件模块

使用攻略

• 文件路径拼写说明
• 移动端页面开发

功能介绍

跨平台

• 完美支持windows、mac、linux三大系统

项目构建

• 生成标准化的项目文件夹
• 支持本地联调，本地编译，测试预览等开发流程
• 每个项目拥有独立的配置文件，按选项统一编译

模块开发

• 可快速方便的对模块进行创建，引用，预览，安装和发布
• 通过积累，可形成完全符合自己业务的模块云服务
• 支持将vm和smarty模版编译为html
• 支持将sass和less编译为css
• 支持velocity语法
• 支持ES6(需要将js文件后缀改为.babel)

项目输出

• 自动将页面中的js、css引用转换成combo请求格式
• 自动压缩优化js、css、图片文件
• 默认给所有静态资源添加CDN域名
• 支持cmd规范，自动提取文件id和dependencies，压缩时保留require关键字
• 自动生成css精灵图，并更新background-position属性值
• 自动生成base64编码
• 自动给css样式添加相应的浏览器前缀
• 支持图片生成webp格式，并更新相关css图片链接
• 压缩css、js、图片文件，并且可根据当前项目中的文件数量自动决定是否启用多线程进行压缩，当前的数量阀值是200
• 自动给js，css文件的内容头部添加时间戳，方便查看
• 文件编码统一输出为utf8

项目联调

• 一键上传文件到测试服务器，方便其他同学开发预览

本地服务

• 支持开启本地服务器，方便调试
• 支持本地静态文件预览，内置本地开发调试服务器，以及当前目录浏览
• 支持实时监听文件，文件被修改时会自动编译成css，并刷新浏览器
• 内置browserSync
• 详细文档

辅助工具

• 支持html/js/css文件格式化
• 支持html/js/css代码压缩
• 支持html/js/css文件lint，代码质量检查

集成工具

• 在本地任意目录开启一个server静态服务器
• html/js/css文件lint代码质量检查
• html/js/css文件格式化
• csssprite图片合并

widget组件

• 详情请参考widget文档
• vm模版文档
• tpl模版文档
• smarty模版文档

编译器插件

• Sublime Text2 插件

jdf's Issues

html字符串拼接说明

注意：此说明仅适用于html、tpl、vm和smarty文件中的字符串拼接情况，并不适用于js文件中的字符串拼接

在html文件中拼接字符串时推荐使用以下格式，否则会产生输出html格式错乱的问题。

<h1 data-title="<p class='title'>多快好省</p>">京东商城</h1>

不推荐使用以下任何一种格式：

<h1 data-title='<p class="title">多快好省</p>'>京东商城</h1>

<h1 data-title="<p class=\"title\">多快好省</p>">京东商城</h1>

你问我它们之间有什么区别？其实就是单双引号位置的区别。双引号放在字符串最外层，里面如果需要引号请使用单引号。
问题原因是由于cheerio的处理机制引起的，具体解决方案正在排查。感谢loveky同学的反馈。

JDF常见问题说明

• 文件路径拼写说明
• html字符串拼接说明
• scss文件编译报错问题

文件路径拼写说明

jdfx对文件路径的拼写方式进行了一些调整，这里对各种情况进行一下说明。假设你的config.json中有如下配置：

{
    "projectPath": "jdf-test"
}

项目的目录结构如下所示：

jdf-test
├── config.json
├── html
     └── index.html
├── js
     └── a.js
     └── b.js
├── css
     └── style.css
     └──  i
          └── icon.png

1、相对路径

现在引用文件的时候你可以使用类似./，../，../../的相对路径表示方式，例如：

• 在html/index.html中引用了一个js文件：

<script src="../js/a.js"></script>

那么它就会被编译成：

<script src="//misc.360buyimg.com/jdf-test/js/a.js"></script>

2、以/开头的绝对路径

以/开头的路径，会被认为是相对于项目根目录的绝对路径。例如还是上面html文件引用js的例子，我还可以写成：

<script src="/js/a.js"></script>

编译之后的结果还是：

<script src="//misc.360buyimg.com/jdf-test/js/a.js"></script>

3、使用require加载文件

用require加载文件，并且文件路径以字母开头的，会被直接添加上cdn然后返回，其它情况还是会以相对路径处理。例如：

require("jdf/2.0.0/ui/dialog/1.0.0/dialog");
require("a.js");

然后它们会被编译成：

require("misc.360buyimg.com/jdf/2.0.0/ui/dialog/1.0.0/dialog");
require("misc.360buyimg.com/a.js");

相要引用当前目录的文件，必须加上./，例如：

require("./a.js");

4、使用seajs.use加载文件

用 seajs.use加载文件，文件路径以字母开头的，会被直接添加cdn然后返回，其它情况还是会以相对路径处理。例如：

seajs.use(["jdf/2.0.0/ui/dialog/1.0.0/dialog"]);

然后会被编译为：

seajs.use(["misc.360buyimg.com/jdf/2.0.0/ui/dialog/1.0.0/dialog"])

5、以http://、https://和//开头的绝对路径地址

针对此类绝对路径，jdfx不做任何处理。

jdf只有创建和使用，那么我想问怎么没有查看呢？

我看好多地方都用了jdf/这个文件路径，也有一些公用库，比如jquery,seajs等库；为什么就没有一个地址查看jdf这个文件下或者用jdf上传之后这个文件下的所有文件呢？方便我直接用，而不是再次自己上传一个jquery，seajs等文件；很多公用插件明明已经有了，但不除了上传人知道引用路径其他人却只能再次上传一次，这样会导致重复文件垃圾！

移动端开发调试说明

一直以来，移动端的页面开发调试就是一个麻烦事情，想要实时预览页面效果并且debug更是很麻烦。jdfx也在努力解决这个问题，并且内置了browserSync，使您开发，预览，调试简单到只需一条命令即可。

1、安装猎豹wifi

这个不用多说，安装就是了。注：如果电脑和手机处于同一个局域网中，可忽略1，2两步。

2、连接手机

开启一个热点，并把手机连接到此热点上。

3、使用jdf调试

• 执行jdf b -o命令打开项目列表，用手机扫描右上角的二维码，即打开一个和电脑上一模一样的页面。
• 此时，你无论操作电脑还是手机，它们的响应都会是同步的。包括：切换目录，滚动页面等。
• 你在电脑上编写代码，只要保存，手机上的页面就会实时刷新。
• 现在还等什么，愉快的开始写代码吧。

4、内置的weinre

• 细心的你会发现，在浏览器中默认打开的是下面第一组External 对应的地址。如果你在浏览器中输入UI External 对应的地址，会打开一个很漂亮的操作界面。
• 在左侧找到Remote Debug菜单，点进去开启Remote Debugger (weinre)，即可开启weinre调试模式，接下来您也就应该知道怎么用了。

[JDFX] Access URLs:
 ------------------------------------
       Local: http://localhost:8081
    External: http://10.0.16.115:8081
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.16.115:3001
 ------------------------------------

Can\'t load the addon

问下这个报错是什么问题，运行 jdf build 报的

开发模式忽略了test文件夹

在 /jdfx/lib/VFS/fileType.js文件24行，忽略了 test 文件和文件夹。
某些情况可能还是想给文件夹起名test的，想问下开发开发模式忽略test文件夹的原因？

scss文件编译报错说明

.test {
	background :url(//img12.360buyimg.com/da/jfs/t1708/343/1355811714/2006/812516d1/55e511a9N42e564c7.jpg) no-repeat left center;
	.a{
		width: 235px;
		height: 100px;
	}
}

当你的css文件有以上类似代码时，输出时有可能会抛出以下错误：

[11:27:14] ERROR Error: Invalid CSS after "	.a": expected ")", was "{"
        on line 3 of css/popupNotice.scss
>> 	.a{
   -^

但是，请莫慌！解决办法有以下几种方式：

1、给背景图片路径添加上http协议

.test {
	background :url(http//img12.360buyimg.com/da/jfs/t1708/343/1355811714/2006/812516d1/55e511a9N42e564c7.jpg) no-repeat left center;
	.a{
		width: 235px;
		height: 100px;
	}
}

2、给背景图片路径添加上引号

.test {
	background :url('//img12.360buyimg.com/da/jfs/t1708/343/1355811714/2006/812516d1/55e511a9N42e564c7.jpg') no-repeat left center;
	.a{
		width: 235px;
		height: 100px;
	}
}

3、在background下面添加一条其它的css代码

.test {
	background :url(//img12.360buyimg.com/da/jfs/t1708/343/1355811714/2006/812516d1/55e511a9N42e564c7.jpg) no-repeat left center;
	width: 100px;
	.a{
		width: 235px;
		height: 100px;
	}
}

问题原因是由于node-sass编译引起的，目前已经反馈问题给官方作者。感谢loveky同学的反馈。