自动化构建 #

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的形参，内部提供一些创建任务时可以用到的 API

module.exports = grunt =>{
    // 注册任务 npm grunt foo 执行任务（npm grunt npm 会在 node_modules中自动找到提供的一些命令）
    grunt.registerTask('foo',()=>{
        console.log('hello grunt~');
    })

    // 第二个参数添加描述信息，在执行 npm grunt --help 查看帮助的时候可以看到描述信息
    grunt.registerTask('bar','描述信息',()=>{
        console.log('other task~');
    })

    // 默认执行的任务指定名为 default 的任务
    // grunt.registerTask('default',()=>{
    //     console.log('default task~');
    // })

    // 使用 defalut 默认任务来映射其他任务
    grunt.registerTask('default',['foo','bar'])

    // grunt 默认支持的是同步任务，所以这里的异步代码没有被执行
    // grunt.registerTask('async-task',()=>{
    //     setTimeout(() => {
    //         console.log('async task working~');
    //     }, 1000);
    // })

    // 如果要执行异步操作，必须通过 this.async() 的方法得到一个回调函数，
    // 在异步操作完成过后去调用这个回调函数，标识一下这个任务已经完成
    // 如果要在这个函数中使用 this ，那就不能使用箭头函数
    grunt.registerTask('async-task',function(){
        const done = this.async()
        setTimeout(() => {
            console.log('async task working~');
            done()
        }, 1000);
    })
}

module.exports = grunt =>{
    // 添加 return false，标记任务失败
    grunt.registerTask('bad', ()=>{
        console.log('bad working~');
        return false
    })

    grunt.registerTask('foo', ()=>{
        console.log('foo task~');
    })

    grunt.registerTask('bar',()=>{
        console.log('bar task~');
    })

    // 正常情况下，执行default会依次执行 foo，bad，bar，但是bad标记了失败，就不会在执行bar
    // yarn grunt default --force 强制执行所有任务
    grunt.registerTask('default',['foo','bad','bar'])

    // 异步任务不能执行通过 return false来标记任务失败，而是通过 done(false) 的方式
    grunt.registerTask('bad-async',function(){
        const done = this.async()
        setTimeout(() => {
            console.log('bad async');
            done(false)
        }, 1000);
    })
}

module.exports = grunt =>{
    // 配置 api
    grunt.initConfig({
        // 属性名一般和任务名保持一致
        foo:'123',
        bar:{
            val:'456'
        }

    })

    grunt.registerTask('foo', ()=>{
        console.log(grunt.config('foo'));
    })

    grunt.registerTask('bar', ()=>{
        console.log(grunt.config('bar.val'));
    })
}

module.exports = grunt =>{
    grunt.initConfig({
        // 所有指定的每一个属性的键，都会成为一个目标，除了指定的 options 以外，
        // options 指定的信息会作为这个任务的配置选项出现
        build: {
            options:{
                foo:'123'
            },
            // 如果目标的配置也是一个对象的话，在这个属性当中也可以添加一个 options，
            // 这个 options 会覆盖对象中的 options
            css: {
                options:{
                    foo:'456'
                }
            },
            js: '2'
        }
    })
    // 通过 grunt.registerMultiTask 注册多目标模式，可以让任务根据 grunt.initConfig 配置形成多个子任务
    grunt.registerMultiTask('build', function(){
        // 通过 this.target 拿到当前执行这个目标的名称，this.data 可以拿到这个 target 所对应的配置数据
        console.log(`target：${this.target}，data：${this.data}`);
        console.log(this.options());
    })
}

// yarn add grunt-contrib-clean

module.exports = grunt =>{
    // grunt-contrib-clean 任务是一种多目标任务，我们需要去配置不同的目标
    grunt.initConfig({
        clean: {
            // temp:'temp/app.js' // 清除 temp下的app.js
            // temp:'temp/*.txt' // 使用通配符 清除 temp 下的所有的 txt 文件
            temp:'temp/**' // 使用通配符 清除 temp 下的所有文件
        }
    })
    // 通过 grunt.loadNpmTasks('grunt-contrib-clean') 加载插件提供的任务
    grunt.loadNpmTasks('grunt-contrib-clean')
}

// yarn add load-grunt-tasks --dev 加载所有的 grunt 插件中的任务，不需要一一引入
// sass: yarn add grunt-sass sass --dev
// babel: yarn add grunt-babel @babel/core @babel/preset-en --dev
// yarn add grunt-contrib-watch --dev 监听热更新

const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')

module.exports = grunt =>{
    grunt.initConfig({
        
        sass:{
            options:{
                sourceMap: true,
                // implementation 用来指定 grunt-sass 当中使用哪个模块来处理 sass 的编译
                implementation: sass
            },
            main:{
                file:{
                    // 输出文件:源文件
                    'dist/css/main.css':'src/scss/main.scss'
                }
            }
        },
        babel: {
            options:{
                sourceMap: true,
                // 加载最新的 es 的特性
                presets: ['@babel/preset-env']
            },
            main: {
                files: {
                    'dist/js/app.js': 'src/js/app.js'
                }
            }
        },
        watch: {
            js:{
                files: ['src/js/*.js'],
                // 当文件发生改变后执行的任务
                tasks: ['babel']
            },
            css:{
                files: ['src/scss/*.scss'],
                // 当文件发生改变后执行的任务
                tasks: ['sass']
            }
        }
        
    })
    // grunt.loadNpmTasks('grunt-sass')
    loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的人物

    // 一开始先执行一次 sass、babel、watch
    grunt.registerTask('default',['sass','babel','watch'])
}

// gulp 的入口文件

// gulp 4.0以前定义任务的方式
// 目前还保留了这个api,但是已经不推荐使用了
// const gulp = require('gulp')
// gulp.task('bar', done => {
//   console.log('bar working~');
//   done()
// })

// 在最新的 gulp 里，取消了同步代码模式，约定每一个任务都是必须是一个异步的任务，
// 当任务执行完过后需要通过调用回调函数或者其他方式去标记这个任务已经完成
exports.foo = done => {
  console.log('foo task working~');
  done() // 标识任务完成
}

exports.default = done => {
  console.log('default task working~');
  done()
}

const { series, parallel } = require('gulp')

// 未被导出的成员函数理解成私有的任务
const task1 = done => {
  setTimeout(() => {
    console.log('task1 working~');
    done()
  }, 1000);
}

const task2 = done => {
  setTimeout(() => {
    console.log('task2 working~');
    done()
  }, 1000);
}

const task3 = done => {
  setTimeout(() => {
    console.log('task3 working~');
    done()
  }, 1000);
}

exports.foo = series(task1,task2,task3) // 创建串行任务
exports.bar = parallel(task1,task2,task3) // 创建并行任务

const fs = require('fs')

exports.callback = done =>{
  console.log('callback task~');
  done()
}

exports.callback_error = done => {
  console.log('callback task~');
  done(new Error('task failed!'))
}

exports.promise = () => {
  console.log('promise task~');
  return Promise.resolve()
}

exports.promise_error = () => {
  console.log('promise task~');
  return new Promise.reject(new Error('task failed!'))
}

const timeout = time => {
  return new Promise(resolve => {
    setTimeout(resolve, time);
  })
}
exports.async = async () => {
  await timeout(1000)
}

// exports.stream = () => {
//   const readStream = fs.createReadStream('package.json')
//   const writeStream = fs.createWriteStream('temp.txt')
//   readStream.pipe(writeStream)
//   return readStream // gulp 根据流的状态判断这个任务是否完成
// }
exports.stream = done => {
  const readStream = fs.createReadStream('package.json')
  const writeStream = fs.createWriteStream('temp.txt')
  readStream.pipe(writeStream)
  // 实际上 gulp 绑定了end事件来标记任务的结束
  readStream.on('end', () => {
    done()
  })
}

const fs = require('fs')
const { Transform } = require('stream')

exports.default = () => {
  // 文件读取流
  const read = fs.createReadStream('normalize.css')
  // 文件写入流
  const write = fs.createWriteStream('normalize.min.css')
  // 文件转换流
  const transform = new Transform({
    transform: (chunk, encoding, callback) => {
      // 核心转换过程
      // chunk => 读取流中读取到的内容（Buffer）
      const input = chunk.toString()
      const output = input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'')
      callback(null,output)
    }
  })

  // 把读取出来的文件流导入写入文件流
  read
    .pipe(transform) // 转换
    .pipe(write) // 写入

  return read
}

const { src, dest }  = require('gulp')
const cleanCss = require('gulp-clean-css') // 压缩代码 yarn add gulp-clean-css --dev
const rename = require('gulp-rename') // 重命名 yarn add gulp-rename --dev

exports.default = () => {
 // gupl 文件操作 API 可以使用通配符
  return src('src/*.css')
    .pipe(cleanCss())
    .pipe(rename({extname: '.min.css'}))
    .pipe(dest('dist'))
}

// yarn add gulp --dev

// yarn add gulp-sass --dev 文件转换流插件（可能需要翻墙安装，^4.0.2版本有指定转换流）

const { src, dest } = require('gulp')
//const sass = require('gulp-sass') // 转换流插件
const sass = require('gulp-sass')(require('node-sass')) // gulp-sass 5版本没有默认的sass编译器，需要安装和引入 sass 或者 node-sass

const style = () => {
  // 为了不让原来的目录结构丢失，src可以指定一个选项参数 base，转换时的基准路径，让'src'后面的目录结构都保存下来
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass( { outputStyle: 'expanded' } )) // 指定css样式结束括号的位置
    .pipe(dest('dist'))
}

module.exports = {
  style
}

// sass 在工作的时候会认为 _开头的文件是引用文件，会被忽略掉
// _icons.scss  _variables.scss  main.scss ==> main.css

const { src, dest } = require('gulp')
const sass = require('gulp-sass')(require('node-sass'))

// yarn add gulp-babel --dev
// yarn add @babel/core @babel/preset-env --dev
// gulp-bable 模块只负责调取 node_modules 里的 babel，所有需要单独安装babel
const babel = require('gulp-babel')

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass( { outputStyle: 'expanded' } ))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js',{ base: 'src' })
    // presets 指定 babel 指定转换插件
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

module.exports = {
  style,
  script
}

const { src, dest, parallel } = require('gulp')
const sass = require('gulp-sass')(require('node-sass'))
const babel = require('gulp-babel')

// yarn add gulp-swig --dev
const swig = require('gulp-swig')
const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Featuires',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass( { outputStyle: 'expanded' } ))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js',{ base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

const page = () => {
  // **/* 通配符匹配 src 任意子目录下的 html 文件
  return src('src/**/*.html', { base: 'src' })
    // data 指定传入模板的数据
    .pipe(swig({ data }))
    .pipe(dest('dist'))
}

// 使用组合任务（三个任务相互没有牵连，使用并行任务可以提升效率）
const compiple = parallel(style, script, page)

module.exports = {
  compiple
}

const { src, dest, parallel } = require('gulp')
const sass = require('gulp-sass')(require('node-sass'))
const babel = require('gulp-babel')
const swig = require('gulp-swig')

// yarn add gulp-imagemin --dev
// imagemin 插件也会去github下载c++的程序集，所以最好翻墙来下载
const imagemin = require('gulp-imagemin')

const data = {}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass( { outputStyle: 'expanded' } ))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js',{ base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

const page = () => {
  return src('src/**/*.html', { base: 'src' })
    .pipe(swig({ data }))
    .pipe(dest('dist'))
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

// 对于字体文件中的svg，imagemin也可以去处理，而其他类型的字体文件不会处理
const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}


const compiple = parallel(style, script, page)

module.exports = {
  compiple
}

const { src, dest, parallel, series } = require('gulp')
const sass = require('gulp-sass')(require('node-sass'))
const babel = require('gulp-babel')
const swig = require('gulp-swig')
const imagemin = require('gulp-imagemin')

// yarn add del --dev
// 一个可以在 gulp 中使用的第三方插件，用于清除指定文件
const del = require('del')
// del是异步任务
const clean = () => {
  return del(['dist'])
}

const data = {}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass( { outputStyle: 'expanded' } ))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js',{ base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

const page = () => {
  return src('src/**/*.html', { base: 'src' })
    .pipe(swig({ data }))
    .pipe(dest('dist'))
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

// 其他文件处理任务，public 目录下文件直接移动过去
const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}

const compiple = parallel(style, script, page, image, font)

// compiple 主要处理 src 目录下的文件，所以在组合任务的基础上再用 parallel 组合一次
// 使用 series 组合串行任务，先执行清除 dist 目录的 clean 任务，再执行处理任务
const build = series(clean, parallel(compiple, extra))

module.exports = {
  build
}

// yarn add gulp-load-plugins --dev

const { src, dest, parallel, series } = require('gulp')

const del = require('del')

const loadPlugins = require('gulp-load-plugins')

// 自动载入gulp插件，识别 gulp- 后的字符
// gulp-sass => plugins.sass
// gulp-aa-bb => plugins.aaBb 多个斜杠识别为驼峰
const plugins = loadPlugins()



// del是异步任务
const clean = () => {
  return del(['dist'])
}

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Featuires',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}

const style = () => {
  // 为了不让原来的目录结构丢失，src可以指定一个选项参数 base，转换时的基准路径，让'src'后面的目录结构都保存下来
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass( { outputStyle: 'expanded' } )) // 指定css样式结束括号的位置
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js',{ base: 'src' })
    // presets 指定 babel 指定转换插件
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

const page = () => {
  // **/* 通配符匹配 src 任意子目录下的 html 文件
  return src('src/**/*.html', { base: 'src' })
    // data 指定传入模板的数据
    .pipe(plugins.swig({ data }))
    .pipe(dest('dist'))
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}


const compiple = parallel(style, script, page, image, font)
const build = series(clean, parallel(compiple, extra)) 

module.exports = {
  build,
}

// yarn add browser-sync --dev

const { src, dest, parallel, series } = require('gulp')

const del = require('del')

const browserSync = require('browser-sync')
// 创建一个开发服务器，用于监听热更新
const bs = browserSync.create()

const loadPlugins = require('gulp-load-plugins')

const plugins = loadPlugins()

// del是异步任务
const clean = () => {
  return del(['dist'])
}

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Featuires',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass( { outputStyle: 'expanded' } ))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js',{ base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

const page = () => {
  // **/* 通配符匹配 src 任意子目录下的 html 文件
  return src('src/**/*.html', { base: 'src' })
    // data 指定传入模板的数据
    .pipe(plugins.swig({ data }))
    .pipe(dest('dist'))
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}

// 将这个开发服务器单独定义到一个任务当中去启动
const server = () => {
  bs.init({
    notify: false,// 不弹出提示browserSync是否已连接
    port: '2080', // 配置端口
    // open: false,// 是否自动打开浏览器
    files: 'dist/**',// browserSync 启动后监听的路径通配符（你想要哪些文件发生改变过后，browserSync 自动更新浏览器）
    server: {
      baseDir: 'dist',
      routes: { // 指定单独的路由，匹配优先于 baseDir，
        '/node_modules': 'node_modules' // 这里先用这种办法指定库文件
      }
    }
  })
}


const compiple = parallel(style, script, page, image, font)
const build = series(clean, parallel(compiple, extra)) 

module.exports = {
  build,
  server
}

// yarn add browser-sync

const { src, dest, parallel, series, watch } = require('gulp')

const del = require('del')

const browserSync = require('browser-sync')
// 创建一个开发服务器
const bs = browserSync.create()

const loadPlugins = require('gulp-load-plugins')

const plugins = loadPlugins()

const clean = () => {
  return del(['dist'])
}

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Featuires',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass( { outputStyle: 'expanded' } ))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js',{ base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

const page = () => {
  return src('src/**/*.html', { base: 'src' })
    .pipe(plugins.swig({ data,defaults: { cache: false } }))
    .pipe(dest('dist'))
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}

const server = () => {
  
  /**
   * 通过 gulp 的 watch 监听以下目录的变化来实现热更新
   *
   */
  watch('src/assets/styles/*.scss',style)
  watch('src/assets/scripts/*.js',script)
  watch('src/**/*.html',page)  // 模板引擎swig的热更新需要将 cache 设为 false
  /**
   * 对于图片、字体、一些额外文件在开发阶段编译没有太大意义，
   * 例如：图片实现的是无损压缩，并不影响最终在页面中的呈现，
   * 这就意味着，在开发阶段去监视更多的文件，做更多的任务，开销也就更多，
   * 而这个开销在开发阶段是没有意义的，只是在发布之前上线之前希望通过压缩一下，来减小一下上线的体积，从而提高网站运行的效率，
   * watch('src/assets/images/**',image)
   * watch('src/assets/fonts/**',font)
   * watch('public/**',extra)
   */
  // 所以我们通过监听这类文件的变化，自动更新浏览器，浏览器重新发起对这些文件的请求，而不是执行构建任务
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ],bs.reload)

  bs.init({
    notify: false,// 不弹出提示browserSync是否已连接
    port: '2080', // 配置端口
    // open: false,// 是否自动打开浏览器
    /** files
     * browserSync 启动后监听的路径通配符（你想要哪些文件发生改变过后，browserSync 自动更新浏览器）
     * 也可以通过在对应的构建任务后面加上 .pipe(bs.reload({ stream: true })) 的方式实现监听
     */
    files: 'dist/**',
    server: {
      // baseDir 可以传入一个数组，依次匹配，例如：如果在dist文件中匹配不到就匹配src，src匹配不到就匹配 public
      // 这么做的目的就是像压缩图片这一类任务是在发布上线之前执行的，那么图片就不能在dist文件中匹配到
      baseDir: ['dist','src','public'],
      routes: { // 指定单独的路由，匹配优先于 baseDir，
        '/node_modules': 'node_modules' // 这里先用这种办法指定库文件
      }
    }
  })
}


const compiple = parallel(style, script, page)
// 上线之前执行的任务
const build = series(clean, parallel(compiple,  image, font, extra)) 

const develop = series(compiple,server)

module.exports = {
  build,
  server,
  develop
}