classic-cli

一、概述

一个快速创建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+新特性。

注:

  1. 该功能会自动忽略根目录下的如下目录(如有):node_modules、.开头的目录/文件(如.git、.gitignore)。
  2. 需要使用硬盘文件内容变动能在编辑器中及时体现出来的编辑器,尽量不要用IDEA这类IDE(这类IDE默认情况下会对文件进行一个缓存)。
  3. 本命令工具只会处理后缀名为.js(不包括.min.js)和.css(不包括.min.css)的文件,其他如.html文件、.png文件都不会被处理。

五、其他支持的特性和小技巧

  1. 对不希望被编译处理的.js和.css文件,可在后缀名前加上.min,变成.min.js、.min.css。
  2. 可以通过在.js、.css文件头部添加注释classic-compress: true或者classic-compress: false, 来告诉工具是否要对该文件进行压缩/解压缩处理(不涉及混淆,所示是个可逆向的过程)。如果不需要处理,不添加这些注释即可。
  3. 对于.css文件,压缩后代码中的常规注释会消失,如果需要在开发时解压缩还得重新加注释,为避免这个问题,添加注释时需要在/*后面加个!——即/*!,如/*! classic-compress:false */。这类注释不会在压缩时被移除,便于切换。

六、License

MIT。