Gulp4 Koa項目簡單配置示例

darkerXi 發布于2019-08-23 14:51 / 854人閱讀

摘要：介紹這段配置是之前的版本不適配新版本后，更新到了的新寫法。在業務中，目前使用這份配置的是一個項目，所以增加了來啟動。

介紹

這段配置是之前的gulp版本不適配新版本node后，更新到了gulp4的新寫法。

在業務中，目前使用這份配置的是一個Koa2+njk項目，所以增加了nodemon來啟動server。

分別用到的技術為：

Less + autoprefixer + cleancss + sourceMap

Js + es6(babel) + uglify + sourceMap

BrowserSync For auto reload

Nodemon for restart Koa2 server

配置

廢話不多說，上代碼：

/*
 * Gulp4通用配置
 * Author: Kinice
 * Time: 2018-12-26
 */
const gulp = require("gulp")
const path = require("path")
const less = require("gulp-less")
const browserSync = require("browser-sync").create()
const reload = browserSync.reload
const cleancss = require("gulp-cssnano")
const autoprefixer = require("gulp-autoprefixer")
const pump = require("pump")
const uglify = require("gulp-uglify")
const sourcemaps = require("gulp-sourcemaps")
const babel = require("gulp-babel")
const nodemon = require("gulp-nodemon")
const changed = require("gulp-changed")
const config = require("./config")
const port = process.env.PORT || config.port

// 將所需的資源path放到一起便于管理
const paths = {
  style: {
    src: "src/less/**/*.less",
    dest: "public/css/"
  },
  script: {
    src: "src/js/**/*.js",
    dest: "public/js/"
  },
  view: {
    src: "views/**/*.njk",
    dest: "views/"
  }
}

// 處理less的task
function style(callback) {
  // pump提供了中斷pipe的callback
  return pump([
    gulp.src(path.join(__dirname, paths.style.src)),
    // 開啟sourcemap以方便調試
    sourcemaps.init(),
    less(),
    autoprefixer({
      browsers: [
        ">1%",
        "last 10 version",
        "iOS >= 8"
      ]
    }),
    cleancss(),
    sourcemaps.write("maps"),
    gulp.dest(path.join(__dirname, paths.style.dest)),
    reload({
      stream: true
    })
  ], callback)
}

// 處理js的task
function script(callback) {
  return pump([
    gulp.src(path.join(__dirname, paths.script.src)),
    sourcemaps.init(),
    babel(),
    uglify(),
    sourcemaps.write("maps"),
    gulp.dest(path.join(__dirname, paths.script.dest))
  ], callback)
}

// 監測文件修改并調用相應task之后刷新頁面
function watch() {
  gulp.watch(path.join(__dirname, paths.style.src), style)
  gulp.watch(path.join(__dirname, paths.script.src), script)

  gulp.watch(path.join(__dirname, `${paths.style.dest}*.css`)).on("change", reload)
  gulp.watch(path.join(__dirname, `${paths.script.dest}*.js`)).on("change", reload)
  gulp.watch(path.join(__dirname, `${paths.view.dest}*.njk`)).on("change", reload)
}

// 使用nodemon啟動node server，如果不含node就去掉
function server() {
  nodemon({
    script: "app.js"
  })
  browserSync.init({
    proxy: `http://localhost:${port}`
  })
}

exports.style = style
exports.script = script
exports.watch = watch

// 同步執行script和style task
let build = gulp.parallel(script, style)

// 先build，再同步啟動node server和開啟文件監測
gulp.task("default", gulp.series(build, gulp.parallel(server, watch)))

GPU云服務器云服務器 webrtc 簡單示例最簡單的webrtc示例 html5簡單示例 koa配置騰訊云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101253.html

【譯】相對完整的Gulp4升級指南

摘要：跟現在的類似的，把命令行工具從的核心代碼中剝離了。和都能使用獨立出來的命令行工具。是無法做出相應的區分的。之前的中，在我們傳入一個通配符和可選參數后，我們可以再指定一個任務數組或者一個回調函數用來處理事件數據。原文鏈接：The Complete-Ish Guide to Upgrading to Gulp 4 雖然Gulp4始終在開發中，但是你要堅信在將來的某一天你一定可以等到它的正...

leanote 2019-08-19 18:25 評論0 收藏0
gulp4.0升級小記

摘要：前言周日在公司的新電腦在以前配置的目錄按下時發現報了錯，百度了一下得知原來已經到了版本，就花了一點時間去升了個級，順便記下我個人使用到的配置文件新版本的不同點，文筆和水平有限，多多見諒新引入新引入的可替換老版的和，代碼更簡潔是任務監聽是任務前言周日在公司的新電腦在以前gulp3.9配置的目錄按下npm install時發現報了錯，百度了一下得知原來gulp已經到了4.0版本，就花了...

zorpan 2019-08-23 18:12 評論0 收藏0
gulp入門

摘要：通過輸入文件流，將文件寫入硬盤，并輸出所有數據，能繼續向下游，所以文件流可以繼續被處理并被寫入到其他地方。如果寫入文件夾不存在，就會創建它。第二個參數，當前任務依賴的任務列表，依賴任務在當前任務運行之前完成。 gulp 簡介用自動化構建工具增強你的工作流程。通過代碼優于配置的策略，Gulp 讓簡單的任務簡單，復雜的任務可管理。利用 Node.js 流的威力，你可以快速構建項目并...

kycool 2019-08-23 14:44 評論0 收藏0
【項目記錄】個人主頁設計和實現

摘要：生活記錄日志畫書音影，豆瓣再合適不過。卡片動畫效果右邊框模擬光標，一個邊框顏色透明實色透明的無限動畫寬度控制字符顯示長度，使用函數將動畫分段，產生間隔效果項目倉庫線上效果主內容區布局豆瓣卡片動畫頁腳設計卡片動畫思路希望有一個站點可以歸并技術文章、產品探索、生活記錄和項目代碼。技術文章Hexo活躍齊全的生態的確很誘人，但通過Github管理文章、圖片資源其實并不是很優雅。再者，存在...

hiYoHoo 2019-08-30 15:54 評論0 收藏0
vue + vuex + koa2開發環境搭建及示例開發

摘要：開發既是一個練習如何在開發環境中寫代碼的過程，反過來，也是一個驗證環境搭建的對不對好不好用的過程。前端調用后端接口示例為突出重點，排除干擾，方便理解。寫在前面這篇文章的主要目的是學會使用koa框架搭建web服務，從而提供一些后端接口，供前端調用。搭建這個環境的目的是：前端工程師在跟后臺工程師商定了接口但還未聯調之前，涉及到向后端請求數據的功能能夠走前端工程師自己搭建的http路徑...

xioqua 2019-08-22 13:56 評論0 收藏0