Wes Bos Modern workflow and tooling for frontend developers

最新推荐文章于 2024-12-26 14:02:43 发布

原创最新推荐文章于 2024-12-26 14:02:43 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

视频教程笔记同时被 3 个专栏收录

53 篇文章

订阅专栏

IT 人物

3 篇文章

订阅专栏

其他开发人员技术与经验分享

3 篇文章

订阅专栏

本文深入探讨了前端开发中关键工具的作用与应用，包括Webpack的高效代码打包，Babel的新版JavaScript转译，以及PostCSS-cssnext实现最新CSS语法的即时兼容。同时介绍了Browsersync在开发过程中的实时更新功能，助力开发者提升效率。

B 站视频：https://www.bilibili.com/video/av10963133

Any time invested in tooling should be paid back by greater efficiency and better, more resilient code.

For large JS Apps:

Webpack is in very active development. Huge barrier to entry, but huge possible gains!

Variable is added into CSS language.

Babel is used to compile newer JavaScript code into older JavaScript code to ensure browser compatibility.

What is cssnext?

PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms new CSS specs into more compatible CSS so you don't need to wait for browser support.

From <https://cssnext.github.io/>

https://www.browsersync.io/

3. Start Browsersync

A basic use is to watch all CSS files in the css directory and update connected browsers if a change occurs. Navigate your terminal window to a project and run the appropriate command:

Static sites

If you’re only using .html files, you’ll need to use the server mode. Browsersync will start a mini-server and provide a URL to view your site.

browser-sync start --server --files "css/*.css"

Dynamic sites

If you’re already running a local server with PHP or similar, you’ll need to use the proxy mode. Browsersync will wrap your vhost with a proxy URL to view your site.

browser-sync start --proxy "myproject.dev" --files "css/*.css"

From <https://www.browsersync.io/>