使用gulp编写经常使用自动化构建任务

前端开发过程当中使用自动化构建工具大大提升了咱们的工做效率。gulp就是其中一款十分优异的自动化构建工具，具备清晰的API、丰富的插件。刚接触前端开发时我就享受了gulp带来的便利。

之前的页面开发主要工做就是编写html、css、js文件，后来less、es6和各类前端框架的出现大大减小开发代码量，要使用它们就必须先编译，从而逐渐分化出开发流程：

• 写业务代码（例如 es6，less，jsx 等）
• 编译成浏览器兼容的（js，css，html）
• 浏览器自动刷新
• 上传到服务器发布

自动化构建工具就是能让咱们专心写业务代码，其余的事由工具自动完成。

gulp中文网

1、gulp + node.js

yarn add gulp gulp-load-plugins ejs minimist --dev
复制代码

1. 全局和做为开发依赖安装gulp
2. 插件较多时使用gulp-load-plugins，避免逐个引入插件
3. 使用fs-extra扩展原生fs模块
4. 使用ejs编译模板生成html文件
5. 使用minimist 获取gulp命令的参数

gulp的任务实际上就是执行一系列操做，这些操做放在一个函数里，以下：

gulp.task('taskname', function() {
  // do somethings
});
复制代码

利用node命令能够执行node.js程序，但没法清楚表达程序的意义。而经过gulp任务的概念能够从逻辑上更好地管理node.js程序。作法是gulp引用封装好的js模块，再定义gulp task调用模块里的方法。

利用这种思路能够实现一个自动建立项目目录和根据模板生成新页面的脚手架。

2、gulp + html

yarn add gulp-htmlmin gulp-html-replace gulp-rev gulp-rev-collector --dev
复制代码

1. 使用gulp-htmlmin压缩html，去除页面空格、注释，删除多余属性等操做。压缩页面内联javascript、内联css。
2. 使用gulp-rev-collector用md5命名后的文件名替换原文件名，配合gulp-rev使用，它会给文件名加上md5并生成映射文件。从新发布时能够去除旧文件的缓存或替换成CDN地址。
3. 使用gulp-html-replace替换html文档中一部分。

3、gulp + less

yarn add gulp-less gulp-autoprefixer gulp-clean-css gulp-concat-css --dev
复制代码

1. Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增长了变量、混合（mixin）、函数等功能，最重要的是支持嵌套规则让 CSS 更易维护。less在网页上使用须要先编译成css，gulp-less插件正好实现这一功能。
2. 使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。
3. 使用 gulp-clean-css压缩css文件
4. 使用gulp-concat-css合并多个css文件

4、gulp + ES6

yarn add gulp-babel babel-core babel-preset-es2015 gulp-uglify gulp-concat --dev
复制代码

1. 使用es6能够提升工做效率，webpack的babel-loader如今已经普及了，而gulp 也有相应的插件gulp-babel将咱们写的es6代码经过babel编译，需配置.babelrc。
2. 使用gulp-uglify压缩javascript文件
3. 使用gulp-concat合并多个js文件

5、gulp + browserSync

yarn add browser-sync --dev
复制代码

• 使用browser-sync在构建网站时保持多个浏览器和设备的同步,配合gulp watch 修改后自动刷新。

6、其余插件

1. 使用 gulp-imagemin压缩图片，效果不理想可以使用tinyjpg

2. 使用gulp-rename对文件重命名再输出。

3. 使用gulp-delete-file删除文件

4. 使用gulp-clean删除文件夹

5. 使用gulp-ssh上传文件到服务器（不多应用）

7、gulp 与 webpack

接触过gulp 和 webpack 以后会感受到到二者有不少方面的不一样：

1. 在难度方面gulp比较容易理解和使用，gulp自己的api很少它只是为插件搭建一个平台，而后真正完成任务的是各类gulp插件，插件资源也比较丰富基本上能够实现对付常规的前端开发流程中的任务. webpack有不少新概念和api，在入口、输出、加载器、插件下又有各类配置选项，所以须要认真对照官方文档结合项目学习。
2. 在定位方面gulp是基于任务的，如针对编译、压缩、合并、发布等前端开发流程各个击破，使用相关的插件使这些流程自动化运行。webpack核心概念是模块，从入口文件出发将各类资源打包成js模块，模块之间造成清晰的依赖关系。

在实际开发中用到webpack的机会愈来愈大，缘由是响应式的前端框架语言（React,Vue，Angular）已经被普遍使用了，这些框架推荐的脚手架工具默认选择了webpack来更好地编译使用到的技术 （.jsx,.vue）,不管是移动端应用仍是中后台管理系统页面开发都有了成熟的实践和各类开源库支持。

gulp 的使用场景剩下的就是传统的JS/JQuery开发,这种开发方式没有特殊的文件须要编译（.jsx,.vue）,能够专一于开发流程设计相应的gulp任务来提升开发的效率。前端运营页面开发就是场景之一,功能简单、迭代快速、DOM操做复杂，使用gulp成为更好的选择。还有一个场景就是小程序开发，在开发者工具上不能知足咱们开发的技术需求，复杂的小程序开发能够用gulp补全流程任务，如 编译less、加md5码、替换资源路径等。

8、使用gulp构建多页应用实例

详见仓库