前端工程化已经成为前端开发中的一个不可逆转的趋势,目前市场上也有很多的前端工程化工具可供我们选择。但是这些工具中有很多都需要手动配置,而 frontools-cli 这个 npm 包可以帮助我们自动生成工程化框架,提供给我们完整的工具链。
启动工程
首先,我们需要在本地全局安装 frontools-cli:
--- ------- -- -------------
接着,在终端中输入以下命令:
--------- ----
这样就可以在当前目录下创建一个名为“frontools”的文件夹,我们可以看到里面已经自动生成了一些必要的工程文件和目录。例如:
package.json
工程配置文件gulpfile.js
gulp 工程配置文件src
目录存放我们项目的源代码build
目录存放生成的代码
为了启动工程,我们需要在终端输入以下命令:
--- --- -----
这样我们可以在浏览器中看到我们生成的工程页面。
使用 gulp
frontools-cli 依赖 gulp 来帮助我们自动化构建。因此,我们需要掌握一些 gulp 配置技巧。
接下来,我们来简单介绍一下如何在 gulpfile.js
中使用 gulp 构建任务。例如,在 gulpfile.js 下添加以下代码:
----------------- -------- -- - ------ ----------------------------- ------------ ------------ ------------ --- ----------------------------- -------------------------- ------- ---- ---- --- ------------------------- -------- -- - ------------- ------- - -------- ----- - --- --- -------------------- ----------------- -------- -- - ------------------------------- ---------- -------------------------- -------------------- ---
以上代码中,我们可以看到我们定义了三个 gulp 任务:
sass
任务:该任务用于编译 scss 文件,并压缩代码。同时该任务在编译完成后可以静态注入样式至浏览器中。browser-sync
任务:该任务用于启动浏览器同步服务。default
任务:该任务用于监听 scss 文件点击时直接执行 sass 任务,也可以更新页面。
结论
到此为止,我们已经学习了如何使用 npm 包 frontools-cli 来生成工程化框架,并且也了解了如何使用 gulp 来构建任务。希望这篇文章可以帮助你更快地掌握前端工程化的知识。
示例代码
源代码仓库请见 https://github.com/evrone/frontools。
如何运行示例工程:
- 在终端中,
git clone https://github.com/Evrone/frontools.git
。 - 进入 frontools 主文件夹
cd frontools
。 - 安装依赖项
npm install
。 - 运行
npm run start
。
Enjoy!
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005578e81e8991b448d48b7