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

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

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

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

gulp中文网

一、gulp + node.js

1
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的任务实际上就是执行一系列操作,这些操作放在一个函数里,如下:

1
2
3
gulp.task('taskname', function() {
// do somethings
});

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

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

二、gulp + html

1
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文档中一部分。

三、gulp + less

1
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文件

四、gulp + ES6

1
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文件

五、gulp + browserSync

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

六、其他插件

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

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

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

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

  5. 使用gulp-ssh上传文件到服务器(很少应用)

七、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码、替换资源路径等。

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

详见仓库