const gulp = require('gulp'); const webpackStream = require('webpack-stream'); const livereload = require('gulp-livereload'); const path = require('path'); const webpack = require('webpack'); const errorHandler = require('./helpers/errorHandler'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const uiFolder = 'UI'; const root = path.join(__dirname, '..', 'src'); const isProduction = process.argv.indexOf('--production') > -1; console.log('ROOT:', root); console.log('isProduction:', isProduction); const cssVarsFiles = [ '../src/Styles/Variables/colors', '../src/Styles/Variables/dimensions', '../src/Styles/Variables/fonts', '../src/Styles/Variables/animations' ].map(require.resolve); const extractCSSPlugin = new ExtractTextPlugin({ filename: path.join('_output', uiFolder, 'Content', 'styles.css'), allChunks: true, disable: false, ignoreOrder: true }); const plugins = [ extractCSSPlugin, new OptimizeCssAssetsPlugin({}), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), new webpack.DefinePlugin({ __DEV__: !isProduction, 'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development') }) ]; function babelPlugins() { const bplugins = []; bplugins.push( '@babel/plugin-proposal-class-properties', '@babel/plugin-syntax-dynamic-import', '@babel/plugin-syntax-import-meta', '@babel/plugin-proposal-json-strings', [ '@babel/plugin-proposal-decorators', { legacy: true } ], '@babel/plugin-proposal-function-sent', '@babel/plugin-proposal-export-namespace-from', '@babel/plugin-proposal-numeric-separator', '@babel/plugin-proposal-throw-expressions' ); if (process.env.NODE_ENV !== 'production') { bplugins.push('@babel/transform-react-jsx-source'); } if (process.env.NODE_ENV === 'production') { bplugins.push('transform-react-remove-prop-types'); } return bplugins; } if (isProduction) { plugins.push(new UglifyJSPlugin({ sourceMap: true, uglifyOptions: { mangle: false, output: { comments: false, beautify: true } } })); } const config = { devtool: '#source-map', stats: { children: false }, watchOptions: { ignored: /node_modules/ }, entry: { preload: 'preload.js', vendor: 'vendor.js', index: 'index.js' }, resolve: { modules: [ root, path.join(root, 'Shims'), 'node_modules' ], alias: { jquery: 'jquery/src/jquery' } }, output: { filename: path.join('_output', uiFolder, '[name].js'), sourceMapFilename: '[file].map' }, plugins, resolveLoader: { modules: [ 'node_modules', 'frontend/gulp/webpack/' ] }, module: { rules: [ { test: /\.js?$/, exclude: /(node_modules|JsLibraries)/, loader: 'babel-loader', options: { plugins: babelPlugins(), presets: ['@babel/env', '@babel/react'] } }, // CSS Modules { test: /\.css$/, exclude: /(node_modules|globals.css)/, use: extractCSSPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-variables-loader', options: { cssVarsFiles } }, { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]-[local]-[hash:base64:5]', sourceMap: true } }, { loader: 'postcss-loader', options: { config: { ctx: { cssVarsFiles }, path: 'frontend/postcss.config.js' } } } ] }) }, // Global styles { test: /\.css$/, include: /(node_modules|globals.css)/, use: [ 'style-loader', { loader: 'css-loader' } ] }, // Fonts { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: [ { loader: 'url-loader', options: { limit: 10240, mimetype: 'application/font-woff', emitFile: false, name: 'Content/Fonts/[name].[ext]' } } ] }, { test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: [ { loader: 'file-loader', options: { emitFile: false, name: 'Content/Fonts/[name].[ext]' } } ] } ] } }; gulp.task('webpack', () => { return gulp.src('index.js') .pipe(webpackStream(config, webpack)) .pipe(gulp.dest('')); }); gulp.task('webpackWatch', () => { config.watch = true; return gulp.src('') .pipe(webpackStream(config, webpack)) .on('error', errorHandler) .pipe(gulp.dest('')) .on('error', errorHandler) .pipe(livereload()) .on('error', errorHandler); });