第一、build工具的核心就是帮你安装和帮你做事。安装类工具:Npm、Bower、Yeoman等          做事类工具:Node、Grunt、gulp、Webpack等

安装类工具几乎什么东西都能装,它们可以用来安装前端库像Angular.js或是React.js;它们可以为你的开发环境安装服务器;它们可以安装测试库;它们甚至还可以帮你安装其他的前端开发工具。简而言之,就是任何你能想到的与代码有关的东西,它们都能安装。

做事类工具的目标则是,在web开发中帮你完成自动化。而每一些工具做的事情也不尽相同,一些工具,擅长处理那些你所指定的任务,例如Grunt和Gulp等工具;还有一些工具,只专注于做一件事情,例如Browserify和Require.js等工具。

第二、build工具的“祖宗”是Node和Npm。

Node和Npm负责安装和运行所有这些工具,基本在项目中都会有它们的身影。它们一个负责安装,一个负责帮你做事情。
npm可以安装Angular.js和React.js等库,它还可以安装服务器,让你的应用在开发阶段可以在本地运行。它还可以安装很多其他工具,帮你完成很多事情,例如简化代码。
而Node,则是帮你完成事情的,例如运行JavaScript文件,以及服务器等。

第三、build其实就是production-ready版本的应用。

开发时习惯把JavaScript和CSS拆分成独立的文件。
独立文件的好处,可以专注于编写针对性较强的代码,让每一部分代码只针对一个问题。但是当应用准备好被推向市场的时候,项目内存在多个JavaScript或是CSS文件并不是一个好主意。当用户访问你的网站的时候,每一个文件都需要独立的HTTP请求,这会让站点加载速度下降。解决方法就是,给项目创建“build”,它要将所有CSS文件合并成一个文件,然后再合并JavaScript文件。这样就可以将文件完成最小化。要想创建这个build,你需要使用build工具。

第四、“安装”和“做事”之间的界限有时会模糊 。

所有工具都是“安装”和“做事”的结合体。但是一般来说,一个工具会有自己的强项,或是强于安装,或是强于做事。有的时候,一个安装类工具也能运行文件。npm就是这样,它也能运行命令和脚本,不仅仅是安装文件。

第七、所有build工具目标都一样:通过对大量低技术含量任务完成自动化,让你的工作变得更轻。

使用build工具最大的好处之一,就是在保存了一个文件之后,你就能创建一个新的build,并且将其发送到你的浏览器中。它能够显著的提升前端开发流程的速度。
那么我们应该在配置和调试build工具的时候,应该付出多少精力?很简单,如果你对当前工具的效果感到满意,那就可以停止配置了。

关于前端build工具的更多相关文章

  1. 看完这篇让你对各种前端build工具不再懵逼!

    本文原标题为:我终于弄懂了各种前端build工具 译者:@Christian 译文:https://www.sdk.cn/news/5412 原文:https://medium.freecodecam ...

  2. 前端构建工具之gulp_常用插件

    gulp常用插件的使用 今天来看看一下gulp的常用插件的使用 就像gruntjs需要一个Gruntfile.js文件一样,gulp也需要一个文件作为它的主文件,在gulp中这个文件叫做gulpfil ...

  3. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  4. 前端模块化工具-webpack

    详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...

  5. Web前端开发工具总结

    前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs. ...

  6. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

  7. 前端见微知著工具篇:Grunt实现自动化

    转载说明 本篇文章为转载文章,来源为[前端福利]用grunt搭建自动化的web前端开发环境-完整教程,之所以转载,是因为本文写的太详细了,我很想自己来写,但是发现跳不出这篇文章的圈子,因为写的详尽,所 ...

  8. Gulp.js----比Grunt更易用的前端构建工具

    Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 prese ...

  9. 前端自动化工具 -- grunt 使用简介

    grunt作为一个前端构建工具,有资源压缩,代码检查,文件合并等功能. 下面就简单了解grunt的使用. 一.环境配置 grunt是基于nodejs的,所以需要一个 nodejs 环境,未了解的可以  ...

随机推荐

  1. C# 抽象类abstract

    不能初始化的类被叫做抽象类,它们只提供部分实现,但是另一个类可以继承它并且能创建它们的实例,有未被实现的方法.抽象类不可以new对象. "一个包含一个或多个纯虚函数的类叫抽象类,抽象类不能被 ...

  2. python 类变量和实例变量

    super(cls, inst) 获得的是 cls 在 inst 的 MRO 列表中的下一个类.  实例的属性存储在实例的__dict__中,类属性和方法存储在类的__dict__中.查找属性时,先检 ...

  3. jquery “做页面滚动到某屏时改变状态标题” 所用知识点记录

    浏览器滚动条滚动时触发事件 //浏览器滚动条滚动时触发事件 $(window).scroll(function(){}); 浏览器窗口大小改变时触发事件 //浏览器窗口大小改变时触发事件 $(wind ...

  4. ERROR actor.OneForOneStrategy: org.apache.spark.SparkContext

    今天在用Spark把Kafka的数据往ES写的时候,代码一直报错,错误信息如下: 15/10/20 17:28:56 ERROR actor.OneForOneStrategy: org.apache ...

  5. Python socket超时

    #server.py import socket s=socket.socket() s.bind(('127.0.0.1',2000)) s.listen(5) while 1: cs,addres ...

  6. Excel小写金额转大写金额公式

    =IF(ROUND(A6,2)<0,"无效数值",IF(ROUND(A6,2)=0,"零",IF(ROUND(A6,2)<1,"" ...

  7. Can't use Subversion command line client:svn

    在Intellij IDEA里checkout东西时出先这个错误提示:Can't use Subversion command line client:svn Subversion command l ...

  8. Mysql常见四种索引的使用

    提到MySQL优化,索引优化是必不可少的.其中一种优化方式 --索引优化,添加合适的索引能够让项目的并发能力和抗压能力得到明显的提升. 我们知道项目性能的瓶颈主要是在"查(select)&q ...

  9. NHibernate系列文章二十八:NHibernate Mapping之Auto Mapping(附程序下载)

    摘要 上一篇文章介绍了Fluent NHibernate基础知识.但是,Fluent NHibernate提供了一种更方便的Mapping方法称为Auto Mapping.只需在代码中定义一些Conv ...

  10. Word自动生成目录

    博主最近在写报告的时候要在Word里面做个目录,再做个页码,然后上网搜了一些方法,非常零散,我弄了好久才弄好.在这里我把整套方法分享一下. 声明:内容完全独创! 工具:Word 2016. 效果:如下 ...