Gulp4 Koa項(xiàng)目簡(jiǎn)單配置示例

darkerXi 發(fā)布于2019-08-23 14:51 / 850人閱讀

摘要：介紹這段配置是之前的版本不適配新版本后，更新到了的新寫法。在業(yè)務(wù)中，目前使用這份配置的是一個(gè)項(xiàng)目，所以增加了來啟動(dòng)。

介紹

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

在業(yè)務(wù)中，目前使用這份配置的是一個(gè)Koa2+njk項(xiàng)目，所以增加了nodemon來啟動(dòng)server。

分別用到的技術(shù)為：

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以方便調(diào)試
    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)
}

// 監(jiān)測(cè)文件修改并調(diào)用相應(yīng)task之后刷新頁(yè)面
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啟動(dòng)node server，如果不含node就去掉
function server() {
  nodemon({
    script: "app.js"
  })
  browserSync.init({
    proxy: `http://localhost:${port}`
  })
}

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

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

// 先build，再同步啟動(dòng)node server和開啟文件監(jiān)測(cè)
gulp.task("default", gulp.series(build, gulp.parallel(server, watch)))