webworld888/resources/assets/gulpfile.babel.js

import gulp from 'gulp'
import jsdoc from 'gulp-jsdoc3'
import webpack from 'webpack-stream'
import wpConfig from './webpack.config.babel.js'
import wpConfigDll, { resolveAlias } from './dll.webpack.config.babel.js'
const argv = require('minimist')(process.argv.slice(2))

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

const mode = (process.env.NODE_ENV !== 'production') ? 'develoment' : 'production'
let generateSourceMaps = mode !== 'production'
const ignore = [
  '!node_modules/**/*',
  '!./**/xe-ui-component/slickgrid/**/*',
  '!core/settings/css/bootstrap/**/*',
  '!core/plugin/swiper2/idangerous.swiper.css'
]

if (process.env.SOURCEMAPS === 'true' || process.env.SOURCEMAPS === '1') {
  generateSourceMaps = true
}

function mergeWpConfig (config) {
  const result = config

  if (argv._.includes('build')) {
    argv.p = true
  }

  result.mode = (mode === 'production' || argv.p) ? 'production' : 'development'
  result.devtool = (result.mode === 'production') ? false : 'inline-source-map'

  return result
}

const taskWebpackBundle = function () {
  return gulp.src('./webpack.config.babel.js')
    .pipe($.plumber())
    .pipe(webpack({
      config: mergeWpConfig(wpConfig),
      resolve: {
        resolveAlias
      },
      stats: 'minimal'
    }))
    .pipe(gulp.dest('../..'))
}
taskWebpackBundle.displayName = 'webpack:bundle'
taskWebpackBundle.flags = {
  '-p': 'Production mode (uglify)'
}

const taskWebpackDll = function () {
  return gulp.src('./dll.webpack.config.babel.js')
    .pipe($.plumber())
    .pipe(webpack({
      config: mergeWpConfig(wpConfigDll),
      resolve: {
        resolveAlias
      },
      stats: 'minimal'
    }))
    .pipe(gulp.dest('../..'))
}
taskWebpackDll.displayName = 'webpack:dll'
taskWebpackDll.flags = {
  '-p': 'Production mode (uglify)'
}

const taskLintScript = function () {
  return gulp.src(['./core/**/*.js', ...ignore])
    .pipe($.plumber())
    .pipe($.eslint())
    .pipe($.eslint.format())
}
taskLintScript.displayName = 'lint:script'

const taskLintScriptFix = function () {
  return gulp.src(['./core/**/*.js', ...ignore])
    .pipe($.plumber())
    .pipe($.eslint({
      fix: true
    }))
    .pipe($.eslint.format())
    .pipe(gulp.dest('./core'))
}
taskLintScriptFix.displayName = 'lint:fix-script'

const taskLintStyle = function () {
  return gulp.src(['./core/**/*.css', './core/**/*.scss', ...ignore])
    .pipe($.plumber())
    .pipe($.stylelint({
      reporters: [
        { formatter: 'string', console: true }
      ]
    }))
}
taskLintStyle.displayName = 'lint:style'

const taskFixStyle = function () {
  return gulp.src(['./core/**/*.css', './core/**/*.scss', ...ignore])
    .pipe($.plumber())
    .pipe($.stylelint({
      fix: true,
      reporters: [
        { formatter: 'string', console: true }
      ]
    }))
    .pipe(gulp.dest('./core'))
}
taskFixStyle.displayName = 'lint:fix-style'
taskFixStyle.description = '.scss 자동 교정'

const taskSass = function () {
  return gulp.src(['./core/**/*.scss', ...ignore])
    .pipe($.if(generateSourceMaps, $.sourcemaps.init()))
    .pipe($.sass({ outputStyle: 'compressed', includePaths: ['node_modules'] }).on('error', $.sass.logError))
    .pipe($.autoprefixer({
      cascade: false
    }))
    .pipe($.if(generateSourceMaps, $.sourcemaps.write('.')))
    .pipe(gulp.dest('../../assets/core'))
}
taskSass.displayName = 'sass'

const taskHtmlBuildPreview = function () {
  const options = {
    root: '../markup'
  }
  const plugins = [
    require('posthtml-extend')(options),
    require('posthtml-include')(options)
  ]

  return gulp.src(['../markup/**/src/!(_)*.html'])
    .pipe($.plumber())
    .pipe($.posthtml(plugins))
    .pipe($.rename((path) => {
      let dirname = path.dirname.split('/')
      dirname.pop()
      path.dirname = dirname.join('/')
    }))
    .pipe(gulp.dest('../markup'))
}
taskHtmlBuildPreview.displayName = 'html:preview'
taskHtmlBuildPreview.description = 'PostHTML: 미리보기 생성'

const taskHtmlBuildSync = function () {
  const options = {
    root: './resources/markup'
  }
  const plugins = [ require('posthtml-include')(options) ]

  return gulp.src('resources/markup/src/views/**/*.html')
    // .pipe($.plumber())
    .pipe($.posthtml(plugins))
    .pipe($.rename({ extname: '.html' }))
    .pipe(gulp.dest('resources/sync-views'))
}
taskHtmlBuildSync.displayName = 'html:sync'

const taskClear = function () {
  return gulp.src('./jsdoc')
    .pipe($.clean({ force: true }))
}
taskClear.displayName = 'clear'

const taskJsdoc = function () {
  return gulp.src(['core/**/*.js', ...ignore])
    .pipe(jsdoc({
      'opts': {
        'destination': './jsdoc',
        'template': 'node_modules/docdash',
        'allowEmpty': true
      }
    }))
}
taskJsdoc.displayName = 'jsdoc'

const taskWatch = function () {
  gulp.watch(['./core/**/*.scss', ...ignore], taskSass)
  gulp.watch(['./core/**/*.js', './core/**/*.vue', ...ignore], gulp.series(taskWebpackDll, taskWebpackBundle))
}

const taskBuild = gulp.series(taskWebpackDll, taskWebpackBundle, taskSass)
taskBuild.displayName = 'build'

const taskWebpack = gulp.series(taskWebpackDll, taskWebpackBundle)
taskWebpack.displayName = 'webpack'
taskWebpack.flags = {
  '-p': 'Production mode (uglify)'
}

gulp.task(taskBuild)
gulp.task(taskSass)
gulp.task(taskLintStyle)
gulp.task(taskFixStyle)
gulp.task(taskLintScript)
gulp.task(taskLintScriptFix)

// PostHTML
gulp.task(taskHtmlBuildPreview)

// webpack
gulp.task(taskWebpack)
gulp.task(taskWebpackBundle)
gulp.task(taskWebpackDll)

gulp.task('watch', taskWatch)

gulp.task('jsdoc', gulp.series(taskClear, taskJsdoc))