Update packages to latest

Removes es6-promise, which is not necessary for local development (we're all on a modern version of node).
Moves the sass file generation to a separate function, the current IIFE method is not clear.
Update autoprefixer's browserlist to use the core WordPress configuration
Add a default task, and map grunt in npm scripts

themes/wporg-5ftf/Gruntfile.js

@@ -1,31 +1,40 @@
 /* global module:false, require:function, process:object */
-
-require( 'es6-promise' ).polyfill();
-
 module.exports = function( grunt ) {
 	var isChild = 'wporg' !== grunt.file.readJSON( 'package.json' ).name;
 
+	const getSassFiles = () => {
+		const files = {};
+		const paths = [ 'settings', 'tools', 'generic', 'base', 'objects', 'components', 'trumps' ];
+
+		paths.forEach( function( component ) {
+			var paths = [
+				'../pub/wporg/css/' + component + '/**/*.scss',
+				'!../pub/wporg/css/' + component + '/_' + component + '.scss'
+			];
+
+			if ( isChild ) {
+				paths.push( 'css/' + component + '/**/*.scss' );
+				paths.push( '!css/' + component + '/_' + component + '.scss' );
+			}
+
+			files[ 'css/' + component + '/_' + component + '.scss' ] = paths;
+		} );
+
+		return files;
+	};
+
 	grunt.initConfig({
 		postcss: {
 			options: {
 				map: 'build' !== process.argv[2],
 				processors: [
 					require( 'autoprefixer' )( {
-						browsers: [
-							'Android >= 2.1',
-							'Chrome >= 21',
-							'Edge >= 12',
-							'Explorer >= 7',
-							'Firefox >= 17',
-							'Opera >= 12.1',
-							'Safari >= 6.0'
-						],
 						cascade: false
 					} ),
 					require( 'pixrem' ),
-					require('cssnano')({
+					require('cssnano')( {
 						mergeRules: false
-					})
+					} )
 				]
 			},
 			dist: {
@@ -51,22 +60,7 @@ module.exports = function( grunt ) {
 
 		sass_globbing: {
 			itcss: {
-				files: (function() {
+				files: getSassFiles(),
-					var files = {};
-
-					['settings', 'tools', 'generic', 'base', 'objects', 'components', 'trumps'].forEach( function( component ) {
-						var paths = ['../pub/wporg/css/' + component + '/**/*.scss', '!../pub/wporg/css/' + component + '/_' + component + '.scss'];
-
-						if ( isChild ) {
-							paths.push( 'css/' + component + '/**/*.scss' );
-							paths.push( '!css/' + component + '/_' + component + '.scss' );
-						}
-
-						files[ 'css/' + component + '/_' + component + '.scss' ] = paths;
-					} );
-
-					return files;
-				}())
 			},
 			options: { signature: false }
 		},
@@ -88,6 +82,8 @@ module.exports = function( grunt ) {
 	grunt.loadNpmTasks( 'grunt-sass-globbing' );
 	grunt.loadNpmTasks( 'grunt-contrib-watch' );
 
-	grunt.registerTask( 'css', ['sass_globbing', 'sass', 'postcss' ] );
+	grunt.registerTask( 'css', [ 'sass_globbing', 'sass', 'postcss' ] );
-	grunt.registerTask( 'build', ['css'] );
+
+	grunt.registerTask( 'default', [ 'css' ] );
+	grunt.registerTask( 'build', [ 'css' ] ); // Automatically runs "production" steps
 };

themes/wporg-5ftf/package.json

@@ -8,16 +8,24 @@
     "type": "git",
     "url": "https://github.com/WordPress/five-for-the-future"
   },
+  "scripts": {
+    "start": "grunt watch",
+    "build": "grunt build",
+    "dev": "grunt"
+  },
+  "browserslist": [
+    "extends @wordpress/browserslist-config"
+  ],
   "devDependencies": {
-    "autoprefixer": "^6.3.6",
+    "@wordpress/browserslist-config": "2.6.0",
-    "cssnano": "^3.7.4",
+    "autoprefixer": "9.6.1",
-    "es6-promise": "~4.0.5",
+    "cssnano": "4.1.10",
-    "grunt": "^1.0.3",
+    "grunt": "1.0.4",
-    "grunt-contrib-watch": "^1.1.0",
+    "grunt-contrib-watch": "1.1.0",
-    "grunt-postcss": "^0.8.0",
+    "grunt-postcss": "0.9.0",
-    "grunt-sass": "~3.0.1",
+    "grunt-sass": "3.1.0",
-    "grunt-sass-globbing": "^1.5.1",
+    "grunt-sass-globbing": "1.5.1",
-    "node-sass": "^4.9.3",
+    "node-sass": "4.12.0",
-    "pixrem": "^3.0.2"
+    "pixrem": "5.0.0"
   }
 }