Add webpack to be used when building vue and JS
This commit is contained in:
Dane Everitt
parent
8d704ae5c8
commit
3c47c1565f
32
gulpfile.js
32
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: [
|
||||
'./resources/assets/pterodactyl/scripts/**/*.js',
|
||||
'./node_modules/jquery/dist/jquery.js',
|
||||
],
|
||||
src: './resources/assets/pterodactyl/scripts/**/*.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.scripts.src, scripts);
|
||||
gulp.watch(paths.styles.src, gulp.series(function cleanStyles() {
|
||||
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));
|
||||
|
|
|
|||
80
package.json
80
package.json
|
|
@ -1,36 +1,48 @@
|
|||
{
|
||||
"name": "pterodactyl-panel",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^8.2.0",
|
||||
"babel-cli": "6.18.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-plugin-transform-strict-mode": "^6.18.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"del": "^3.0.0",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-babel": "^7.0.1",
|
||||
"gulp-cli": "^2.0.1",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-cssmin": "^0.2.0",
|
||||
"gulp-if": "^2.0.2",
|
||||
"gulp-postcss": "^7.0.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-rev": "^8.1.1",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"jquery": "^3.3.1",
|
||||
"postcss": "^6.0.21",
|
||||
"postcss-import": "^11.1.0",
|
||||
"tailwindcss": "^0.5.1",
|
||||
"vue": "^2.5.16",
|
||||
"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": {}
|
||||
"name": "pterodactyl-panel",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^8.2.0",
|
||||
"axios": "^0.18.0",
|
||||
"babel-cli": "6.18.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-plugin-transform-strict-mode": "^6.18.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"del": "^3.0.0",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-babel": "^7.0.1",
|
||||
"gulp-cli": "^2.0.1",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-cssmin": "^0.2.0",
|
||||
"gulp-if": "^2.0.2",
|
||||
"gulp-postcss": "^7.0.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-rev": "^8.1.1",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"jquery": "^3.3.1",
|
||||
"lodash": "^4.17.5",
|
||||
"postcss": "^6.0.21",
|
||||
"postcss-import": "^11.1.0",
|
||||
"postcss-preset-env": "^3.4.0",
|
||||
"postcss-scss": "^1.0.4",
|
||||
"tailwindcss": "^0.5.1",
|
||||
"vue": "^2.5.7",
|
||||
"vue-axios": "^2.1.1",
|
||||
"vue-devtools": "^3.1.9",
|
||||
"vue-loader": "^14.2.2",
|
||||
"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": {}
|
||||
}
|
||||
|
|
|
|||
1695
tailwind.js
1695
tailwind.js
File diff suppressed because it is too large
Load Diff
|
|
@ -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: [],
|
||||
};
|
||||
Loading…
Reference in New Issue