gulp-load-task 解决 gulpfile.js 过大的问题
当我们在项目中使用gulp
来实现前端自动化时,常常因任务太多导致gulpfile.js
越来越臃肿,增加后期维护/变更成本。在计算机科学领域中,分治可以将我们的项目变得井然有序。所以,我们利用这个理念,将gulp task
拆分至不同的文件中,gulpfile.js
作为入口文件,来解决这个问题。
项目结构:
|--app
|--gulp
|----task
|------task1.js
|------task2.js
|--gulpfile.js
其中,假设task1.js:
// $ 是对 gulp-load-plugins 的引用
module.exports = function(gulp, $) {
gulp.task('task1', function () {
return gulp.src('xx/xx')
.pipe($.pluginName())
});
}
我们设想在gulpfile.js
使用gulp-load-task
:
let path = require('path')
let taskDir = path.join(__dirname, 'gulp', 'task')
require('gulp-load-task)(taskDir)
gulp-load-task 实现
gulp-load-task.js
源码在这里,做了两件事:
- 扫描
taskDir
下的所有文件,生成关系表 - 加载关系表中的每一个
.js
文件
值得一提的是,源码中用到了两个非常巧妙的方法来实现上述目的:reduce
和Object.defineProperty
生成关系表
用 reduce 将数组转化为对象,有种函数式编程的感觉,很巧妙。部分代码如下:
let taskModules = {} // 任务关系表
taskModules = fs
.readdirSync(dir)
.filter(f => /\.js$/.test(f))
.reduce((result, file) => {
let filePath = path.resolve(dir, file)
let fileName = path.basename(file, '.js')
result[fileName] = filePath
return result // (1)
}, {});
加载文件
经过步骤(1),我们得到了一组任务对象集合,接下来,需要将里面的文件逐一导入。
Object
.keys(taskModules)
.forEach(taskName => {
require(taskModules[taskName])(gulp, $)
})
到这里,所有的功能都已经实现,然而源码实现却有所不同。在源码中,我将taskModules
做了一次转化,在每个属性中添加了getter
方法并返回require(...)
。有兴趣的话可以看一下。
发布到 NPM
gulp-load-task 解决 gulpfile.js 过大的问题的更多相关文章
- gulp的使用(二)之gulpfile.js文件的配置
Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...
- gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块
1.压缩tinypng图片 gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = ...
- gulp配置文件(gulpfile.js)
需要安装的插件 "gulp": "^3.9.1","gulp-clean": "^0.3.2","gulp-c ...
- gulp压缩css文件跟js文件
越到最后啊 就越发现,真的很理解那句话 就是自己多学一点一点知识,就少一句问别人的东西 这是多么痛苦的领悟 今天需要压缩css跟js文件 然后不懂啊 就问别人啊 就问啊问啊 然后再上网了解啊了解啊 用 ...
- 通过Anuglar Material串串学客户端开发 - javascript编译和gulpfile.js
Angular Material不仅仅有本身框架的源代码,还有在这个框架上实现的一个应用docs.更为强大的是,这个应用是真正的产品网站:就是它的官网.我有理由相信,这个网站是从源代码直接发布的,从网 ...
- Gulpfile.js——编译、压缩、合并js和css文件
gulp 一个入门教程:http://www.ydcss.com/gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile v ...
- gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)
gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...
- gulpfile.js不断更新中...
Gulp压缩合并js/css文件,压缩图片,以及热更新教程 var gulp = require('gulp');var concat = require('gulp-concat');//- 多个文 ...
- gulpfile.js文档
gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...
随机推荐
- [Usaco2009 Dec]Toll 过路费
题面: 跟所有人一样,农夫约翰以着宁教我负天下牛,休教天下牛负我(原文:宁我负人,休教人负我)的伟大精神,日日夜夜苦思生财之道.为了发财,他设置了一系列的规章制度,使得任何一只奶牛在农场中的道路行走, ...
- This page contains the following error
解决办法:将header头注释掉 header("content-type:text/xml; charset=UTF-8");
- bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验 (解决办法) http://blog.csdn.net/biedazhangs ...
- Linux编程规范
1)在使用C语言进行编程时,源文件都必须加---文件头 /******************************************************** *文件名:test.c *创 ...
- Pseudo-class和pseudo-element的差别
相同点: Pseudo-class和pseudo-element的语法都是以selector或者selector.class开始的. 不同点: Pseudo-class的操作对象是文档树中已有的元素, ...
- 学习Java的方法
许多人在刚开始学习Java时,会因为学习方法的不正确,而丧失信心,从而半途而废.所以,今天,巩固就要教教大家学习Java的方法. 1.多练习 编程其实是一个非常抽象的东西,要想学好它,就不能只是看看书 ...
- 26. The Greenhouse Effect and Its Consequences 温室效应及其后果
26. The Greenhouse Effect and Its Consequences 温室效应及其后果 ①The greenhouse effect causes trouble by rai ...
- arduino IO口
AVR单片机的每组I/O口都配备有三个8位寄存器,分别是:方向控制寄存器DDRx.数据寄存器PORTx.输入引脚寄存器PINx(x=A/B/C/D).I/O口的工作方式和表现特征由这三个I/O寄存器控 ...
- AdapterViewFlipper功能 自动播放的图片库
案例中有"上一个""下一个""自动播放",但是我觉得可以更加完善一下,点击自动播放,按钮变成"停止播放",在按" ...
- org.springframework spring-test
需要的jar包 <dependency> <groupId>org.springframework</groupId> <artifactId>spri ...