来源于:https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b#.nvnd2vsd8

 

Front end build tools can be confusing even to experienced developers like me. The solution is to understand how they work — and work together — on a conceptual level.

This article presents my opinionated approach to making sense of front end build tools. Instead of diving into code, I’ll walk you through my mental model of how these tools work and what they accomplish.

Don’t be intimidated by the state of the art

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch… there are so many front-end build tools out there that it can seem impossible to keep up.

The key is not being intimidating. All of these projects are designed to make your life easier.

To understand the what, why, and how of these tools, you just need to grasp a few concepts.

Concept #1 — The core dichotomy of build tools is “installing vs. doing”

Build tools do two things:

  1. Install things
  2. Do things

The first question to ask yourself when confronting a new build tool is: “Is this tool intended to install things for me, or do things for me?”

“Installing” tools like npm, Bower, and Yeoman can install pretty much anything. They can install front-end libraries like Angular.js or React.js. They can install servers for your dev environment. They can install testing libraries. They even help you install other front end build tools.

 

In short, they install most any code-related things you can think of.

The “doing” tools like Grunt, Webpack, Require.js, Brunch, and Gulp are much more complicated. The goal of the “doing” tools is to automate all the menial and error prone tasks in web development. The things they do are sometimes called “tasks.”

To do these “tasks” they often use their own ecosystem of packages and plugins. Each tool writes tasks in different ways. These tools also don’t all do the same thing. Some “doing” tools try to handle any task you throw at it (Grunt, Gulp, etc). Others focus on one thing, such as handling Javascript dependencies (Browserify, Require.js, etc).

Sometimes you end up using several of these tools in the same project.

Here’s a short list of “tasks” I’ve automated with these “doing” tools:

  1. Replacing a string of text in a file
  2. Creating folders and moving files into those folders
  3. Running my unit tests with a single command
  4. Refreshing my browser when I save a file
  5. Combining all my JavaScript files into one, and all my CSS files into one
  6. Minifying my concatenated JavaScript and CSS files
  7. Modifying the placement of <script> tags on an html page

Once you understand that tools install stuff or do stuff, categorizing them becomes much easier:

 

Build tools sorted by whether they primarily install things or do things

Concept #2 — The grandparent of all build tools is Node and npm

Node and npm install and run all these build tools, so there is always a trace of them in your project. Because of this, many developers try to use these two tools as much as possible before they resort to installing an additional tool.

Node and NPM fall into our “build” and “do” dichotomy. Node is the “do” tool, and npm is the “install” tool.

npm can install libraries like Angular.js or React.js. It can also install a server to run your app locally for development. It can even install tools to do things like minify your code.

Node, on the other hand, “does” things for you, like run JavaScript files, servers, and so much more.

If you need a place to start learning, start with Node+npm, and stay there for a while. When your project gets large enough, you’ll reach the limits of what Node and npm can automate for you. At that point you can organically incorporate another build tool.

Concept #3 — A build is just a production ready version of your app

Developers often break JavaScript and CSS out into separate files. Separate files let you focus on writing more modular chunks of code that do one single thing. Files that do one thing decrease your cognitive load. (If you think separate files are more confusing than one large file, try working in a 5000 line file, and you will quickly change your mind

I finally made sense of front end build tools. You can, too.的更多相关文章

  1. VS报错:The build tools for v140 (Platform Toolset = 'v140') cannot be found

    VS低版本打开高版本常会出现的错: The build tools for v140 (Platform Toolset = 'v140') cannot be found. To build usi ...

  2. 开发错误记录3:问题 Error:failed to find Build Tools revision 23.0.2

    今天导入swiperefreshlayoutdemo 问题 Error:failed to find Build Tools revision 23.0.2 修改build.gradle 里面设置,其 ...

  3. SDK Build Tools revision (19.0.3) is too low for project Min

    SDK Build Tools revision (19.0.3) is too low for project Min(转)       如果你正在使用Android Studio工具进行开发,且将 ...

  4. 关于SVN下载代码和Android Studio里面导入别人代码build tools不一致问题总结

    项目build tools的sdk我没有 网络问题没法下载. 解决问题 方法 1.下载对应的SDK.需要VPN,或者FQ 2.将bulid.gradle的内容用下面的内容替换 // Top-level ...

  5. Gradle sync failed: failed to find Build Tools revision 21.1.2

    从github上下载了一个开源项目到Android Studio 出现以下问题: 下午2:56:05 Gradle sync started下午3:00:11 Gradle sync failed: ...

  6. using 1.7 requires using android build tools version 19 or later

    这意思大概是adt用了1.7,abt(android build tools)就要用19或更高,可是abt在哪设置呢,原来是在sdk manager中 之前我已安装的最高的abt是17,然后~~~,F ...

  7. Error:The SDK Build Tools revision (19.0.3) is too low for project ':app'. Minimum required is 19.1.

    今天更新了一下AndroidStudio, 结果编译程序时报错, 错误如下: Error:The SDK Build Tools revision (19.0.3) is too low for pr ...

  8. building 'twisted.test.raiser' extension error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools

    Error msg: building 'twisted.test.raiser' extension error: Microsoft Visual C++ 14.0 is required. Ge ...

  9. Android sdk platform,sdk tools,sdk Build tools,sdk platform tools 的关系

    1. sdk platform 简单理解为系统版本 最新级别: 28:Android 9 27:Android 8.1 26:Android 8.0 25:Android 7.1 24:Android ...

随机推荐

  1. HotApp小程序统计之如何接入

    1.统计接入留存说明  更详细的说明,可以查看官网的文档 https://weixin.hotapp.cn/document 统计接入流程只需要4步 (1)注册账号 打开http://weixin.h ...

  2. Android 手机卫士--自定义属性

    在前面的文章中,已经实现了“设置中心”第一栏的功能以及布局 本文地址:http://www.cnblogs.com/wuyudong/p/5936016.html,转载请注明出处. 自定义属性声明 接 ...

  3. iOS 系统分析(一) 阅读内核准备知识

    ➠更多技术干货请戳:听云博客 0x01 iOS体系架构 1.1 iOS 系统的整体体系架构 用户体验( The User Experience layer ):SpringBoard 同时支持 Spo ...

  4. [Erlang 0103] Erlang Resources 资讯小站

       好久没有写博客,是懒了吗?不是;前面两个月在紧张地推进一个项目,中间积累了一些RabbitMQ和Erlang的东西;本打算在项目结束之后赶紧总结一下,结果老婆怀孕之后生活节奏大乱:早起做饭,晚上 ...

  5. SQL SERVER 2012 执行计划走嵌套循环导致性能问题的案例

    开发人员遇到一个及其诡异的的SQL性能问题,这段完整SQL语句如下所示: declare @UserId             INT declare @PSANo              VAR ...

  6. 关于datetime 和 int 之间相互转换

    在其他地方看到一个有点意思的东西.是记录转换规则的. DECLARE @Date1 DATETIME = '2016-06-21 11:53:00' , @Date2 DATETIME = '2016 ...

  7. 配置tomcat https

    生成安全证书 打开命令窗口 Windows键+r,输入cmd 切换当前目录到tomcat的conf目录下 生成证书 红色字体标识的参数按实际需要修改 keytool -genkey -alias to ...

  8. native2ascii.exe 字符转码与反转码

    本人最近在做OAF的二次开发,在看别人写的代码时,发现总有类似这样的语句:”\u65e0\u6548\u7684GP\u9879\u76ee\u7f16\u53f7“,这些语句其实是用Java_hom ...

  9. 【转】详细分析Java中断机制

    原文地址:http://www.infoq.com/cn/articles/java-interrupt-mechanism 1. 引言 当我们点击某个杀毒软件的取消按钮来停止查杀病毒时,当我们在控制 ...

  10. java实现文件变化监控

    一. spring配置文件:application.xml <?xml version="1.0" encoding="UTF-8"?> <b ...