来源于: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. Android Activity launchMode研究

    Android Activity launchMode研究 Activity的Launch mode一共有四种: standard, singleTop, singleTask, singleInst ...

  2. NSCopy&NSMutableCopy

    struct student { int a; float f; char c; long l; }; struct person { int a; float f; char c; long l; ...

  3. git操作命令

    参考:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 git 分布式版本控制系统. ...

  4. ORA-12520: TNS:listener could not find available handler for requested type of server

    当你碰到ORA-12520错误时,如下所示: 英文错误提示: ORA-12520: TNS:listener could not find available handler for requeste ...

  5. Redhat Linux安装JDK 1.7

    本篇主要介绍在Redhat Linux(Red Hat Enterprise Linux Server release 5.7 (Tikanga))系统上安装JDK 1.7,其它Linux平台安装也大 ...

  6. 一道常被人轻视的前端JS面试题

    前言 年前刚刚离职了,分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多 ...

  7. Excel画的图复制到Word中变形的解决办法

    在Excel里画好了图,复制到Word里面经常会变形变的一塌糊涂,面目全非,实在是不理解微软为什么要把自己家的软件搞成这样. 要想保持形状不变,需要这样做: 1. 在Excel里面复制图形,和往常一样 ...

  8. 【转帖】嵌入式4412开发板QT5.7编译安装到arm

    QT5.7.0+UBUNTU16.04+ARM-NONE-LINUX-GNUEABI4.8+busybox最小LINUX系统 Orandragon记录 本文转自迅为4412开发板群:http://to ...

  9. 数据处理之PostgreSQL过程语言学习

    前段时间,公司更换新的PostgreSQL数据集市的系统过程中,自己下载了postgresqlAPI的pdf文件研究了一下PostgreSQL数据集市.发现使用PostgreSQL过程语言可以大大加快 ...

  10. JS -- 异步加载进度条

    今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个. 展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1. ...