Gulp4 Koa项目简单配置示例

darkerXi 发布于2019-08-23 14:51 / 782人阅读

摘要：介绍这段配置是之前的版本不适配新版本后，更新到了的新写法。在业务中，目前使用这份配置的是一个项目，所以增加了来启动。

介绍

这段配置是之前的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配置腾讯云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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