这门课解决什么工作场景

这套资料讲的是 Node 环境下的前端工程化，核心是 Gulp 与 Webpack 这两类构建工具的基础运作逻辑。它解决的场景很明确：当你拿到一个别人写好的老项目，或者要在公司里维护一套带编译、打包流程的页面时，不至于看着配置文件两眼一抹黑。课程没有花架子，直接从怎么把一段 JavaScript 或 CSS 走一遍编译流程切入，帮你理清源代码到最终线上产物之间，到底发生了哪些机械转换。对于常年只写静态页面、没接触过自动化构建的上班族，这块内容能补上工作流里缺失的一环。

适合什么基础与学习顺序建议

这套资料默认你已经能写基础的 HTML 和 JavaScript，但如果没碰过命令行、没装过 Node 运行环境，也能跟着硬啃。它对转行者比较友好的一点是，开头先从宏观角度解释了为什么前端需要这些工具，而不是一上来就丢一堆配置代码。建议先把第一章关于代码与图片编译的粗糙演示看完，建立对转换流程的直观印象；接着进入第二章，重点看 Gulp 和 Webpack 混合使用的部分，理解任务流和模块打包的分工差异。资料里使用的工具版本确实偏旧，但构建工具的底层理念是相通的，学的时候重点放在配置项背后的逻辑上，不要死记具体的 API 写法。

学完能独立做什么与资料配合方法

啃完这套资料，你能在本地独立搭起一个简单的编译环境，把写好的 ES6 代码降级转成兼容性更好的旧版语法，或者用配置把零散的样式文件合并压缩。日常工作中，遇到老项目构建报错，你能看懂报错信息指向哪个插件，知道去哪改配置，而不是只能干等同事来救场。配合资料练习时，不要只用眼睛看视频，必须自己在电脑上建个空文件夹，跟着把 Node 装好，把依赖包拉下来。遇到视频里用的旧版本包，先照着原样跑通一次流程，再尝试把个别核心依赖升级，对比一下报错差异。这种带着问题去对照文档的练法，比单纯按顺序刷完视频更能把知识变成自己的手艺。


(本课程使用版本已过时，请看最新的课程)本课程是目前流行的前端开发速学课程。知识点涉及怎么结合gulp、webpack、Babel等并结合NodeJS+NPM开

课程目录

*   第一章:开脑与热身 cplist.push('第一章:开脑与热身');/

  *   第1讲:开张课讲故事:文科生角度告诉你为什么我们要学"历史"？

  *   第2讲:原来我们是"这样的"前端开发人员

  *   第3讲:自己来粗糙的玩一玩javascript的"编译"(1)

  *   第4讲:粗糙的玩一玩javascript的"编译"(2)css也能"编译"？

  *   第5讲:粗糙的玩一玩javascript的"编译"(3)图片也能"编译"？

*   第二章:gulp和webpack混合学习 cplist.push('第二章:gulp和webpack混合学习');/

  *   第6讲:gulp篇:速度上手,执行我们第一个任务

  *   第7讲:gulp篇:前端"清洁大妈"的产生

  *   第8讲:gulp篇:速玩JS文件合并和压缩

  *   第9讲:webpack篇:编译JS的正确姿势

  *   第10讲:混合篇:webpack和gulp"勾结"初步

  *   第11讲:实战演练:用gulp 构建前端页面(1)---静态构建

  *   第12讲:实战演练:用gulp像CMS那样生成新闻页面

  *   第13讲:实战演练:用gulp+EJS像CMS那样生成完整新闻内容面

  *   第14讲:实战演练:用gulp+webpack构建用户登录(1)

  *   第15讲:实战演练:用gulp+webpack构建用户登录(2):简化

  *   第16讲:实战演练:用gulp+webpack构建用户登录(3):使用jquery的正确姿势

  *   第17讲:用gulp +webpack构建登录页面(4):把我们的业务模块分开打包

  *   第18讲:构建登录页面(5):样式处理初步

  *   第19讲:构建登录页面(6):样式单提取

  *   第20讲:附加课:多页面分离资源引用,按需引用JS和css

  *   第21讲:附加课:用webpack的CommonsChunkPlugin提取公共代码的3种方式

  *   第22讲:附加课:利用webpack在项目中使用jQuery插件的正确姿势[课后有Bug更正]

  *   第23讲:利用gulp自动完成配置"吐"给webpack执行

  *   第24讲:Gulp+webpack模板化开发演练(1):分离公共头文件

  *   第25讲:Gulp+webpack模板化开发演练(2):利用远程JSON半动态加载新闻头条

*   第三章:前端利器Babel+ES2015体验学习篇 cplist.push('第三章:前端利器Babel+ES2015体验学习篇');/

  *   第26讲:高逼格Babel，快速入门

  *   第27讲:实战演练之用户业务类(1):基本类结构

  *   第28讲:实战演练之用户业务类(2):利用ES2015把业务类和实体类分离

  *   第29讲:babel和webpack整合(1):把我们代码封装到node_modules里

  *   第30讲:babel和webpack整合(2):两者同时"编译"我们的JS代码

  *   第31讲:自学能力培养篇:ReactJS乱入之渲染页面元素

  *   第32讲:自学能力培养:ReactJS乱入之组件化和自己实现的简单路由

  *   第33讲:自学能力培养:ReactJS乱入之借助框架封装自定义组件的姿势