>[ Gulp.js](https://www.gulpjs.com.cn/) 是一個(gè)自動(dòng)化構(gòu)建工具,開發(fā)者可以使用它在項(xiàng)目開發(fā)過程中自動(dòng)執(zhí)行常見任務(wù)。

1.基本使用

```

npm i gulp-cli -g

npm i gulp -D

cnpm i gulp gulp-uglify gulp-concat

```

2.創(chuàng)建文件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'))//壓縮成一個(gè)文件，不指定則分別壓縮

.pipe(uglify())

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

done();

}

function hello(done){

console.log('hello');

done();

}

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

```

上述代碼會(huì)將src/test里面的所有js文件合并，壓縮成一個(gè)文件并保存到`./bunld/js/bundle.min.js`

運(yùn)行命令

```

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'))//壓縮成一個(gè)文件，不指定則分別壓縮

.pipe(uglify())

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

done();

}

```

**sourcemap**

當(dāng)我們執(zhí)行編譯時(shí)，如果代碼有錯(cuò)會(huì)非常不利于調(diào)試，因?yàn)榇a都變成一行了

解決辦法是通過sourcemap。

sourcemap保留了之前編譯的代碼使代碼容易調(diào)試，當(dāng)出錯(cuò)時(shí)瀏覽器會(huì)通過sorcemap恢復(fù)源代碼并定位錯(cuò)誤

```

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'))//壓縮成一個(gè)文件，不指定則分別壓縮

.pipe(uglify())

.pipe(sourcemaps.write('../maps'))//sourcemap數(shù)據(jù)寫入

.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元素，但打包時(shí)不會(huì)報(bào)錯(cuò)

當(dāng)html引入打包后的js文件時(shí)




直接定位了錯(cuò)誤信息，方便調(diào)試

不過使用這個(gè)功能必須打開谷歌瀏覽器的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'))//壓縮成一個(gè)文件，不指定則分別壓縮

.pipe(cssmin())

.pipe(sourcemaps.write('../maps'))//sourcemap數(shù)據(jù)寫入

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

done();

}

exports.default = build;

```

**自動(dòng)監(jiān)聽**

```

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');

//打包函數(shù)

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'))//壓縮成一個(gè)文件，不指定則分別壓縮

.pipe(uglify())

.pipe(sourcemaps.write('../maps'))//sourcemap數(shù)據(jù)寫入

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

.pipe(livereload());

console.log(`File was changed`);

done()

}

//監(jiān)聽文件

function watch(){

livereload.listen();

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

//重新加載對應(yīng)文件

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 保留了之前編譯的代碼使代碼容易調(diào)試

* 出錯(cuò)，瀏覽器通過sorcemap恢復(fù)源代碼

* cnpm i gulp-sourcemaps -D\

* gulp-watch

* livereload

* cnpm i -g http-server

* cnpm i gulp-livereload -D

* 安裝插件

*/

```

總結(jié)

以上是生活随笔為你收集整理的gulpfile 编译运行_Gulp基本使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。