gulp 构建系统

这集来聊聊 gulp 这个构建系统（ build system ）。

什么是 Build System？

这里的 build 主要指的是”构建“ Web 应用了，主要就是前端，自动化一下我们的 html/css/js 工作流。前端构建工具除了 gulp 还有 grunt （这个跟 gulp 很像了，没有 gulp 好），webpack ( react 开发的首选) ，其他还有很多了。

那为啥叫 system 呢？就是因为 gulp 本身其实没多少功能，但是它是一个平台，一个系统，上面可以跑几千个 plugin ，完成各种构建网站的任务。这些 plugin 有些就是几十行 js 代码，专门为 gulp 写的。但是另外有些 plugin 就是为了把一些独立的工具（有些本身还挺大的）很方便的集成到 gulp 的这套工作流程中。

Build System 都是用命令行操作的，但是不必担心，使用 Build System 对命令行的要求也不是太高。

gulp 能帮我们做点什么？

简单来说，就是帮我们完成一些重复性的劳动。《摩登前端开发者》课程中会演示下面几个非常实用的功能:

gulp-autoprefixer 自动给 CSS 添加厂商前缀。
gulp-sass 把 Sass 编译成 css 。
gulp-wrap 可以把各个 html 文件中相同的 header 和 footer 部分抽离出来。
gulp + browsersync 实现多设备同步调试，页面自动加载（ live reloading ）等功能。
gulp-purifycss 去除没用的 CSS 代码。

通过上面几个插件的作用，我们可以看出，gulp 的每一个插件都试图去完成一个小任务，这个就和 Rails/Django 这样的“大而全”的框架形成了对比，也导致了入手 gulp 要比入手大框架简单一百倍。

gulpfile 语法很傻瓜

小任务总要配合起来才能真正完成构建任务，这个是通过在 gulpfile.js 文件中书写自动化处理脚本来实现的。

上面的代码中可以看出，可以使用 gulp.src 来选取文件，这样里面的数据就会形式“流”，沿着“管道”（ pipe ）一直向前，管道上的每个节点上我们都可以让一个插件发挥作用，然后处理后的数据最终通过 gulp.dest 导出到一个文件夹中。就是这么简单傻瓜的 js 语句，即使不会 js 的人也能写。

gulp 是入门 nodejs 生态的捷径

gulp 是基于 nodejs 来跑的，而且要用到命令行，要写一些 js 代码。但是，由于 gulp 的上手是如此的简单，所以可以作为一个通往 nodejs 生态系统的“门”。不会命令行，不会 nodejs ，对 npm 和 js 基本语法都不熟悉？没关系，可以从 gulp 开始入手学。gulp 虽然简单，但是每个功能都是实用的，所以，第一可以培养兴趣，第二也可以为后面学习一些“大而全”的框架打下知识基础。

所以，在我自己的课程体系中，只要大家完成了基本的 html/css 基础知识学习，就可以上 gulp 了。这样随着各个实用功能的引入，大家可以逐一的无压力的来学习：“布局文件”，命令行跳转，js 基础语法…这些重要技巧。

结语

当代前端开发者，不会构建工具是真的不行的，所以求求大家了，开始学吧！