简单项目的Gulp 配置

简单的展示页面就没必要用框架了,pug + gulp 就够了。还能减少代码量。

const { src, dest, parallel, watch ,series} = require('gulp')
const plugins = require('gulp-load-plugins')()
const browserSync = require('browser-sync').create()
const rename = require("gulp-rename")
var reload  = browserSync.reload

// 移动静态资源
function moveStatic () {
  return src('./src/assets/*')
        .pipe(dest('./dist/assets/'))
}

// 获取css
function getStyle() {
  return src('./src/style/style.css')
        .pipe(dest('./dist/'))
}

// 获取JS
function getJS() {
  return src('./src/lib/index.js')
        .pipe(dest('./dist/'))
}

// 国际化-en 打包html
function buildEn () {
  process.env.NODE_ENV = 'en'
  return src('./src/html/index.pug')
    .pipe(plugins.plumber()) // 捕获处理任务中的错误
    .pipe(plugins.pug({ pretty: true}))
    .pipe(rename('en.html'))
    .pipe(dest('./dist/'))
}

// 国际化-id 打包html
function buildId () {
  process.env.NODE_ENV = 'id'
  return src('./src/html/index.pug')
    .pipe(plugins.plumber()) // 捕获处理任务中的错误
    .pipe(plugins.pug({ pretty: true}))
    .pipe(rename('id.html'))
    .pipe(dest('./dist/'))
}

// 开启浏览器同步更新
browserSync.init({
  server: "./dist",
  index: 'en.html',
  port: 8889
})

const build = parallel(moveStatic, getStyle, getJS, series(buildEn,buildId))

function server (cb) {
  build()
  reload()
  cb() // 一定要有回调,不然没法继续
}

// 打包
exports.build = build

// 监听
exports.watch = function () {
  return watch(['./src/*/*', './src/*/*/*'], server)
}

你可能感兴趣的:(简单项目的Gulp 配置)