一、概述
一个快速创建H5专题页的命令行工具,方便使用者使用构建工具进行无侵入式开发(即,可随时零成本脱离构建工具)。
源码地址:https://gitee.com/bulls-cows/classic-cli。
注意:需要使用硬盘文件内容变动能在编辑器中及时体现出来的编辑器,尽量不要用Webstorm、IDEA这类IDE(这类IDE默认情况下会对文件进行一个缓存)。
二、适用人群
- 喜欢传统开发方式,觉得手动编译麻烦,但又希望写代码的时候可以有部分现代化的体验:自动刷页面、css加厂商前缀、ES6转ES5、代码压缩等。
- 希望源码就是要上线的代码,换句话说,希望编译产物就是源码,不想区分处理。
- 喜欢掌控代码,不喜欢构建工具生成的一堆堆的、乱七八糟的代码,但手动给CSS添加浏览器前缀是万万不能忍的。
三、用法
3.1、安装命令行工具
# 全局安装命令行工具 npm i -g classic-cli
3.2、使用
# 进入任一使用传统方式开发的项目根目录,或者进入一个新的空目录,然后执行下述命令 classic
四、核心功能说明
- 🎄 会自动将当前目录下后缀名为.js(不包括.min.js)的文件编译成ES5代码,并直接覆盖更新原始文件。
- 📲 会自动将当前目录下后缀名为.css(不包括.min.css)的文件做一些常见的兼容处理,并直接覆盖更新原始文件。
- 🌐 会自动启动一个本地服务,一旦有.html、.css或者.js文件更新会自动刷新页面。默认端口为8080,可以通过-p或者–port参数指定,如classic -p 8888。
- 🙈 若执行classic命令的当前工作目录为空目录(即内部不含任何文件、文件夹),默认会使用远程模版来创建本地初始项目结构,如果使用场地的网络不佳,可以通过-t local或–template local来指定使用本地模版。
- 💪 本地模版会自动生成几个常见目录和空文件。
- 🔥 远程模版自带rem响应式支持(默认1rem = 100px,750px宽的设计稿对应7.5rem宽度)。
- 👫 远程模板集成了polyfill.js、jquery.js、fastclick.js和vue.js,可以自行决定是否要通过script标签引入使用。
- 🏇 修改文件时自动刷新浏览器,方便查看效果。
- 🏏 可通过在文件头部添加classic-compress:true注释来压缩(仅压缩,不混淆,是可逆的,传false就可以逆向解压缩)js、css,加快页面加载速度。
- 🚀 可通过在文件头部添加classic-compress:false注释来自动格式化(美化)css、js代码,保持较统一的代码风格。
- 🦊 自动美化HTML代码。
- 🛠 借助babel,支持使用主流的ES6+新特性。
注:
- 该功能会自动忽略根目录下的如下目录(如有):node_modules、.开头的目录/文件(如.git、.gitignore)。
- 需要使用硬盘文件内容变动能在编辑器中及时体现出来的编辑器,尽量不要用IDEA这类IDE(这类IDE默认情况下会对文件进行一个缓存)。
- 本命令工具只会处理后缀名为.js(不包括.min.js)和.css(不包括.min.css)的文件,其他如.html文件、.png文件都不会被处理。
五、其他支持的特性和小技巧
- 对不希望被编译处理的.js和.css文件,可在后缀名前加上.min,变成.min.js、.min.css。
- 可以通过在.js、.css文件头部添加注释classic-compress: true或者classic-compress: false, 来告诉工具是否要对该文件进行压缩/解压缩处理(不涉及混淆,所示是个可逆向的过程)。如果不需要处理,不添加这些注释即可。
- 对于.css文件,压缩后代码中的常规注释会消失,如果需要在开发时解压缩还得重新加注释,为避免这个问题,添加注释时需要在/*后面加个!——即/*!,如/*! classic-compress:false */。这类注释不会在压缩时被移除,便于切换。
六、License
MIT。