gulp實現打包js/css/img/html文件，新建本地靜態服務，gulp-connect或gulp-webserver實現熱更新

1. 全局安裝gulp

$yarn global add gulp
或
$npm install --global gulp

2. 初始化項目（或在已有項目中初始化，生產package.json文件）

注：“entry point” 文件入口爲 gulpfile.js

4. 引入gulp依賴

$yarn add gulp
或
$npm install --save-dev gulp

5. 新建gulpfile.js文件（與package.json同級）

var gulp = require('gulp');

// gulp-connect，gulp-webserver二選一即可
var connect = require('gulp-connect'); // 使用gulp-connect新建一個本地服務------------------
var webserver = require('gulp-webserver'); // 使用gulp-connect新建一個本地服務------------------

var clean = require('gulp-clean'); // 我們在打包之前，一般需要先清空原來的文件，保證當前文件是最新的

var fileinclude = require('gulp-file-include'); // 公共代碼複用***

var gulpRemoveHtml = require('gulp-remove-html'); //標籤清除
var removeEmptyLines = require('gulp-remove-empty-lines'); //清除空白行
var htmlmin = require('gulp-htmlmin'); //html壓縮組件

var minifycss = require('gulp-minify-css'); //壓縮CSS爲一行
var autoprefixer = require('gulp-autoprefixer'); // 自動補全css前綴

// gulp-ugilfy無法壓縮ES6，如果代碼有使用ES6的語法需先編譯成ES5，否則壓縮會失敗
var uglify = require('gulp-uglify'); // 獲取 uglify 模塊（用於壓縮 JS）

var imgmin = require('gulp-imagemin'); // 壓縮圖片

var distBasePath = 'dist/'; //構建輸出的目錄



//刪除dist文件
gulp.task('clean', function () {
  return gulp.src('dist', {
      allowEmpty: true
    }) //src 匹配文件
    .pipe(clean()); //清除dist目錄
});

// 公共代碼複用***
gulp.task('fileinclude', function () {
  return gulp.src('./*.html')
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest(distBasePath));
});



//html壓縮
gulp.task('htmlcompress', function () {
  var options = {
    removeComments: true, //清除HTML註釋
    collapseWhitespace: true, //壓縮HTML
    collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input />
    removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
    minifyJS: true, //壓縮頁面JS
    minifyCSS: true //壓縮頁面CSS
  };
  return gulp.src(distBasePath + '*.html')
    .pipe(gulpRemoveHtml()) //清除特定標籤
    .pipe(removeEmptyLines({
      removeComments: true
    })) //清除空白行
    .pipe(htmlmin(options))
    .pipe(gulp.dest(distBasePath));
})

// 壓縮 css 文件
// 在命令行使用 gulp csscompress 啓動此任務
gulp.task('csscompress', function () {
  return gulp.src(['css/**/*.css'])
    .pipe(autoprefixer())
    .pipe(minifycss())
    .pipe(gulp.dest(distBasePath + 'css'));
})


//壓縮js
gulp.task('jscompress', function () {
  return gulp.src(['js/**/*.js'])
    .pipe(uglify())
    .pipe(gulp.dest(distBasePath + 'js'));
})

// 壓縮圖片
gulp.task('imgcompress', function () {
  return gulp.src(['img/**/*'])
    // .pipe(imgmin())
    .pipe(gulp.dest(distBasePath + 'img'))
})

// 三方庫複製
gulp.task('copelibrary', function () {
  return gulp.src(['lib/**/*'])
    .pipe(gulp.dest(distBasePath + 'lib'))
})



// 熱加載方式一------------------------------------------------------------
// 創建文件修改監聽任務
gulp.task('auto', function () {
  gulp.watch(['*.html'], gulp.parallel('fileinclude', 'reload'))
  gulp.watch(['./css/*.css'], gulp.parallel('csscompress', 'reload'))
  gulp.watch('./js/*.js', gulp.series('jscompress', 'reload'))
  gulp.watch('./img/*', gulp.series('imgcompress', 'reload'))
  gulp.watch('./lib/*', gulp.series('copelibrary', 'reload'))
})

// 創建熱加載任務
gulp.task('reload', function () {
  return gulp.src('dist/')
    .pipe(connect.reload());
})

// 配置本地服務
gulp.task('connect', function () {
  connect.server({
    root: 'dist',
    livereload: true,
    port: 9000
  });
});


// // 熱加載方式二------------------------------------------------------------
// // 創建文件修改監聽任務
// gulp.task('auto', function () {
//   gulp.watch(['*.html'], gulp.parallel('fileinclude', 'webServer'))
//   gulp.watch(['./css/*.css'], gulp.parallel('csscompress', 'webServer'))
//   gulp.watch('./js/*.js', gulp.series('jscompress', 'webServer'))
//   gulp.watch('./img/*', gulp.series('imgcompress', 'webServer'))
//   gulp.watch('./lib/*', gulp.series('copelibrary', 'webServer'))
// })

// gulp.task('webServer', function () {
//   gulp.src('dist')
//     .pipe(webserver({
//       host: 'localhost',
//       port: 9000,
//       path: '/',
//       livereload: true,
//       directoryListing: false,
//       fallback: '/index.html',
//       open: true,
//       proxies: []
//     }))
// })

gulp.task('compress', gulp.series('clean', 'fileinclude', gulp.parallel('htmlcompress', 'csscompress', 'jscompress', 'imgcompress', 'copelibrary')));

gulp.task('default', gulp.series('compress', gulp.parallel('connect', 'auto')))

// exports.default = gulp.series('compress', gulp.parallel('webServer', 'auto'));




// * (一個星號)，匹配一級(單層)文件。** (兩個星號)，匹配任意數量的字符(文件)，多個(兩層以上嵌套)或零個匹配

// series() 和 parallel()，允許將多個獨立的任務組合爲一個更大的操作。這兩個方法都可以接受任意數目的任務（task）函數或已經組合的操作。
// series()：使任務（task）按順序執行。
// parallel()：以最大併發來運行的任務（tasks）。

// series()：任何一個任務（task）的錯誤將導致整個任務組合結束，並且不會進一步執行其他任務。
// parallel()：一個任務的錯誤將結束整個任務組合的結束，但是其他並行的任務（task）可能會執行完，也可能沒有執行完。


// 如上示例啓動命令：gulp 任務名(taskName)
// 輸入 gulp (gulp default簡寫) 啓動服務記熱更新
// 輸入 gulp compress實現壓縮

6. gulp啓動命令

gulp 任務名(taskName)

---

番外篇

gulp-webserver的open: true屬性可實現啓動服務是自動打開瀏覽器

注：

• 端口查詢：在命令窗口中 netstat -a -n 查看自己電腦當前可用
• 端口 IP查詢：在命令窗口中 ipconfig 查詢

~ end ~

---