Gulp打包工具使用
在使用中遇到的问题
- 命令行里的 gulp 命令和你通过 npm 安装的 gulp 包可不是同一个东西
- 3.0版本与4.0的使用操作不同
- 3.0版本使用task需要async同步执行才不会报错
4.0中有什么新东西
- 任务系统从头开始重写,允许任务组合使用
series()
和parallel()
方法 - 观察者已经更新,现在使用chokidar(不再需要gulp-watch!),功能与我们的任务系统相同
- 使用增量构建添加了一流的支持
lastRun()
symlink()
公开了一种方法来创建符号链接而不是复制文件- 添加了对源映射的内置支持 - 不再需要gulp-sourcemaps插件!
- 现在建议使用节点或ES导出对导出函数进行任务注册
- 设计了自定义注册表,允许共享任务或增强功能
- 流实现得到了改进,允许更好的条件和分阶段构建
安装
npm install gulp gulp-clean-css gulp-rename gulp-header gulp-babel @babel/core @babel/polyfill @babel/preset-env gulp-uglify gulp-postcss gulp-less gulp-cssnano autoprefixer --save-dev
1
创建 gulpfile.js
touch gulpfile.js
1
创建这个文件的目的就是使用gulp命令时需要启动一些打包工具
类似于启动node,需要npm init 生成一个package.json 同理
目录结构
根路径-
node_modules
src
-js
-index.js
-style
-index.css
gulpfile.js
package.json
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//转义
const babel = require('gulp-babel');
//压缩
const uglify = require('gulp-uglify');
//重命名
const rename = require('gulp-rename');
//压缩css
const cleanCSS = require('gulp-clean-css');
//导入方法
const { series, parallel, src, dest ,watch } = require('gulp');
//监听目录下的文件改变
function watchAll(){
return watch('src/**', parallel(script, style))
}
//压缩js
function script() {
return src('src/js/*.js')
.pipe(babel())
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(dest('./dist'));
}
//压缩css
function style() {
return src('src/style/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(dest('./dist'));
}
//压缩图片(非必选)
function images() {
return src('src/images/*')
.pipe(dest('./dist/images'));
}
exports.images = images;
exports.script = script;
exports.style = style;
exports.default = watchAll;
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
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
官方例子
var gulp = require('gulp');
var less = require('gulp-less');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
var del = require('del');
var paths = {
styles: {
src: 'src/styles/**/*.less',
dest: 'assets/styles/'
},
scripts: {
src: 'src/scripts/**/*.js',
dest: 'assets/scripts/'
}
};
/*并非所有任务都需要使用流,gulpfile只是另一个节点程序
*您可以使用npm上所有可用的包,但它必须返回任意一个 promise
*一个流或采取一个回调并调用它
*/
function clean() {
// 你可以像使用“gulp.src”一样使用多个globbing模式
// 例如,如果您正在使用del 2.0或更高版本,请返回它的promise
return del([ 'assets' ]);
}
/*
* 使用普通函数定义任务
*/
function styles() {
return gulp.src(paths.styles.src)
.pipe(less())
.pipe(cleanCSS())
// 将选项传递到流
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
}
function scripts() {
return gulp.src(paths.scripts.src, { sourcemaps: true })
.pipe(babel())
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest(paths.scripts.dest));
}
function watch() {
gulp.watch(paths.scripts.src, scripts);
gulp.watch(paths.styles.src, styles);
}
/*
* 使用“gulp”指定任务是串联运行还是并行运行。系列”和“gulp.parallel”
*
*/
var build = gulp.series(clean, gulp.parallel(styles, scripts));
/*
* 您可以使用CommonJS的“导出”模块符号来声明任务
*/
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;
exports.build = build;
/*
* 定义可以通过从cli运行“gulp”来调用的默认任务
*/
exports.default = build;
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
67
68
69
70
71
72
73
74
75
76
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
67
68
69
70
71
72
73
74
75
76
Src()匹配
匹配系统中的文件
3.0版本
gulp.task('js',async()=>{
gulp.src('src/js/*.js')
})
1
2
3
2
3
4.0版本
function script(){
return src('src/js/*.js');
.pipe(dest('./dist'));
}
1
2
3
4
2
3
4
Dest () 写入
把编译好的文件写入到指定文件中 $$ dest(directory, [options]) $$
function script() {
return src('src/js/*.js')
//转义
.pipe(babel())
//指定生成的文件的命名
.pipe(rename('all.min.js'))
//压缩
.pipe(uglify())
//输出
.pipe(dest('./dist'));
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
series () 按顺序依次执行
任务函数和/或组合操作组合成更大的操作,这些操作将按顺序依次执行 $$ series(...tasks) $$
//必填task是指任务名
series(...tasks)
//例如
series(javascript, css)
1
2
3
4
2
3
4
parallel() 同时平行执行
将任务函数和/或组合操作组合成将同时执行的更大操作 $$ parallel(...tasks) $$
//必填task是指任务名
parallel(...tasks)
//例如
parallel(javascript, css)
1
2
3
4
2
3
4
Watch() 监听事件改变
允许在发生更改时观看全局并运行任务。任务与任务系统的其余部分统一处理 $$ watch(globs, [options], [task]) $$
//监听src下的文件变化,并且同时执行
function watchAll(){
return watch('src/**', parallel(script, style),function(){
.....选填
})
}
1
2
3
4
5
6
2
3
4
5
6
Task() 任务3.0版不推荐使用
$$ task([taskName], taskFunction) $$
gulp.task('css', async() => {
await gulp.src('src/style/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('./dist'));
});
1
2
3
4
5
2
3
4
5
压缩CSS文件
function style() {
return src('src/style/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(dest('./dist'));
}
exports.style = style;
1
2
3
4
5
6
7
2
3
4
5
6
7
压缩Javascript文件
function script() {
return src('src/js/*.js')
//转义
.pipe(babel())
//重命名
.pipe(rename('all.min.js'))
//压缩
.pipe(uglify())
//输出
.pipe(dest('./dist'));
}
exports.script = script;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
压缩图片
function images() {
return src('src/images/*')
.pipe(dest('./dist/images'));
}
exports.images = images;
1
2
3
4
5
6
2
3
4
5
6
文件合并
安装npm i gulp-concat
var concat = require('gulp-concat');
//4.0版本
function concatAll(){
return gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
}
exports.concatAll = concatAll;
//官网版本
gulp.task('scripts', function() {
return gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
压缩less以及posts
var less = require('gulp-less');
var postcss = require('gulp-postcss');
function style() {
return src('src/less/*.less')
.pipe(less())
.pipe(postcss())
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(dest('./dist'));
}
exports.style = style;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
完整实例
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const cleanCSS = require('gulp-clean-css');
const { series, parallel, src, dest ,watch } = require('gulp');
function watchAll(){
return watch('src/**', parallel(script, style))
}
function script() {
return src('src/js/*.js')
.pipe(babel())
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(dest('./dist'));
}
function style() {
return src('src/style/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(dest('./dist'));
}
exports.script = script;
exports.style = style;
exports.default = watchAll;
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
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