Wes Bos Modern workflow and tooling for frontend developers

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/>