缘由

作为一名伪前端攻城师,还是有必要学习一下前端工具和前端框架的。于是自己就折腾了一下,通过在egret引擎中使用gulp,来学习gulp的使用。这里是别人已经收集整理好的,gulp比较齐全的资料https://github.com/Platform-CUF/use-gulp

gulp简介

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript(或者 CoffeeScript )源码来实现的。

在egret中,这里就是希望使用它编译TypeScript文件,虽然egret已经做了一些封装,满足了基本的需求,这里完全就是自己折腾,用前端工具,做一些定制化的操作。然后实现一些定制化的功能,比如压缩资源。比如模块编译。等等。

gulp安装

1.全局安装gulp:

$ npm install gulp -g

如果安装失败,前面可以添加一个sudo

sudo npm install gulp -g

因为可能被国内的某些原因,无法正常安装。大家可以安装淘宝镜像

2.作为项目的开发依赖(devDependencies)安装:

在egret项目根目录下,命令行中输入以下命令:

npm install --save-dev gulp

这里是到项目根目录安装的。即egret项目的根目录。

在egret项目根目录创建gulpfile.js文件。代码

1
2
3
4
5
6
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
console.log("hello gulp")
});

在egret项目根目录下,命令行中输入:gulp ,
终端输出内容中会有单独的一行,显示内容为hello gulp;

3.编译TypeScript

在egret中,输入egret build 则egret引擎会构建项目,TypeScript文件生成对应JavaScript文件,文件生成的目录是bin-debug。

在这里使用gulp来构建,我们同样默认还是生成在bin-debug文件目录下。
在egret项目根目录下,命令行中输入以下命令:

npm install --save-dev gulp-typescript

在egret中,构建项目使用的命令是egret build ,这里我们就创建一个build任务,gulpfile.js编写代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var gulp = require('gulp');
var ts = require('gulp-typescript')
gulp.task('default', function() {
// 将你的默认的任务代码放在这
console.log("hello gulp");
});
//创建一个build 任务
gulp.task('build', function() {
// 1. 找到文件
gulp.src('src/**/*.ts')
// 2. 编译TypeScript文件
.pipe(ts({
"compilerOptions": {
"target": "ES6",
"outDir": "bin-debug",
"sourceMap": true
},
"exclude": [
"bin-debug",
"bin-release",
"resource"
]
}))
// 3. 保存编译后的文件
.pipe(gulp.dest('bin-debug'));
})

在egret项目根目录下,命令行中输入: gulp build ,
我们查看对应的bin-debug目录下的JavaScript文件,是完全对应TypeScript文件生成的。
这里我们就实现了egret build 功能。

这里在终端输入gulp build 时候,终端会输出比较多的错误提示,说是没有引用对应的库文件。
接下来我们解决这个报错问题,我们引用新的gulp插件,直接调用egret默认提供的命令。

在egret项目根目录下,命令行中输入以下命令:

npm install --save-dev gulp-shell

我们用shell脚本,调用egret引擎默认提供的命令功能。在gulpfile.js中编写对应的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var gulp = require('gulp');
var ts = require('gulp-typescript');
var shell = require('gulp-shell');
gulp.task('default', function () {
// 将你的默认的任务代码放在这
console.log("hello gulp");
});
gulp.task('build', function () {
// 1. 找到文件
gulp.src('src/**/*.ts')
// 2. 编译TypeScript文件
.pipe(ts({
"compilerOptions": {
"target": "ES6",
"outDir": "bin-debug",
"sourceMap": true
},
"exclude": [
"bin-debug",
"bin-release",
"resource"
]
}))
// 3. 保存编译后的文件
.pipe(gulp.dest('bin-debug'));
})
//调用egret run -a 命令,实现增量编译
gulp.task('run', function(){
gulp.src('')
.pipe(shell([
'egret build -e',
'egret run -a'
]))
});

4.发布Egret项目

这里我们同样使用egret自带的命令。参考步骤3中编译操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var gulp = require('gulp');
var ts = require('gulp-typescript');
var shell = require('gulp-shell');
gulp.task('default', function () {
// 将你的默认的任务代码放在这
console.log("hello gulp");
});
// gulp build 编译egret项目
gulp.task('build', function () {
// 1. 找到文件
gulp.src('src/**/*.ts')
// 2. 编译TypeScript文件
.pipe(ts({
"compilerOptions": {
"target": "ES6",
"outDir": "bin-debug",
"sourceMap": true
},
"exclude": [
"bin-debug",
"bin-release",
"resource"
]
}))
// 3. 保存编译后的文件
.pipe(gulp.dest('bin-debug'));
})
//调用 gulp run ,利用egret提供的实现增量编译
gulp.task('run', function () {
gulp.src('')
.pipe(shell([
'egret build -e',
'egret run -a'
]))
});
// 发布 gulp publish
gulp.task('publish', function () {
gulp.src('')
.pipe(shell([
'egret build -e',
'egret publish '
]))
})

发布我们这里基本的已经实现了,但是egret官方提供的可以默认的添加版本号,这里我们用另外的插
件yargs来实现

在egret项目根目录下,命令行中输入以下命令:

npm install --save-dev yargs

gulpfile.js中添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var gulp = require('gulp');
var ts = require('gulp-typescript');
var shell = require('gulp-shell');
var argv = require('yargs').argv;
gulp.task('default', function () {
// 将你的默认的任务代码放在这
console.log("hello gulp");
});
// gulp build 编译egret项目
gulp.task('build', function () {
// 1. 找到文件
gulp.src('src/**/*.ts')
// 2. 编译TypeScript文件
.pipe(ts({
"compilerOptions": {
"target": "ES6",
"outDir": "bin-debug",
"sourceMap": true
},
"exclude": [
"bin-debug",
"bin-release",
"resource"
]
}))
// 3. 保存编译后的文件
.pipe(gulp.dest('bin-debug'));
})
//调用 gulp run ,利用egret提供的实现增量编译
gulp.task('run', function () {
gulp.src('')
.pipe(shell([
'egret build -e',
'egret run -a'
]))
});
// 发布 gulp publish --version 1000
gulp.task('publish', function () {
gulp.src('')
.pipe(shell([
'egret build -e',
'egret publish --version ' +argv.version
]))
})

这里,我们就完成了egret提供的基本相同的功能。剩下的就是我们的自定义功能了。

5.自定义功能

5.1压缩图片资源

安装压缩插件,在egret项目根目录下,命令行中输入以下命令:

npm install --save-dev gulp-imagemin

然后新建一个imagemin的任务,代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var gulp = require('gulp');
var ts = require('gulp-typescript');
var shell = require('gulp-shell');
var argv = require('yargs').argv;
var image = require('gulp-imagemin');
gulp.task('default', function () {
// 将你的默认的任务代码放在这
console.log("hello gulp");
});
// gulp build 编译egret项目
gulp.task('build', function () {
// 1. 找到文件
gulp.src('src/**/*.ts')
// 2. 编译TypeScript文件
.pipe(ts({
"compilerOptions": {
"target": "ES6",
"outDir": "bin-debug",
"sourceMap": true
},
"exclude": [
"bin-debug",
"bin-release",
"resource"
]
}))
// 3. 保存编译后的文件
.pipe(gulp.dest('bin-debug'));
})
//调用 gulp run ,利用egret提供的实现增量编译
gulp.task('run', function () {
gulp.src('')
.pipe(shell([
'egret build -e',
'egret run -a'
]))
});
// 发布 gulp publish --version 1000
gulp.task('publish', function () {
gulp.src('')
.pipe(shell([
'egret build -e',
'egret publish --version ' + argv.version
]))
})
// 压缩图片功能 gulp imagemin
gulp.task('imagemin', function () {
gulp.src('resource/**/*.{png,jpg,gif}')
.pipe(image({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true //类型:Boolean 默认:false 隔行扫描gif进行渲染
}))
.pipe(gulp.dest('bin-release/resource'));
});

配合imagemin-pngquant 来实现深度压缩资源。
安装压缩插件,在egret项目根目录下,命令行中输入以下命令:

npm install imagemin-pngquant --save-dev

然后修改一下资源压缩代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
var gulp = require('gulp');
var ts = require('gulp-typescript');
var shell = require('gulp-shell');
var argv = require('yargs').argv;
var image = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
gulp.task('default', function () {
// 将你的默认的任务代码放在这
console.log("hello gulp");
});
// gulp build 编译egret项目
gulp.task('build', function () {
// 1. 找到文件
gulp.src('src/**/*.ts')
// 2. 编译TypeScript文件
.pipe(ts({
"compilerOptions": {
"target": "ES6",
"outDir": "bin-debug",
"sourceMap": true
},
"exclude": [
"bin-debug",
"bin-release",
"resource"
]
}))
// 3. 保存编译后的文件
.pipe(gulp.dest('bin-debug'));
})
//调用 gulp run ,利用egret提供的实现增量编译
gulp.task('run', function () {
gulp.src('')
.pipe(shell([
'egret build -e',
'egret run -a'
]))
});
// 发布 gulp publish --version 1000
gulp.task('publish', function () {
gulp.src('')
.pipe(shell([
'egret build -e',
'egret publish --version ' + argv.version
]))
})
// 压缩图片功能 gulp imagemin
gulp.task('imagemin', function () {
gulp.src('resource/**/*.{png,jpg,gif}')
.pipe(image({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
use: [pngquant()]//使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest('bin-release/resource'));
});

这里的压缩是全部压缩,如何实现增量压缩资源,这里使用其它的插件来实现。
安装压缩插件,在egret项目根目录下,命令行中输入以下命令:

npm install gulp-cache --save-dev

修改gulpfile.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
var gulp = require('gulp');
var ts = require('gulp-typescript');
var shell = require('gulp-shell');
var argv = require('yargs').argv;
var image = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var cache = require('gulp-cache');
gulp.task('default', function () {
// 将你的默认的任务代码放在这
console.log("hello gulp");
});
// gulp build 编译egret项目
gulp.task('build', function () {
// 1. 找到文件
gulp.src('src/**/*.ts')
// 2. 编译TypeScript文件
.pipe(ts({
"compilerOptions": {
"target": "ES6",
"outDir": "bin-debug",
"sourceMap": true
},
"exclude": [
"bin-debug",
"bin-release",
"resource"
]
}))
// 3. 保存编译后的文件
.pipe(gulp.dest('bin-debug'));
})
//调用 gulp run ,利用egret提供的实现增量编译
gulp.task('run', function () {
gulp.src('')
.pipe(shell([
'egret build -e',
'egret run -a'
]))
});
// 发布 gulp publish --version 1000
gulp.task('publish', function () {
gulp.src('')
.pipe(shell([
'egret build -e',
'egret publish --version ' + argv.version
]))
})
// 压缩图片功能 gulp imagemin
gulp.task('imagemin', function () {
gulp.src('resource/**/*.{png,jpg,gif}')
.pipe(cache(image({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
use: [pngquant()]//使用pngquant深度压缩png图片的imagemin插件
})))
.pipe(gulp.dest('bin-release/resource'));//压缩资源后的保存路径,这里可以填写发布后的路径
});
5.2添加版本控制

未完待续…