initial commit

.browserslistrc

@@ -0,0 +1 @@
+defaults

.eslintignore

@@ -0,0 +1 @@
+node_modules/

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  parser: "babel-eslint",
+  "env": {
+      "browser": true,
+      "commonjs": true,
+      "es6": true
+  },
+  "extends": [
+    "plugin:prettier/recommended"
+  ],
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 2018
+  },
+  "rules": {
+  }
+};

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+assets
+wp-includes/
+wp-includes
+Session.vim
+.tags*
+src/includes/svg/

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "useTabs": true,
+  "semi": true,
+  "singleQuote": true
+}

README.md

@@ -0,0 +1,13 @@
+* JSX transpilation and minification with Babel and Terser.
+* SASS compilation and css minification.
+
+Default build directory is `./dist`.
+
+```sh
+yarn gulp
+# for production - no sourcemaps
+yarn gulp --build
+
+```
+
+

babel.config.js

@@ -0,0 +1,4 @@
+const presets = [['@babel/env']];
+const plugins = [['transform-react-jsx']];
+
+module.exports = { presets, plugins };

editor.scss

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-room-vw-room-vw-hero {
+	border: 1px dotted #f00;
+}

gulpfile.js

@@ -0,0 +1,47 @@
+const { src, dest, series, parallel, watch } = require('gulp');
+
+const argv = require('minimist')(process.argv.slice(2));
+const babel = require('gulp-babel');
+const terser = require('gulp-terser');
+const sass = require('gulp-sass');
+const postcss = require('gulp-postcss');
+const postcssPresetEnv = require('postcss-preset-env');
+const cssnano = require('cssnano');
+
+const babelConfig = require('./babel.config.js');
+const postcssPlugins = [postcssPresetEnv(), cssnano()];
+
+const isProduction = argv.build ? argv.build : false;
+
+const buildDir = './dist/';
+const jsSrc =  './index.jsx';
+const jsDest = buildDir;
+const scssSrc = './*.scss';
+const cssDest = buildDir;
+
+function jsTranspile() {
+	return src(jsSrc, { sourcemaps: !isProduction })
+		.pipe(babel(babelConfig))
+		.pipe(terser())
+		.pipe(dest(jsDest, { sourcemaps: !isProduction }));
+}
+
+function scssCompile() {
+	return src(scssSrc, { sourcemaps: !isProduction })
+		.pipe(sass().on('error', sass.logError))
+		.pipe(postcss(postcssPlugins))
+		.pipe(dest(cssDest, { sourcemaps: !isProduction }));
+}
+
+
+const jsWatch = () =>
+	watch(jsSrc, { ignoreInitial: false }, jsTranspile);
+
+const scssWatch = () =>
+	watch(scssSrc, { ignoreInitial: false }, scssCompile);
+
+exports.default = parallel(
+	jsWatch,
+	scssWatch,
+);
+

index.jsx

@@ -0,0 +1,40 @@
+( function( wp ) {
+	const registerBlockType = wp.blocks.registerBlockType;
+	const el = wp.element.createElement;
+	const __ = wp.i18n.__;
+
+	registerBlockType( 'room-vw/room-vw-hero', {
+		title: __( 'RoomWaVW hero block', 'room-vw' ),
+		category: 'widgets',
+		supports: {
+			// Removes support for an HTML mode.
+			html: false,
+		},
+
+		edit( props ) {
+			return (
+				<article className={ props.className }>
+					<div className='imagecontainer'>
+						<ul id='js-hero-imgs' className='anim-hero'>
+							<li><span>Yah from jsx insides the editor</span></li>
+						</ul>
+					</div>
+				</article>
+			)
+		},
+
+		save() {
+			return (
+				<article className='home-hero fixed-full'>
+					<div className='imagecontainer'>
+						<ul id='js-hero-imgs' className='anim-hero'>
+							<li><span>Yah from jsx outsides the editor</span></li>
+						</ul>
+					</div>
+				</article>
+			)
+		},
+	} );
+}(
+	window.wp
+) );

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "gulp-web",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "ray <git@rayelliott.dev>",
+  "license": "MIT",
+  "private": true,
+  "devDependencies": {
+    "@babel/cli": "^7.6.2",
+    "@babel/core": "^7.6.2",
+    "@babel/polyfill": "^7.6.0",
+    "@babel/preset-env": "^7.6.2",
+    "babel-eslint": "^10.0.3",
+    "babel-preset-env": "^1.7.0",
+    "cssnano": "^4.1.10",
+    "eslint": "^6.4.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-postcss": "^8.0.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-terser": "^1.2.0",
+    "node-sass": "^4.12.0",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "1.18.2"
+  },
+  "dependencies": {
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "minimist": "^1.2.5"
+  }
+}

style.scss

@@ -0,0 +1,11 @@
+/**
+ * The following styles get applied both on the front of your site and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-room-vw-room-vw-hero {
+	background-color: #000;
+	color: #fff;
+	padding: 2px;
+}