Plugin: Adding a build process (#282)

This includes:

 - Using babel ES-latest
 - Using Webpack
 - Using ESlint
 - Using Sass and auto-prefixer

.gitignore

@@ -1 +1,2 @@
 node_modules
+plugin/build

plugin/.babelrc

@@ -0,0 +1,9 @@
+{
+	"presets": [
+		[ "latest", {
+			"es2015": {
+				"modules": false
+			}
+		} ]
+	]
+}

plugin/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

plugin/.eslintrc.json

@@ -0,0 +1,55 @@
+{
+	"root": true,
+	"extends": "wordpress",
+	"env": {
+		"browser": true
+	},
+	"parserOptions": {
+		"sourceType": "module"
+	},
+	"rules": {
+		"array-bracket-spacing": [ "error", "always" ],
+		"brace-style": [ "error", "1tbs" ],
+		"comma-spacing": "error",
+		"comma-style": "error",
+		"computed-property-spacing": [ "error", "always" ],
+		"dot-notation": "error",
+		"eol-last": "error",
+		"func-call-spacing": "error",
+		"indent": [ "error", "tab", { "SwitchCase": 1 } ],
+		"key-spacing": "error",
+		"keyword-spacing": "error",
+		"no-console": "error",
+		"no-debugger": "error",
+		"no-dupe-args": "error",
+		"no-dupe-keys": "error",
+		"no-duplicate-case": "error",
+		"no-else-return": "error",
+		"no-extra-semi": "error",
+		"no-lonely-if": "error",
+		"no-mixed-spaces-and-tabs": "error",
+		"no-multiple-empty-lines": [ "error", { "max": 1 } ],
+		"no-multi-spaces": "error",
+		"no-negated-in-lhs": "error",
+		"no-nested-ternary": "error",
+		"no-redeclare": "error",
+		"no-shadow": "error",
+		"no-unreachable": "error",
+		"no-use-before-define": [ "error", "nofunc" ],
+		"object-curly-spacing": [ "error", "always" ],
+		"padded-blocks": [ "error", "never" ],
+		"quote-props": [ "error", "as-needed", { "keywords": true } ],
+		"semi": "error",
+		"semi-spacing": "error",
+		"space-before-blocks": [ "error", "always" ],
+		"space-before-function-paren": [ "error", "never" ],
+		"space-in-parens": [ "error", "always" ],
+		"space-infix-ops": [ "error", { "int32Hint": false } ],
+		"space-unary-ops": [ "error", {
+			"overrides": {
+				"!": true
+			}
+		} ],
+		"valid-jsdoc": [ "error", { "requireReturn": false } ]
+	}
+}

plugin/editor/assets/stylesheets/main.scss

@@ -0,0 +1,13 @@
+.gutenberg {
+	background: #fff;
+	margin: -20px 0 0 -20px;
+	padding: 60px;
+}
+
+.gutenberg__editor {
+	max-width: 700px;
+	margin: 0 auto;
+	img {
+		max-width: 100%;
+	}
+}

plugin/editor/index.js

@@ -0,0 +1,3 @@
+import 'assets/stylesheets/main.scss';
+
+console.log( 'Welcome to gutenberg' ); // eslint-disable-line no-console

plugin/index.php

@@ -21,7 +21,7 @@ function gutenberg_menu() {
 
 function gutenberg_scripts_and_styles( $hook ) {
 	if ( $hook === 'toplevel_page_gutenberg' ) {
-		wp_enqueue_style( 'gutenberg_css', plugins_url( 'style.css', __FILE__ ) );
+		wp_enqueue_script( 'gutenberg_js', plugins_url( 'build/app.js', __FILE__ ) );
 	}
 }
 add_action( 'admin_enqueue_scripts', 'gutenberg_scripts_and_styles' );

plugin/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "gutenberg",
+  "version": "1.0.0",
+  "description": "Prototyping a new WordPress editor experience",
+  "main": "build/app.js",
+  "repository": "git+https://github.com/WordPress/gutenberg.git",
+  "author": "The WordPress Contributors",
+  "license": "GPL-2.0+",
+  "keywords": [
+    "WordPress",
+    "editor"
+  ],
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack",
+    "clean": "rimraf build"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.7",
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-preset-latest": "^6.24.0",
+    "cross-env": "^3.2.4",
+    "css-loader": "^0.27.3",
+    "eslint": "^3.17.1",
+    "eslint-config-wordpress": "^1.1.0",
+    "node-sass": "^4.5.0",
+    "postcss-loader": "^1.3.3",
+    "rimraf": "^2.6.1",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.14.1",
+    "webpack": "^2.2.1"
+  }
+}

plugin/style.css

@@ -1,14 +1 @@
-.gutenberg {
-	background: #fff;
-	margin: -20px 0 0 -20px;
-	padding: 60px;
-}
 
-.gutenberg__editor {
-	max-width: 700px;
-	margin: 0 auto;
-}
-
-.gutenberg__editor img {
-	max-width: 100%;
-}

plugin/webpack.config.js

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+
+const webpack = require( 'webpack' );
+
+const config = module.exports = {
+	entry: {
+		app: './editor/index.js'
+	},
+	output: {
+		filename: 'build/[name].js',
+		path: __dirname
+	},
+	resolve: {
+		modules: [
+			'editor',
+			'node_modules'
+		]
+	},
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				use: 'babel-loader'
+			},
+			{
+				test: /\.s?css$/,
+				use: [
+					{ loader: 'style-loader' },
+					{ loader: 'css-loader' },
+					{ loader: 'postcss-loader' },
+					{ loader: 'sass-loader' }
+				]
+			}
+		]
+	},
+	plugins: [
+		new webpack.LoaderOptionsPlugin( {
+			minimize: process.env.NODE_ENV === 'production',
+			debug: process.env.NODE_ENV !== 'production',
+			options: {
+				postcss: [
+					require( 'autoprefixer' )
+				]
+			}
+		} )
+	]
+};
+
+if ( 'production' === process.env.NODE_ENV ) {
+	config.plugins.push( new webpack.optimize.UglifyJsPlugin() );
+} else {
+	config.devtool = 'source-map';
+}