【Gulp】將引入的js套件合併成一個檔案

gulp-concat

在專案中打開終端機安裝gulp-concat、jquery、bootstrap套件(版本@4.6.2)

1

$ npm install gulp-concat jquery bootstrap@4.6.2

在gulpfile.js新增程式碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


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

gulp.task('concat', function(){
  return gulp
    .src([
      'node_modules/jquery/dist/jquery.slim.min.js', //引入jQuery
      'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', //引入bootstrap
      'src/js/*.js' //引入自定義js
    ])
    .pipe(concat('all.js')) // 合併檔案，名稱為：all.js
    .pipe(gulp.dest('dist/css'));
});

在終端機執行指令

1

$ gulp concat

執行結果會在src裡新增一個all.js檔

you project
├─── node_modules/        
├─── dist/
│     │
│     └─── js/
│           │
│           └─── all.js  #合併的js檔
│  
├─── src/
│     └─── js/
│           │
│           └─── all.js     
│
├─── gulpfile.js          
├─── package-lock.json    
└─── package.json

回到gulpfile.js添加任務清單

1

gulp.task('default', gulp.series('concat'));

最後，在終端機執行gulp即可完成任務

1

$ gulp

gulp

【Gulp】將引入的js套件合併成一個檔案

node.js、npm、gulp、gulpfile、package.json、gulp-concat

【Gulp】將引入的js套件合併成一個檔案

node.js、npm、gulp、gulpfile、package.json、gulp-concat

gulp-concat

其他相關