Gulp4 前端自動化工做流配置

本文首發於 我的博客：藍色夢想。若是你剛接觸 Gulp，能夠查看我之前寫的文章 Gulp構建前端自動化工做流（Gulp入門介紹）。

隨着最近把 nodejs 從 8.x 升級到了 10.x，發現 Gulp3.x 早已經不能兼容新版的 node，而且環境中的部分依賴，也已經被淘汰。 因而趁此機會，把 Gulp 升級爲 4.x 版本，並把整個環境從新改造了一下。

現已經發布至 Github 和 NPM 做爲不按期維護的一個項目。關於後續更新和維護狀況，請關注本項目的：GitHub 和 NPM 。

簡介(Introduction)

簡單實用的前端自動化工做流配置，基於 Gulp4.x

Simple and practical front-end automated workflow configuration based on Gulp4.x

特性(Features)

• SASS (CSS preprocessor)
• 圖像壓縮和轉Base64 (Images compress & save base64 image)
• JS壓縮 (JavaScript compressor)
• 熱加載 (Hot reload)
• 一套環境多項目共存 (Multi-Project Builds)

目錄結構(Directory structure)

+ project_file_name                 // Project folder(Example)
    + Build                         // Production folder(Output floder)
        - etc...
    + dist                          // Pevelopment folder(Output floder)
        - etc...
    + dist__test                    // Test folder(Output floder)
        - etc...
    + src                           // Source code
        - images                    // Image folder
        - js                        // Script folder
        - lib                       // CSS/JS library
        - scss                      // Style folder
        - project.config.js         // Project custom config
- .gitignore                        // Exclude files from git
- gulp.config.js                    // Gulp custom config
- gulpfile.js                       // Gulp config
- package.json                      // Dependency & Module list
- README.md                         // Documentation
- yarn.lock                         // Yarn
複製代碼

環境要求(Pre Required)

若是你已經全局安裝了 gulp 請先刪除舊版本後再安裝

If you've previously installed gulp globally, please remove the old version

$ npm rm --global gulp
# or
$ yarn global remove gulp
複製代碼

全局安裝 gulp-cli Install the gulp command line utility

$ npm install --global gulp-cli
# or
$ yarn global add gulp-cli
複製代碼

安裝方式(Installation)

# 安裝 - Using npm or yarn
$ npm i ublue-gulp-config
# or
$ yarn add ublue-gulp-config
複製代碼

# 安裝依賴 - Install dependency
$ npm install
# or
$ yarn install
複製代碼

使用方法(Used)

# 項目初始化 - Project initialization
$ gulp init

# 環境啓動 - Start it
$ gulp
複製代碼

環境切換(Using environment variables)

# 發佈測試環境 - Build for test environment
$ gulp init --test

# 發佈生產環境 - Build for production environment
$ gulp init --build

# 清理生產目錄 - Clean up development or production
$ gulp clean

# 清理指定環境目錄 - Clean up the specified environment directory
$ gulp clean --test
複製代碼

開源許可(License)

MIT