用构建工具搭建你 web 项目 grunt gulp webpack js

内容简介：用构建工具搭建你 web 项目 grunt gulp webpack js

前言

• 随着js在前端领域的大放异彩以及nodejs平台的兴起，js能做的事情越来越多，前后台逻辑、业务分离已是大势所趋！可能在此之前，前台的工作大致是这样的：写几个静态页面，数据是模拟的，然后写几个页面效果，然后就把这样设计好的页面给后台，后台再套上数据，于是网站的前台部分工作就算是完成了！可是这样是有问题的，因为后台在套数据的时候难免会根据需要改一些样式，这样就导致前后台来来回回频繁沟通，这样的工作流程影响开发效率是一回事，更重要的是时间长了，前后台工作牵连性太强了，导致彼此不能更好地把时间花在真正的逻辑处理上，而是花在业务对接上！频繁“沟通、对接”会影响工程师的开发体验，而且后期你会发现你的项目一团糟，难以维护，每天都是重复做一些重复的开发工作，比如打包、部署等！开发的时候，前台引入的js文件不合并的话，可能会在一个页面里面引用很多文件，增加了http请求，产生更多的tcp/ip和http时延，并且这些文件之间彼此依赖，当然了，项目比较小的时候，可能人工去管理每个js文件的依赖问题还比较轻松，但是如果很多的话，而且频繁的发布上线等操作的话，你整个人会崩溃掉的，当然了，如果你的公司工作没什么事情干，你喜欢做这种重复的工作也是无所谓的！有没有什么好的方法解决这些问题呢！当然有，一切的问题，你可以使用构建工具，让电脑帮你完成这些重复的事情！

• 其实这些构建 工具 的原理很简单————就是你把要做的事情，用代码描述成一个一个的任务（task），然后用构建工具去跑一下程序，就可以实现把你要做的事情用机器去做了，还可以帮你管理各种文件的依赖！怎么样，够自动化吧？

• 本文档建立在你对nodejs平台有一定了解的基础上进行叙述的！如果之前没有接触过这一块的话，可以到这里了解一下： node 、 npm ！同时基于现在三种流行的构建工具进行介绍，所以本文档分为三个部分：1、grunt；2、gulp；3、webpack。

• 当然了，这篇文档我的本意是作为一种入门文档用的，能帮助大家了解一下构建项目的一些基本工作原理就好！至于更深层次的内容，你应该多跟相关社区的前辈学习、或者去官网去查看相关文档！这里附上三种构建工具的官网地址： grunt官网 、 gulp官网 、 webpack官网 。最后欢迎大家对其中表达有误的地方进行 issue

正文

• grunt篇

• gulp篇

• webpack篇

内容待更新………………

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• Linux 搭建 Android 编译构建环境
• 基于GitLab CI搭建Golang自动构建环境
• 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目
• 使用 amWiki 搭建自动构建的轻量级知识库平台
• 使用Prometheus和Grafana构建集群监控系统(一): 配置与搭建
• Gitbook + Jenkins + Gitlab 搭建内网自动构建的 Gitbook

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。