gulp webpack php,前端开发速学成财(nodejs+gulp+webpack基础实战篇)

本课程正在限时优惠中,请尽快购买

原价:￥250

优惠价:￥999.00

章节导航

课程大纲

第一章:开脑与热身

本课时是开张课，我们适当讲个故事来帮助大家理解javascript和NodeJS.不要忽略这段历史，否则我们很难明白后面的知识点到底是怎么来的。说到底，这些历史的产生都是因为“钱”。

第二集我们进入速学节奏，本课时包含知识点:1、require外部文件 2、NPM来安装jquery 3、引用第三方模块的姿势 4、什么才是真正的前端开发人员 5、自己制作一个node_modules 。每节课信息量很大，请大家课后要反复操练，增加主观能动性。

学到这节课，很多同学可能会疑惑。我们的NodeJS和前端开发有半毛关系吗？那么这节课我们来看一下NODEJS是怎么和我们前端页面联合在一起的。以解开万千新同学的心头痛，为后面我们使用成熟工具打下概念基础。

上节课我们玩了一把所谓的js引用"编译"。那么这节课我们趁热打铁，如果我们引用了css在脚本里，那么怎么来进行所谓的“编译“呢？

本节课再通过不一样的思路来帮助大家开脑，如果我们的样式蛋里面有张背景图，我们怎么来玩一把“编译”的效果呢？请看本节课内容，继续为我们后面的学习打基础

第二章:gulp和webpack混合学习

本节课开始进入第二章。我们首当其冲的要了解目前最火热的前端构建工具之一:gulp。本课包含安装、配置、运行第一个任务示例。

我们边模拟需求边学习gulp。当我们项目做到一定程度时，文件会因为各种原因散落在各地，而gulp首当其冲的一个功能就是“清理”。本课我们将重点学习src函数、管道、和写文件dest函数。

这节课开始我们把gulp重要插件过一下，然后要快速进入webpack 的学习，这样你才会有一个整体的前端开发大菊观。本课讲的是js合并和压缩插件

本章节我们会在gulp和webpack两者混合进行学习。其中本课程我们将初次接触到另外一个神器--webpack。通过它我们了解到为什么现在写前端脚本还需要“编译"

前面两课我们分别单独学习了gulp和webpack,那么问题来了，怎么把两者"勾结"起来一起使用呢？这节课我们来模拟一个需求，一个JS从编译到压缩，一步搞定。

前面两课我们基本入手了gulp和webpack，并把两者结合。那么接下来我们要开始进入实战演练，一个个过知识点是学不会的。这节课我们先使用 gulp来构建模板(是否很类似CMS呢？)

这节课给大家开脑。上课我们学习了gulp模板功能，那么这节课我们换个思维，利用PHP做个简单的新闻数据API。然后利用nodejs调用，并利用gulp生成新闻静态页面。希望本课内容能给大家灵感

上节课我们用了gulp-template学习了模板生成，由于学员比较感兴趣，那么这节课我们进阶一下，同时要学到一个比较完整的模板EJS.它不仅可以用在后端，还可以结合gulp用在前端生成。请看完本课内容后反复操练。

我们继续在实战中进行学习。这节课开始我们模拟一个用户登录页面来进一步学习 gulp+webpack 是怎么简单结合构建我们的前端的

本课时解决上节课的“缺憾”，譬如自动引用编译好的JS文件、在JS后面加上随机数清除缓存等。也将学习到一个插件:htmlwebpackplugin。

上节课我们完成了简单gulp+webpack构建一个丑陋的登录页，那么我们实现业务过程总不可能重复造车轮吧。于是我们需要结合一些第三方库，譬如全球人都知道的 jQuery.这节课来介绍正确姿势

上节课我们把业务模块、 jQuery都打包到了一起。但是我们会发现，项目做到后面这个JS文件会越来越大，而且并不是所有页面都需要使用到某些模块。所以这节课我们来快速学习一下业务模块的分开打包。

本节课知识点：1、分离jquery库,让它通过CDN加载，同时不影响我们的JS "编译" 2、学习把css打包到脚本中，加载器的学习

上节课我们学习样式单的统一打包，然而我们如果做的是类似于门户新闻类页面，并不需要打包到脚本中，那么该怎么办呢？这节课我们先使用简单的做法来体验一下

之前我们只做了一个页面，那么如果我有多页面，同时我的JS和css打包后不想全部加载进去，也就是要按需加载，该怎么“自动化”处理呢？

接着上节课，我们在实现分离编译后出现了很多冗余代码，该怎么处理呢？这节课我们采用公共代码提取的方式来解决代码冗余。其中本课着重教大家“学习”方法。

本课也是为了解答学员在学习过程中提出的一些代表性问题。譬如在项目中使用到了第三方的库，譬如jquery插件，那么通过我们现在webpack编译的方式怎么实现呢？

前面的课时我们在webpack中的配置都是手写的。为了体现我们的gulp和webpack结合程度，本节课我们来演示下利用gulp自动生成配置给webpack执行的一个简单案例

本课开始我们来进行模板化开发实战演练，今天我们是来讲怎么加载我们网页中的公共头尾文件。有3种方法可以处理，看起喜欢哪一种，总一款适合你

项目做屌必定会前后端分离或者使用第三方的API，这些API往往会以JSON的方式来展现，那么除了即时ajax调用还有其他办法吗?本课程用模板化的方式来讲解另外一种方法。

第三章:前端利器Babel+ES2015体验学习篇

本节课开始进入Babel学习篇，如果你专注前端开发，那么绝对不可能缺少这么一款利器，它最广为人知的功能就是编译ES2015代码。这节课我们开始入门和上手,后面需要和我们的 gulp或webpack结合做实际案例的哦

这节课开始我们一边学习babel一边顺手把ES2015语法给学了。直接从实战演练开始，我们逐步来构建一个用户处理类。在案例中学习知识点相对比较扎实

本节课我们要开始进阶学习ES2015的写法。上节课我们学习用ES2015的class语法糖完成一个简单的用户类，其中我们把实体属性和业务方法粗暴地并在一起。那么这节课我们要有逼格的分离，业务业务类、实体类归实体类

这节课我们开始把所谓的核心代码写到node_modules里，而不是散乱的放在文件夹下。同时我们利用babel-node进行测试

本课时比较简短，也是承上启下课。当我们学会了babel+webpack结合后，后来就可以“乱入”一些框架和新语法来实战我们的前端了

这节课我们从培养大家的自学能力角度换个思维继续学习。本课时“乱入”的框架是ReactJS。注意：后面还会有其他框架乱入。只要认真看到这节课，很多新框架的自学仅仅是“方法问题”

这节课我们来借助ReactJS理解组件化开发。注意这些课时并不是为了让大家急着学框架，而是通过借助框架的一些特性来理解目前前端构建方式。

本节课演示实战中通常是怎么封装组件的。其中为了演示方便，我们借助了ReactJS框架功能，让我们体会的更清楚些。并顺便学会和体验ES2015语法中的import from/export语法。

第四章:webpack+gulp+sass学习篇

这节课开始我们来学习sass这款简单又使用的css开发工具。直接从实战场景模拟开始学习，依然不建议大家一个个知识点过。

本节课我们继续在实战场景中学习SASS，本课知识点包括实战演练:嵌套、mixin、变量计算、颜色函数

这节课我们来尝试SASS做一些响应式处理。代码很简单，一些注意点需要我们在实际开发中进行强化

这节课我们开始做一些通用布局，譬如模仿bootstrap里面的 container 样式，当我们拖动屏幕宽度时container的宽度会变，这个功能怎么结合sass来实现呢?

为了更好的学习SASS后续知识点，我们继续在实战场景中学习。本课我们模拟bootstrap把布局拆分为12列。那么这个拆分是怎么实现的呢？我们先定义个自定义函数来解解闷

这节课我们利用SASS正式把布局拆分为12列，并且模拟偏移的功能。看到这， 你还觉得bootstrap有多难吗？

这节课开始我们来做一个table，并且引申出其他sass知识点。本课程将要学到@each指令和map集合的具体应用

本课时是根据学员的提问进行的加课时。本课带大家快速领域怎么加载和拿来主义字体图标

我们在前面的课程使用的是gulp来处理sass文件的编译。在开发过程中往往我们需要使用webpack来全自动构建。因此本节课再次放出联合编译的套路。

本课程总结课，欢迎大家期待我们的后续课程。最新更新的课程地址如下：http://www.jtthink.com/course/40