From 8e606be761242780381c8c5bfb29f8edb33ad4f7 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Wed, 23 May 2018 00:40:37 +0300 Subject: [PATCH] build updated --- .babelrc | 17 ++++++++++-- Hudozka.Dockerfile | 8 +++--- gulpfile.js | 60 ++--------------------------------------- package.json | 30 +++++++++++++++------ webpack.config.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 110 insertions(+), 71 deletions(-) create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc index dd3ef4e1..4b88c2d8 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,17 @@ { - "presets": ["es2015", "stage-0"], - "plugins": ["transform-react-jsx"] + "presets": [ + [ + "env", + { + "targets": { + "node": "8.5.0" + } + } + ] + ], + "plugins": [ + "transform-react-jsx", + "transform-object-rest-spread", + "transform-class-properties" + ] } \ No newline at end of file diff --git a/Hudozka.Dockerfile b/Hudozka.Dockerfile index b2399a66..00674f85 100644 --- a/Hudozka.Dockerfile +++ b/Hudozka.Dockerfile @@ -2,11 +2,13 @@ FROM node:10 as build WORKDIR /app -COPY package.json package-lock.json gulpfile.js .babelrc ./ +COPY package.json package-lock.json ./ RUN npm i - +COPY webpack.config.js gulpfile.js .babelrc ./ +COPY robots.txt ./ COPY src ./src RUN npm run gulp deploy +RUN npm run build-app RUN npm run out @@ -14,7 +16,7 @@ RUN npm run out FROM node:8-alpine WORKDIR /app -COPY package.json package-lock.json gulpfile.babel.js .babelrc ./ +COPY package.json package-lock.json ./ RUN npm i --production COPY --from=build /app/out ./src diff --git a/gulpfile.js b/gulpfile.js index 658871e1..45155d61 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,29 +2,10 @@ const gulp = require('gulp') const postcss = require('gulp-postcss') const sass = require('gulp-sass') const imageMin = require('gulp-imagemin') -const uglify = require('gulp-uglify') const concat = require('gulp-concat') -const webpack = require('webpack-stream') -const named = require('vinyl-named') const autoprefixer = require('autoprefixer') const cssnano = require('cssnano') -let env = process.env['NODE_ENV'] || 'production' -let isProduction = env === 'production' - -gulp.task('compile 3rdparty', () => { - const files = [ - './node_modules/spin.js/spin.js', - - './node_modules/babel-polyfill/dist/polyfill.min.js' - ] - - return gulp.src(files) - .pipe(concat('libs.js')) - .pipe(uglify()) - .pipe(gulp.dest('./public')) -}) - gulp.task('style', () => { const processors = [ autoprefixer({ @@ -67,49 +48,12 @@ gulp.task('copy views', () => { .pipe(gulp.dest('./out/views')) }) -gulp.task('compile', () => { - const doWatch = !isProduction - const doSourceMaps = !isProduction - - return gulp.src([ - './src/public/app.js' - ]) - .pipe(named()) - .pipe(webpack({ - // devtool: doSourceMaps ? 'inline-source-map' : null, - // watch: doWatch, - output: { - filename: '[name].js' - }, - module: { - loaders: [ - {test: /\.js$/, loader: 'babel'}, - // {test: /\.html$/, loader: 'raw!html-minify'} - ] - }, - // 'html-minify-loader': { - // empty: true, - // cdata: true, - // comments: false, - // dom: { - // lowerCaseAttributeNames: false - // } - // } - })) - .pipe(gulp.dest('./public')) -}) - gulp.task('imagemin', () => { return gulp.src('./src/assets/graphics/**/*') .pipe(imageMin()) .pipe(gulp.dest('./public/graphics')) }) -gulp.task('production', () => { - isProduction = true -}) - gulp.task('default', gulp.series('style')) -gulp.task('copy', gulp.series('copy views', 'copy fonts', 'copy graphics', 'copy 3rdparty', 'copy robots.txt')) -gulp.task('deploy', gulp.series('default', 'copy', 'compile 3rdparty', 'imagemin')) -gulp.task('compile production', gulp.series('production', 'compile')) +gulp.task('copy', gulp.series('copy views', 'copy fonts', 'copy graphics', 'copy robots.txt')) +gulp.task('deploy', gulp.series('default', 'copy', 'imagemin')) diff --git a/package.json b/package.json index e6a8eba9..35aed529 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "main": "src/bin/www.js", "scripts": { "start": "node src/index.js", + "build-app": "webpack --env.NODE_ENV=production --env.TARGET=app", "out": "babel src/ -d out/", "gulp": "gulp", "test": "mocha --compilers js:babel-register", @@ -19,10 +20,6 @@ "license": "ISC", "dependencies": { "async-file": "^2.0.2", - "babel-core": "^6.7.4", - "babel-polyfill": "^6.7.4", - "babel-preset-es2015": "^6.5.0", - "babel-preset-stage-0": "^6.5.0", "co": "^4.4.0", "ejson": "^2.1.2", "handlebars": "^4.0.5", @@ -53,10 +50,22 @@ "thunkify": "^2.1.2" }, "devDependencies": { + "@babel/cli": "^7.0.0-beta.47", + "@babel/core": "^7.0.0-beta.47", + "@babel/plugin-proposal-class-properties": "^7.0.0-beta.47", + "@babel/polyfill": "^7.0.0-beta.47", + "@babel/preset-env": "^7.0.0-beta.47", + "@babel/register": "^7.0.0-beta.47", "autoprefixer": "^6.3.6", - "babel-cli": "^6.6.5", - "babel-loader": "^6.2.2", + "babel-loader": "^8.0.0-beta.3", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-react-jsx": "^6.23.0", + "babel-plugin-transform-regenerator": "^6.26.0", + "babel-polyfill": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-register": "^6.26.0", + "css-loader": "^0.28.9", "cssnano": "^3.4.0", "eslint": "^3.9.1", "eslint-config-standard": "^6.2.1", @@ -69,14 +78,19 @@ "gulp-imagemin": "~2.4.0", "gulp-postcss": "^6.0.1", "gulp-rename": "^1.2.2", - "gulp-sass": "^3.1.0", + "gulp-sass": "^4.0.1", "gulp-uglify": "~1.5.0", "html-minify-loader": "~1.1.0", + "html-webpack-plugin": "^2.30.1", "istanbul": "~0.4.2", + "less": "^3.0.4", + "less-loader": "^4.1.0", "mocha": "~2.4.5", "raw-loader": "~0.5.1", "should": "^8.2.2", + "style-loader": "^0.20.2", "vinyl-named": "~1.1.0", - "webpack-stream": "~3.1.0" + "webpack": "^3.11.0", + "webpack-merge": "^4.1.1" } } diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 00000000..753e342c --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,66 @@ +const path = require('path') +const HtmlWebpackPlugin = require('html-webpack-plugin') + +const targetDir = path.resolve(__dirname, 'public') + +module.exports = { + entry: { + app: './src/public/app.js', + }, + output: { + path: targetDir, + filename: '[name].js', + }, + + devtool: 'cheap-module-source-map', + + module: { + rules: [ + { + test: /\.jsx?/, + use: [{ + loader: 'babel-loader', + options: { + babelrc: false, + presets: [ + ['@babel/preset-env', { + 'targets': { + 'browsers': [ + 'last 2 Chrome versions', + 'last 2 Safari versions', + 'last 2 Firefox versions', + 'last 2 Edge versions', + ] + } + }] + ], + + plugins: [ + '@babel/plugin-proposal-object-rest-spread', + '@babel/plugin-proposal-class-properties', + 'transform-react-jsx', + ] + }, + }] + }, + + { + test: /\.less/, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'less-loader', + options: { + root: true + }, + }, + ] + } + ], + }, + + plugins: [ + + ] +}