Add webpack to be used when building vue and JS

gulpfile.js

@@ -8,6 +8,8 @@ const postcss = require('gulp-postcss');
 const rev = require('gulp-rev');
 const tailwindcss = require('tailwindcss');
 const uglify = require('gulp-uglify');
+const webpackStream = require('webpack-stream');
+const webpackConfig = require('./webpack.config.js');
 
 const argv = require('yargs')
     .default('production', false)
@@ -17,14 +19,11 @@ const paths = {
     manifest: './public/assets',
     assets: './public/assets/{css,scripts}/*.{css,js}',
     styles: {
-        src: './resources/assets/pterodactyl/css/**/*.css',
+        src: './resources/assets/pterodactyl/styles/**/*.css',
         dest: './public/assets/css',
     },
     scripts: {
-        src: [
+        src: './resources/assets/pterodactyl/scripts/**/*.js',
-            './resources/assets/pterodactyl/scripts/**/*.js',
-            './node_modules/jquery/dist/jquery.js',
-        ],
         dest: './public/assets/scripts',
     },
 };
@@ -36,14 +35,15 @@ function styles() {
     return gulp.src(paths.styles.src)
         .pipe(postcss([
             require('postcss-import'),
+            require('postcss-preset-env')({stage: 0}),
             tailwindcss('./tailwind.js'),
-            require('autoprefixer')]
+            require('autoprefixer'),
-        ))
+        ]))
         .pipe(gulpif(argv.production, cssmin()))
         .pipe(concat('bundle.css'))
         .pipe(rev())
         .pipe(gulp.dest(paths.styles.dest))
-        .pipe(rev.manifest(paths.manifest + '/manifest.json', { merge: true, base: paths.manifest }))
+        .pipe(rev.manifest(paths.manifest + '/manifest.json', {merge: true, base: paths.manifest}))
         .pipe(gulp.dest(paths.manifest));
 }
 
@@ -51,22 +51,27 @@ function styles() {
  * Build all of the waiting scripts.
  */
 function scripts() {
-    return gulp.src(paths.scripts.src)
+    return webpackStream(webpackConfig)
         .pipe(babel())
         .pipe(gulpif(argv.production, uglify()))
         .pipe(concat('bundle.js'))
         .pipe(rev())
         .pipe(gulp.dest(paths.scripts.dest))
-        .pipe(rev.manifest(paths.manifest + '/manifest.json', { merge: true, base: paths.manifest }))
+        .pipe(rev.manifest(paths.manifest + '/manifest.json', {merge: true, base: paths.manifest}))
         .pipe(gulp.dest(paths.manifest));
 }
 
 /**
- * Proves watchers.
+ * Provides watchers.
  */
 function watch() {
-    gulp.watch(paths.styles.src, styles);
+    gulp.watch(paths.styles.src, gulp.series(function cleanStyles() {
-    gulp.watch(paths.scripts.src, scripts);
+        return del(['./public/assets/css/**/*.css']);
+    }, styles));
+
+    gulp.watch([paths.scripts.src, paths.vue.src], gulp.series(function cleanScripts() {
+        return del(['./public/assets/scripts/**/*.js']);
+    }, scripts));
 }
 
 /**
@@ -81,4 +86,5 @@ exports.styles = styles;
 exports.scripts = scripts;
 exports.watch = watch;
 
+gulp.task('scripts', gulp.series(clean, scripts));
 gulp.task('default', gulp.series(clean, styles, scripts));

package.json

@@ -1,36 +1,48 @@
 {
-  "name": "pterodactyl-panel",
+    "name": "pterodactyl-panel",
-  "devDependencies": {
+    "devDependencies": {
-    "autoprefixer": "^8.2.0",
+        "autoprefixer": "^8.2.0",
-    "babel-cli": "6.18.0",
+        "axios": "^0.18.0",
-    "babel-core": "^6.26.0",
+        "babel-cli": "6.18.0",
-    "babel-plugin-transform-strict-mode": "^6.18.0",
+        "babel-core": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
+        "babel-loader": "^7.1.4",
-    "babel-register": "^6.26.0",
+        "babel-plugin-transform-runtime": "^6.23.0",
-    "del": "^3.0.0",
+        "babel-plugin-transform-strict-mode": "^6.18.0",
-    "gulp": "^4.0.0",
+        "babel-preset-es2015": "^6.24.1",
-    "gulp-babel": "^7.0.1",
+        "babel-register": "^6.26.0",
-    "gulp-cli": "^2.0.1",
+        "del": "^3.0.0",
-    "gulp-concat": "^2.6.1",
+        "gulp": "^4.0.0",
-    "gulp-cssmin": "^0.2.0",
+        "gulp-babel": "^7.0.1",
-    "gulp-if": "^2.0.2",
+        "gulp-cli": "^2.0.1",
-    "gulp-postcss": "^7.0.1",
+        "gulp-concat": "^2.6.1",
-    "gulp-rename": "^1.2.2",
+        "gulp-cssmin": "^0.2.0",
-    "gulp-rev": "^8.1.1",
+        "gulp-if": "^2.0.2",
-    "gulp-uglify": "^3.0.0",
+        "gulp-postcss": "^7.0.1",
-    "jquery": "^3.3.1",
+        "gulp-rename": "^1.2.2",
-    "postcss": "^6.0.21",
+        "gulp-rev": "^8.1.1",
-    "postcss-import": "^11.1.0",
+        "gulp-uglify": "^3.0.0",
-    "tailwindcss": "^0.5.1",
+        "jquery": "^3.3.1",
-    "vue": "^2.5.16",
+        "lodash": "^4.17.5",
-    "yargs": "^11.0.0"
+        "postcss": "^6.0.21",
-  },
+        "postcss-import": "^11.1.0",
-  "scripts": {
+        "postcss-preset-env": "^3.4.0",
-    "build:filemanager": "./node_modules/babel-cli/bin/babel.js public/themes/pterodactyl/js/frontend/files/src --source-maps --out-file public/themes/pterodactyl/js/frontend/files/filemanager.min.js",
+        "postcss-scss": "^1.0.4",
-    "watch": "./node_modules/gulp-cli/bin/gulp.js watch",
+        "tailwindcss": "^0.5.1",
-    "build": "./node_modules/gulp-cli/bin/gulp.js default",
+        "vue": "^2.5.7",
-    "build:styles": "./node_modules/gulp-cli/bin/gulp.js styles",
+        "vue-axios": "^2.1.1",
-    "build:scripts": "./node_modules/gulp-cli/bin/gulp.js scripts"
+        "vue-devtools": "^3.1.9",
-  },
+        "vue-loader": "^14.2.2",
-  "dependencies": {}
+        "vueify-insert-css": "^1.0.0",
+        "webpack": "^4.4.1",
+        "webpack-stream": "^4.0.3",
+        "yargs": "^11.0.0"
+    },
+    "scripts": {
+        "build:filemanager": "./node_modules/babel-cli/bin/babel.js public/themes/pterodactyl/js/frontend/files/src --source-maps --out-file public/themes/pterodactyl/js/frontend/files/filemanager.min.js",
+        "watch": "./node_modules/gulp-cli/bin/gulp.js watch",
+        "build": "./node_modules/gulp-cli/bin/gulp.js default",
+        "build:styles": "./node_modules/gulp-cli/bin/gulp.js styles",
+        "build:scripts": "./node_modules/gulp-cli/bin/gulp.js scripts"
+    },
+    "dependencies": {}
 }

webpack.config.js

@@ -0,0 +1,37 @@
+module.exports = {
+    entry: './resources/assets/pterodactyl/scripts/app.js',
+    output: {
+        filename: 'webpack.build.js',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+                options: {
+                    postcss: [
+                        require('postcss-import'),
+                        require('postcss-preset-env')({stage: 0}),
+                        require('tailwindcss')('./tailwind.js'),
+                        require('autoprefixer'),
+                    ]
+                }
+            },
+            {
+                test: /\.js$/,
+                exclude: /(node_modules)/,
+                use: [{
+                    loader: "babel-loader",
+                    options: { presets: ['es2015'] }
+                }]
+            },
+        ]
+    },
+    resolve: {
+        alias: {
+            'vue': 'vue/dist/vue.js'
+        },
+        extensions: ['*', '.js', '.vue', '.json']
+    },
+    plugins: [],
+};