>[ Gulp.js](https://www.gulpjs.com.cn/) 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

1.基本使用

```

npm i gulp-cli -g

npm i gulp -D

cnpm i gulp gulp-uglify gulp-concat

```

2.创建文件gulpfile.js键入如下

```

const gulp = require('gulp');

const uglify = require('gulp-uglify');

const concat = require('gulp-concat');

function build(done) {

gulp.src(['src/test/**/*.js'])

//src/js目录下所有js文件

.pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩

.pipe(uglify())

.pipe(gulp.dest('./build/js'))

done();

}

function hello(done){

console.log('hello');

done();

}

exports.default = gulp.series(build,hello)

```

上述代码会将src/test里面的所有js文件合并，压缩成一个文件并保存到`./bunld/js/bundle.min.js`

运行命令

```

gulp

```

返回如下

```

$ gulp

[08:51:09] Using gulpfile ~\Desktop\nodejs\gulp\gulpfile.js

[08:51:09] Starting 'default'...

[08:51:09] Finished 'build' after 17 ms

[08:51:09] Starting 'hello'...

hello

[08:51:09] Finished 'hello' after 1.65 ms

[08:51:09] Finished 'default' after 21 ms

```

**编译es6**

```

cnpm i gulp-babel @babel/core @babel/preset-env -D

```

```

const gulp = require('gulp');

const uglify = require('gulp-uglify');

const concat = require('gulp-concat');

const babel = require('gulp-babel');//引入babel

function build(done) {

gulp.src(['src/test/**/*.js'])

//src/js目录下所有js文件

.pipe(babel({

presets:['@babel/env']

}))

.pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩

.pipe(uglify())

.pipe(gulp.dest('./build/1js'))

done();

}

```

**sourcemap**

当我们执行编译时，如果代码有错会非常不利于调试，因为代码都变成一行了

解决办法是通过sourcemap。

sourcemap保留了之前编译的代码使代码容易调试，当出错时浏览器会通过sorcemap恢复源代码并定位错误

```

cnpm i gulp-sourcemaps -D

```

```

const gulp = require('gulp');

const uglify = require('gulp-uglify');

const concat = require('gulp-concat');

const babel = require('gulp-babel');

const sourcemaps = require('gulp-sourcemaps');

function build(done) {

gulp.src(['src/1.js'])

//src/js目录下所有js文件

.pipe(sourcemaps.init())//sorcemap初始化

.pipe(babel({

presets:['@babel/env']

}))

.pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩

.pipe(uglify())

.pipe(sourcemaps.write('../maps'))//sourcemap数据写入

.pipe(gulp.dest('./build/js'))

done();

}

function hello(done){

console.log('hello');

done();

}

exports.default = gulp.series(build,hello)

```

某js文件

```

alert("0134256u6i")

Datw.style.backgroundColor='red'

```

我们的代码并没有Text元素，但打包时不会报错

当html引入打包后的js文件时




直接定位了错误信息，方便调试

不过使用这个功能必须打开谷歌浏览器的Enable Javascript source maps


**css**

```

cnpm i gulp-cssmin -D

```

```

const gulp = require('gulp');

const concat = require('gulp-concat');

const cssmin = require('gulp-cssmin');

const sourcemaps = require('gulp-sourcemaps');

function build(done) {

gulp.src(['src/*.css'])

//src/js目录下所有js文件

.pipe(sourcemaps.init())//sorcemap初始化

.pipe(concat('test.min.css'))//压缩成一个文件，不指定则分别压缩

.pipe(cssmin())

.pipe(sourcemaps.write('../maps'))//sourcemap数据写入

.pipe(gulp.dest('./build/css'))

done();

}

exports.default = build;

```

**自动监听**

```

const gulp = require('gulp');

const uglify = require('gulp-uglify');

const concat = require('gulp-concat');

const babel = require('gulp-babel');

const sourcemaps = require('gulp-sourcemaps');

const watcher = gulp.watch(['./src/*.js']);

const livereload = require('gulp-livereload');

//打包函数

let js = function js(done){

gulp.src(['src/*.js'])

//src/js目录下所有js文件

.pipe(sourcemaps.init())//sorcemap初始化

.pipe(babel({

presets:['@babel/env']

}))

.pipe(concat('bundle.min.js'))//压缩成一个文件，不指定则分别压缩

.pipe(uglify())

.pipe(sourcemaps.write('../maps'))//sourcemap数据写入

.pipe(gulp.dest('./build/js'))

.pipe(livereload());

console.log(`File was changed`);

done()

}

//监听文件

function watch(){

livereload.listen();

gulp.watch('./src/*.js', js)

//重新加载对应文件

gulp.watch(['./src/*.js','./index.html']).on('change',function(path){

livereload.changed(path)

})

}

exports.default = watch;

/**

* 1.指定路径

* 2.打包指定输出的文件

* 3.压缩

* 4.输出目录

* cnpm i gulp gulp-uglify gulp-concat gulp-rename

* sourcemap 保留了之前编译的代码使代码容易调试

* 出错，浏览器通过sorcemap恢复源代码

* cnpm i gulp-sourcemaps -D\

* gulp-watch

* livereload

* cnpm i -g http-server

* cnpm i gulp-livereload -D

* 安装插件

*/

```