Plugin: Adding a build process

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,16 @@
+{
+	"root": true,
+	"extends": "wpcalypso",
+	"parser": "babel-eslint",
+	"env": {
+		"browser": true,
+		"node": true
+	},
+	"parserOptions": {
+		"ecmaVersion": 3
+	},
+	"rules": {
+		"no-var": "off",
+		"camelcase": "off"
+	}
+}

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,36 @@
+{
+  "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",
+    "prototype"
+  ],
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack",
+    "clean": "rimraf build"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.7",
+    "babel-core": "^6.24.0",
+    "babel-eslint": "^7.1.1",
+    "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-wpcalypso": "^0.6.0",
+    "eslint-plugin-wpcalypso": "^3.0.2",
+    "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/src/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/src/index.js

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

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: './src/index.js'
+	},
+	output: {
+		filename: 'build/[name].js',
+		path: __dirname
+	},
+	resolve: {
+		modules: [
+			'src',
+			'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';
+}