v0.0.3 - Fix webpack setup and add Video

README.md

@@ -1,4 +1,4 @@
-# Webrocket 🚀 [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
+# Webrocket 🚀 [![NPM version][npm-image]][npm-url]
 > Yo web generator by @AnataCreative
 
 ## Installation
@@ -23,7 +23,3 @@ MIT © [Anata Creative](https://anatacreative.com/)
 
 [npm-image]: https://badge.fury.io/js/generator-webrocket.svg
 [npm-url]: https://npmjs.org/package/generator-webrocket
-[travis-image]: https://travis-ci.org/IbeVanmeenen/generator-webrocket.svg?branch=master
-[travis-url]: https://travis-ci.org/IbeVanmeenen/generator-webrocket
-[daviddm-image]: https://david-dm.org/IbeVanmeenen/generator-webrocket.svg?theme=shields.io
-[daviddm-url]: https://david-dm.org/IbeVanmeenen/generator-webrocket

generators/app/templates/_package.json

@@ -21,9 +21,10 @@
 
 		"gulp-imagemin": "~3.3",
 
-		"webpack": "~3.2",
-		"webpack-dev-middleware": "~1.11",
+		"webpack": "~3.4",
+		"webpack-dev-middleware": "~1.12",
 		"webpack-hot-middleware": "~2.18",
+		"webpack-module-hot-accept": "~1.0",
 
 		"babel-core": "~6.25",
 		"babel-loader": "~7.1",

generators/app/templates/tasks/config/general.json

@@ -1,5 +1,6 @@
 {
 	"root": {
+		"npm": "./",
 		"dev": "<%= devFolderPath %>",
 		"dist": "<%= distFolderPath %>"
 	},
@@ -16,7 +17,12 @@
 	"images": {
 		"dev": "img/**/*",
 		"dist": "assets/img",
-		"extensions": ".(jpg|png|svg|gif)"
+		"extensions": ".{jpg,png,svg,gif}"
+	},
+	"video": {
+		"dev": "video/**/*",
+		"dist": "assets/video",
+		"extensions": ".{mp4,webm}"
 	},
 	"html": {
 		"dev": "html/**/*",
@@ -26,6 +32,6 @@
 	"styleguide": {
 		"dev": "styleguide",
 		"dist": "assets/styleguide",
-		"extensions": ".(html,json,md,yml)"
+		"extensions": ".{html,json,md,yml}"
 	}<% } %>
 }

generators/app/templates/tasks/config/webpack.js

@@ -14,50 +14,65 @@ const sourcePath = path.resolve(config.root.dev, config.javascript.dev);
 const distPath = path.resolve(config.root.dist, config.javascript.dist);
 
 
-const plugins = [];
-
-
-plugins.push(new webpack.NoEmitOnErrorsPlugin());
-
-plugins.push(new webpack.optimize.CommonsChunkPlugin({
-	name: 'vendor',
-	filename: 'vendors.min.js'
-}));
-
+// Plugins
+const plugins = [
+	new webpack.NoEmitOnErrorsPlugin(),
+	new webpack.optimize.CommonsChunkPlugin({
+		name: 'vendor',
+		filename: 'vendors.min.js'
+	})
+];
 
 if (isProduction()) {
 	plugins.push(
 		new webpack.optimize.UglifyJsPlugin({
 			compress: {
 				warnings: false
 			}
-		}),
-		new webpack.NoEmitOnErrorsPlugin()
+		})
 	);
 } else {
 	plugins.push(new webpack.HotModuleReplacementPlugin());
 }
 
 
+// Rules
+const rules = [{
+	test: /\.js$/,
+	exclude: path.resolve(config.root.npm, 'node_modules/'),
+	loaders: 'babel-loader',
+	options: {
+		presets: [['es2015', {
+			modules: false
+		}]]
+	}
+}];
+
+if (!isProduction()) {
+	rules.push({
+		test: /\.js$/,
+		exclude: path.resolve(config.root.npm, 'node_modules/'),
+		loaders: 'webpack-module-hot-accept'
+	});
+}
+
+
+// Entry
+const entry = [
+	path.resolve(config.root.dev, './js/app.js')
+];
+
+if (!isProduction()) {
+	entry.push('webpack-hot-middleware/client?reload=true');
+}
+
+
+// Set Config
 const webpackConfig = {
-	cache: true,
-	context: sourcePath,
-	entry: {
-		app: './app.js',
-	},
+	cache: false,
+	entry: entry,
 	module: {
-		rules: [
-			{
-				test: /\.js$/,
-				exclude: path.resolve(__dirname, 'node_modules/'),
-				loader: 'babel-loader',
-				options: {
-					presets: [['es2015', {
-						modules: false
-					}]]
-				}
-			}
-		]
+		rules: rules
 	},
 	output: {
 		path: distPath,

generators/app/templates/tasks/index.js

@@ -4,15 +4,16 @@ import clean from './clean';
 import styles from './styles';
 import javascript from './javascript';
 import images from './images';
+import video from './video';
 import html from './html';<% if (hasStyleguide) { %>
 import styleguide from './styleguide';<% } %>
 
 import server from './server';
 import watch from './watch';
 
 
-export const dev = gulp.series(clean, gulp.parallel(styles, javascript, images), html,<% if (hasStyleguide) { %> styleguide,<% } %> server, watch);
-export const build = gulp.series(clean, gulp.parallel(styles, javascript, images), html<% if (hasStyleguide) { %>, styleguide<% } %>);
+export const dev = gulp.series(clean, gulp.parallel(styles, javascript, images, video), html,<% if (hasStyleguide) { %> styleguide,<% } %> server, watch);
+export const build = gulp.series(clean, gulp.parallel(styles, javascript, images, video), html<% if (hasStyleguide) { %>, styleguide<% } %>);
 
 
 export default dev;

generators/app/templates/tasks/javascript.js

@@ -6,27 +6,35 @@ import gulp from 'gulp';
 import webpack from 'webpack';
 
 import config from './config/general';
+import isProduction from './helpers/build';
+
 import webpackConfig from './config/webpack';
 import {errorLogger, infoLogger} from './helpers/logger';
 
 
 export const javascript = (callback) => {
-	webpack(webpackConfig, (err, stats) => {
-		if (err) {
-			errorLogger('Webpack', err);
+	return new Promise((resolve) => {
+		if (isProduction()) {
+			webpack(webpackConfig, (err, stats) => {
+				if (err) {
+					errorLogger('Webpack', err);
+				}
+
+				infoLogger('Webpack', stats.toString({
+					assets: true,
+					chunks: false,
+					chunkModules: false,
+					colors: true,
+					hash: false,
+					timings: true,
+					version: false
+				}));
+
+				resolve();
+			});
+		} else {
+			resolve();
 		}
-
-		infoLogger('Webpack', stats.toString({
-			assets: true,
-			chunks: false,
-			chunkModules: false,
-			colors: true,
-			hash: false,
-			timings: true,
-			version: false
-		}));
-
-		callback();
 	});
 };
 

generators/app/templates/tasks/server.js

@@ -24,19 +24,18 @@ const serverConfig = {
 	server: {
 		baseDir: config.root.dist,
 	},
-	tunnel: false
-};
-
-if (!isProduction()) {
-	serverConfig.middleware = [
+	open: false,
+	middleware: [
 		webpackDevMiddleware(compiler, {
-			noInfo: true,
 			publicPath: path.join('/', webpackConfig.output.publicPath),
-			stats: 'errors-only'
+			stats: {
+				colors: true
+			}
 		}),
 		webpackHotMiddleware(compiler)
-	];
-}
+	],
+	tunnel: false
+};
 
 
 export const server = () => {

generators/app/templates/tasks/video.js

@@ -0,0 +1,28 @@
+/**
+ * VIDEO
+ */
+
+import gulp from 'gulp';
+import path from 'path';
+
+import config from './config/general';
+
+
+const sourceFiles = path.join(config.root.dev, config.video.dev) + config.video.extensions;
+const distPath = path.join(config.root.dist, config.video.dist);
+
+
+export const video = () => {
+	return gulp.src(sourceFiles)
+
+		// Set desitination
+		.pipe(gulp.dest(distPath));
+};
+
+
+export const watch = () => {
+	gulp.watch(sourceFiles, gulp.series(video));
+};
+
+
+export default video;

generators/app/templates/tasks/watch.js

@@ -15,6 +15,7 @@ import {watch as styleguide} from './styleguide';<% } %>
 export const watch = () => {
 	styles();
 	images();
+	video();
 	html();<% if (hasStyleguide) { %>
 	styleguide();<% } %>
 };

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "generator-webrocket",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"description": "Webrocket by @AnataCreative",
 	"license": "MIT",
 	"repository": "AnataCreative/webrocket",