https://github.com/vomvoru/paper-theme 설명

readme.md

./build/configsByEnv/app,

./build/configsByEnv/server,

./build/configsByEnv/build

로 분리하여 처리하는 범위(환경)별로 gulpfile.js을 분리시켰으며

./build/tasks/

에서는 input된 config 변수에 따라 task가 만들어지도록 하여서 중복코드를 처리하였으며 함수화(모듈화) 하였습니다.

./build/lib/

에서는 그 외 공유되는 모듈을 정리해두었습니다.

---

configs/min/script.js 파일을 예시로 들어 설명하면 다음과 같습니다.

https://github.com/vomvoru/paper-theme/blob/master/build/configsByEnv/app/configs/min/script.js

import path from 'path'

export default (tasks, paths) => (
  {
    taskModule : tasks.min.uglify,
    config     : {
      src  : path.join(paths.dest, '**', '*.js'),
      dest : paths.dest,
    },
  }
)

taskModule 속성의 tasks.min.uglify에 따라 min/uglify.js 을 사용하여 task를 만들게 됩니다.

min/uglify.js 파일은 다음과 같습니다.

https://github.com/vomvoru/paper-theme/blob/master/build/tasks/min/uglify.js

import gulp from 'gulp'
import uglify from 'gulp-uglify'
import cached from 'gulp-cached'

export default (taskName, config) => {
  gulp.task(taskName, () => gulp.src(config.src)
    .pipe(cached(taskName))
    .pipe(uglify())
    .pipe(gulp.dest(config.dest)),
  )
}

이때 taskname 변수는 configs/min/script.js 라는 경로에 따라 'min-script'가 되며 config 변수는 configs/min/script.js 파일에 따라

설정된 config 변수가 입력됩니다.

위 시스템은 ./build/lib 풀더에 있는 파일들에 의해 구축이 되며 최종적으로 taskBuilder에 의해

task가 정의되고 이후 실행될 콜백함수를 받게 됩니다.

실제 터미널 상에서 자주 이용되는 task는 아래 gulpfile.js 에 의해 정의됩니다.

https://github.com/vomvoru/paper-theme/blob/master/build/configsByEnv/app/gulpfile.babel.js

import path from 'path'

import gulp from 'gulp'

import taskBuilder from '../../lib/taskBuilder'
import excutedWatch from '../../lib/excutedWatch'

import paths from './paths'
import configs from './configs'

const builder = taskBuilder(configs, paths)

const exts = {
  html   : '*.html',
  style  : '*.less',
  script : '*.js',
  etc    : '!(*.js|*.less|*.html)',
}

exts.cods = `+(${exts.html}|${exts.style}|${exts.script})`

builder.buildTask(() => {
  gulp.task('init',
    gulp.series('clean', 'mkdir'),
  )

  gulp.task('publish-html',
    gulp.series('trans-html', 'min-html', 'compress-html'),
  )

  gulp.task('publish-style',
    gulp.series('trans-style', 'min-style', 'compress-style'),
  )

  gulp.task('publish-script',
    gulp.series('trans-script', 'min-script', 'compress-script'),
  )

  gulp.task('publish-etc',
    gulp.series('trans-etc'),
  )

  gulp.task('dev-html',
    gulp.series('clear', 'trans-html', 'compress-html'),
  )

  gulp.task('dev-style',
    gulp.series('clear', 'trans-style', 'compress-style'),
  )

  gulp.task('dev-script',
    gulp.series('clear', 'trans-script', 'compress-script'),
  )

  gulp.task('dev-etc',
    gulp.series('clear', 'trans-etc'),
  )

  gulp.task('watch-html', () =>
    excutedWatch(path.join(paths.src, '**', exts.html),
      gulp.series('clear', 'dev-html'),
    ),
  )

  gulp.task('watch-style', () =>
    excutedWatch(path.join(paths.src, '**', exts.style),
      gulp.series('clear', 'dev-style'),
    ),
  )

  gulp.task('watch-script', () =>
    excutedWatch(path.join(paths.src, '**', exts.script),
      gulp.series('clear', 'dev-script'),
    ),
  )

  gulp.task('watch-etc', () =>
    excutedWatch(path.join(paths.src, '**', exts.etc),
      gulp.series('clear', 'dev-etc'),
    ),
  )

  gulp.task('watch-lint-html', () =>
    excutedWatch(path.join(paths.src, '**', exts.html),
      gulp.series('clear', 'lint-html'),
    ),
  )

  gulp.task('watch-lint-style', () =>
    excutedWatch(path.join(paths.src, '**', exts.style),
      gulp.series('clear', 'lint-style'),
    ),
  )

  gulp.task('watch-lint-script', () =>
    excutedWatch(path.join(paths.src, '**', exts.script),
      gulp.series('lint-script'),
    ),
  )

  gulp.task('publish',
    gulp.parallel(
      'publish-html',
      'publish-style',
      'publish-script',
      'publish-etc',
    ),
  )

  gulp.task('dev',
    gulp.series('clear',
      gulp.parallel(
        'dev-html',
        'dev-style',
        'dev-script',
        'dev-etc',
      ),
    ),
  )

  gulp.task('lint',
    gulp.series('clear',
      gulp.parallel(
        'lint-html',
        'lint-style',
        'lint-script',
      ),
    ),
  )

  gulp.task('watch',
    gulp.series('init', 'dev',
      gulp.parallel(
        'watch-html',
        'watch-style',
        'watch-script',
        'watch-etc',
      ),
    ),
  )

  gulp.task('watch-lint', () =>
    excutedWatch(path.join(paths.src, '**', exts.cods),
      gulp.series('clear',
        gulp.parallel('lint-html', 'lint-style', 'lint-script',
        ),
      ),
    ),
  )

  gulp.task('default',
    gulp.parallel(
      'watch',
      'watch-lint',
    ),
  )
})

---

build 풀더 외 다른풀더는 현재 테스트를 위해 만든 파일만 입력되어 있습니다. (app 풀더, server 풀더)

---

이후 진행하려고 고려중인 사항은 다음과 같습니다.

livereload를 적용 ( 이전에 적용하였다가 한번 전체적으로 코드를 바꿀때 삭제하였습니다 )

코드의 질을 어떻게 높일수 있을지 고민하면서 (중복코드 배제, 관심사의 분리등) 개발중에 있으며,

추후에는 mongoDB, GraphQL, Relay등을 사용하려고 고려하고 있습니다.

변수네이밍또한 추후 코드리펙토링을 진행하여 변경하려 하며

babel env preset 을 통해 브라우저별 최적화를 해볼까 생각도 하고 있습니다. (서버 request header에 포함된 브라우저 정보를 이용하여 미리 브라우저별로 컴파일된 소스를 다르게 제공)

- 이 부분은 성능적으로 더 안좋을수도 있다고 생각합니다.

브라우저 캐시 파일을 최대한으로 활용할수 있는 방안 (리소스 버전을 이용한)도 이후 진행하려고 합니다.