操作過程：

需要配置檔案後才能執行 $ gulp命令

（1）配置一些基本資訊，執行命令：$ npm init

在git指令中，對下面每一項進行配置，注意：GitHub專案的資訊與配置檔案一一對應，如果先關聯了GitHub專案，那麼下面的基本配置中的GitHub專案資訊將自動對應生成；如果還未關聯GitHub專案，那麼配置基本資訊時，可以對應配置GitHub相關資訊。

Press ^C at any time to quit.
package name: (gulp-music-player)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository: (https://github.com/zhuyuzhu/gulp-music-player.git)
keywords:
author:
license: (ISC)
About to write to F:\GitHub\gulp-music-player\package.json:

{
  "name": "gulp-music-player",
  "version": "1.0.0",
  "description": "gulp前端自動化構建工具寫音樂播放器",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zhuyuzhu/gulp-music-player.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/zhuyuzhu/gulp-music-player/issues"
  },
  "homepage": "https://github.com/zhuyuzhu/gulp-music-player#readme"
}
 

當配置完成後，檔案中多一個檔案：package.json檔案

（2）新建一個檔案：gulpfile.js檔案，用來對gulp進行設定，規定gulp如何操作檔案

（3）執行命令：下載開發環境下的gulp依賴

$ npm install --save-dev gulp

這下依賴的外掛、檔案在自動生成的node_modules資料夾中

而且專案資料夾中多了package-lock.json檔案

同時，package.json檔案中多了：

 "devDependencies": {
    "gulp": "^3.9.1"
  }

注意：node8——npm5（可以生成package-lock.json檔案）；node6——npm3；

//gulp的四個方法：

// gulp.src()讀取檔案地址

// gulp.dest()寫入檔案， pipe 到多個資料夾，如果某資料夾不存在，將會自動建立它

// gulp.task()任務，做一些事情，內部帶有function函式

// gulp.watch()監視檔案，並且可以在檔案發生改動時候做一些事情。

通過npm指令，下載開發環境下的gulp-htmlclean外掛：gulp-htmlclean

$ npm install --save-dev gulp-htmlclean

那麼在gulpfile.json檔案中，對html程式碼的配置就可以操作

var gulp = require("gulp");
var htmlclean = require("gulp-htmlclean");
//gulp的四個方法
// gulp.src()讀取檔案地址 
// gulp.dest()寫入檔案， pipe 到多個資料夾，如果某資料夾不存在，將會自動建立它
// gulp.task()任務，做一些事情，內部帶有function函式
// gulp.watch()監視檔案，並且可以在檔案發生改動時候做一些事情。

var folder = {
    src: "src/",//開發目錄資料夾
    dist: "dist/" //壓縮打包後的資料夾
}
//建立一個操作html的任務，該任務先讀取src資料夾中的html檔案，再進行壓縮打包，再將處理後的html檔案寫入到dist資料夾中
gulp.task("html", function(){
    gulp.src(folder.src + "html/*")
        .pipe(htmlclean())
        .pipe(gulp.dest(folder.dist + "html/"))
})
gulp.task("default", ["html"])//執行該任務
 

（5）執行gulp命令：

$ gulp

其結果：將src資料夾下的html檔案，壓縮打包到dist檔案下的html檔案

 （6）壓縮打包image圖片，

1）首先要下載開發環境下的圖片壓縮外掛：gulp-imagemin

$ npm install --save-dev gulp-imagemin

2）編輯gulpfile.js關於image的程式碼：

var gulp = require("gulp");
var htmlClean = require("gulp-htmlclean");
var imageMin = require("gulp-imagemin");
//gulp的四個方法
// gulp.src()讀取檔案地址 
// gulp.dest()寫入檔案， pipe 到多個資料夾，如果某資料夾不存在，將會自動建立它
// gulp.task()任務，做一些事情，內部帶有function函式
// gulp.watch()監視檔案，並且可以在檔案發生改動時候做一些事情。

var folder = {
    src: "src/",//開發目錄資料夾
    dist: "dist/" //壓縮打包後的資料夾
}
//建立一個操作html的任務，該任務先讀取src資料夾中的html檔案，再進行壓縮打包，再將處理後的html檔案寫入到dist資料夾中
gulp.task("html", function(){
    gulp.src(folder.src + "html/*")
        .pipe(htmlClean())
        .pipe(gulp.dest(folder.dist + "html/"))
})
//處理圖片
gulp.task("images", function(){
    gulp.src(folder.src + "images/*")//src資料夾下的images資料夾下的所有檔案
        .pipe(imageMin())
        .pipe(gulp.dest(folder.dist + "images/*"))
})
gulp.task("default", ["html","images"])//執行該任務

3）執行 $ gulp 命令，對檔案進行壓縮打包：

（7）壓縮打包js檔案

1）需要下載外掛：gulp-uglify

2) gulpfile.js程式碼中配置壓縮js的程式碼