>[ 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

* 安裝插件

*/

```

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。