一个快速创建H5专题页的命令行工具,方便使用者使用构建工具进行无侵入式开发(即,可随时零成本脱离构建工具)。
注意:需要使用硬盘文件内容变动能在编辑器中及时体现出来的编辑器,尽量不要用Webstorm、IDEA这类IDE(这类IDE默认情况下会对文件进行一个缓存)。
王婆卖瓜系列:如果你想在项目中使用模块化的代码和组件,建议移步隔壁html5-cli,classic-cli是给那种传统的前端开发模式使用的,适用于页面非常简单的专题页面开发,那种就几个页面的纯展示性企业站也适用。
适用人群:
1、安装命令行工具
# 全局安装命令行工具
npm i -g classic-cli
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
)。.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 */
。这类注释不会在压缩时被移除,便于切换。
MIT.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。