Gulp打包工具使用

logo

在使用中遇到的问题

命令行里的 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

创建 gulpfile.js

touch gulpfile.js

创建这个文件的目的就是使用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

//转义
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

官方例子

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

Src（）匹配

匹配系统中的文件

3.0版本

gulp.task('js',async()=>{
  gulp.src('src/js/*.js')
})

1
2
3

4.0版本

function script(){
  return src('src/js/*.js');
  .pipe(dest('./dist'));
}

1
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

series () 按顺序依次执行

任务函数和/或组合操作组合成更大的操作，这些操作将按顺序依次执行 $$ series(...tasks) $$

//必填task是指任务名
series(...tasks)
//例如
series(javascript, css)

1
2
3
4

parallel() 同时平行执行

将任务函数和/或组合操作组合成将同时执行的更大操作 $$ parallel(...tasks) $$

//必填task是指任务名
parallel(...tasks)
//例如
parallel(javascript, css)

1
2
3
4

Watch() 监听事件改变

允许在发生更改时观看全局并运行任务。任务与任务系统的其余部分统一处理 $$ watch(globs, [options], [task]) $$

//监听src下的文件变化，并且同时执行
function watchAll(){
	return watch('src/**', parallel(script, style),function(){
    .....选填
  })
}

1
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

压缩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

压缩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

压缩图片

function images() {
  return  src('src/images/*')
    .pipe(dest('./dist/images'));
}

exports.images = images;

1
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

压缩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

完整实例

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

← JavaScript的问题记录 knex.js →

# Gulp打包工具使用

# 在使用中遇到的问题

# 4.0中有什么新东西

# 安装

# 创建 gulpfile.js

# 目录结构

# 官方例子

# Src（）匹配

# Dest () 写入

# series () 按顺序依次执行

# parallel() 同时平行执行

# Watch() 监听事件改变

# Task() 任务3.0版不推荐使用

# 压缩CSS文件

# 压缩Javascript文件

# 压缩图片

# 文件合并

# 压缩less以及posts

# 完整实例

Gulp打包工具使用

在使用中遇到的问题

4.0中有什么新东西

安装

创建 gulpfile.js

目录结构

官方例子

Src（）匹配

Dest () 写入

series () 按顺序依次执行

parallel() 同时平行执行

Watch() 监听事件改变

Task() 任务3.0版不推荐使用

压缩CSS文件

压缩Javascript文件

压缩图片

文件合并

压缩less以及posts

完整实例