Issue #3123153 by markconroy, Irisibk, nerdstein, sumitmadan: Create 8.x-4.x...

Issue #3123153 by markconroy, Irisibk, nerdstein, sumitmadan: Create 8.x-4.x readme for build and setup instructions

themes/simplytest_theme/README.md

@@ -2,9 +2,6 @@
 title: Working with the Simplytest Theme
 ---
 
-## Note About NPM vs Yarn
-This theme _may_ work with Yarn, but so far has had more testing with NPM. For the purposes of these instructions, we are using NPM.
-
 ## Installing the Theme Dependencies
 - `cd` to `/themes/simplytest_theme/`
 - make sure you are using Node 10. Other versions may work, but the theme has been tested with Node 10. To use this, we have a `.nvmrc` file. Run `nvm use` to use set your version of Node to 10. You must [have NVM installed](https://github.com/nvm-sh/nvm) on your computer to do this.
@@ -18,6 +15,20 @@ This theme _may_ work with Yarn, but so far has had more testing with NPM. For t
 - run `gulp build` to compile to production-ready CSS.
 - run `gulp sass` to compile just the SASS.
 
+### Available Gulp Tasks
+* sass
+* sass-lint
+* js-lint
+* watch
+* build -- One time compilation & linting of sass & JS files. Included tasks:
+  *  js-lint
+  *  sass-lint
+  *  sass
+* default: Running gulp lints files and watches for changes. Included tasks:
+  * sass-lint
+  * sass
+  * watch
+
 ## Building the React Section of the Theme
 ### Development Version
 - run `npm start` to start a development server, with a development version of react. This will also include live-reloading for any changes you make. You can see the theme at `localhost:3000`

themes/simplytest_theme/gulp-tasks/build.js

@@ -2,16 +2,17 @@
  * @file
  * Task: Build task for running frontend build. Also used to compile sass & PL without watching
  * Usage: gulp build
+ * @param gulp
  */
 
-module.exports = function (gulp, plugins, options) {
+module.exports = function (gulp) {
   'use strict';
 
   // Frontend build
-  gulp.task('build', [
+  gulp.task('build', gulp.series(
     'js-lint',
     'sass-lint',
     'sass'
-  ]);
+  ));
 
 };

themes/simplytest_theme/gulp-tasks/default.js

@@ -2,16 +2,16 @@
  * @file
  * Task: Gulp.
  * Default gulp task
+ * @param gulp
  */
 
-module.exports = function (gulp, plugins, options) {
+module.exports = function (gulp) {
   'use strict';
 
   // Watch
-  gulp.task('default', [
+  gulp.task('default', gulp.series(
     'sass-lint',
     'sass',
     'watch'
-  ]);
-
+  ));
 };

themes/simplytest_theme/gulp-tasks/sass.js

@@ -3,13 +3,13 @@
  * Task: Compile: Sass.
  */
 
-module.exports = function(gulp, options, plugins) {
+module.exports = function (gulp, options, plugins) {
   'use strict';
 
-  gulp.task('sass', function() {
+  gulp.task('sass', function () {
     return gulp.src([
-        options.sass.sassFiles
-      ])
+      options.sass.sassFiles
+    ])
 
       .pipe(plugins.sourcemaps.init()) //Sourcemaps can turned off for prod. Comment this line and the sourcemaps line below if needed.
       .pipe(plugins.sassglob())
@@ -19,14 +19,14 @@ module.exports = function(gulp, options, plugins) {
           'node_modules/breakpoint-sass/stylesheets',
           'node_modules/bourbon-neat/core'
         ]
-      }).on('error', plugins.sass.logError))
+      }).on('error', function (error) {
+        var message = error.messageFormatted;
+        // Throw error instead of logging it if module is set to fail on error
+        throw message;
+      }))
       .pipe(plugins.prefix({
-        browsers: ['last 2 versions'],
         cascade: false
       }))
-      .pipe(plugins.postcss([
-        plugins.mqpacker({ sort: true})
-      ]))
       .pipe(plugins.concat('styles.css'))
       .pipe(plugins.sourcemaps.write()) //Comment this too to remove sourcemaps
       .pipe(gulp.dest(options.css.cssFiles));

themes/simplytest_theme/gulp-tasks/watch.js

@@ -4,7 +4,7 @@
  * Usage: gulp watch
  */
 
-module.exports = function(gulp, options, plugins) {
+module.exports = function (gulp, options, plugins) {
   'use strict';
 
   function lintFile(file) {
@@ -14,18 +14,18 @@ module.exports = function(gulp, options, plugins) {
   }
 
   // Keep an eye on Sass files for changes and only lint changed files
-  gulp.task('watch', function() {
+  gulp.task('watch', function () {
     gulp.watch([
       options.sass.sassFiles
-    ], function(ev) {
+    ], function (ev) {
       if (ev.type === 'added' || ev.type === 'changed') {
         lintFile(ev.path);
       }
     });
     // Compile sass changes
     gulp.watch([
-        options.sass.sassFiles
+      options.sass.sassFiles
     ],
-      ['sass']);
+      gulp.series('sass'));
   });
 };

themes/simplytest_theme/gulpfile.js

@@ -8,21 +8,25 @@
 // gulp sass-lint           -- Lints Sass Files.
 // gulp watch               -- Lints & Watches sass changes .
 
-var gulp    = require('gulp');
+var gulp = require('gulp');
 
 var plugins = require('gulp-load-plugins')({
   pattern: ['*', 'gulp-*', '@*/gulp{-,.}*'],
   rename: {
     'gulp-autoprefixer': 'prefix',
-    'css-mqpacker'     : 'mqpacker',
-    'gulp-sass-glob'   : 'sassglob'
+    'gulp-group-css-media-queries': 'gcmq',
+    'gulp-sass-glob': 'sassglob',
+    'gulp-eslint': 'eslint',
+    'postcss-clean': 'clean',
+    'gulp-sourcemaps': 'sourcemaps'
   }
 });
 
 // Directories
-var sassFiles       = 'sass/**/*.scss';
-var cssDir          = 'css';
-var jsDir           = 'js/*.js';
+var sassFiles = 'sass/**/*.scss';
+var cssDir = 'css';
+var jsDir = 'js/src/*.js';
+var optimizedJSDir = 'js/*.js'
 
 'use strict';
 var options = {
@@ -39,15 +43,16 @@ var options = {
 
   //--------- JS ---------------
   js: {
-    jsFiles: jsDir
+    jsFiles: jsDir,
+    optimizedDir: optimizedJSDir,
   }
 };
 
 
 // Tasks
-require('./gulp-tasks/default')(gulp, options, plugins);
 require('./gulp-tasks/sass')(gulp, options, plugins);
 require('./gulp-tasks/sass-lint')(gulp, options, plugins);
 require('./gulp-tasks/js-lint')(gulp, options, plugins);
 require('./gulp-tasks/watch')(gulp, options, plugins);
-require('./gulp-tasks/build')(gulp, options, plugins);
\ No newline at end of file
+require('./gulp-tasks/build')(gulp, options, plugins);
+require('./gulp-tasks/default')(gulp, options, plugins);
\ No newline at end of file

themes/simplytest_theme/package.json

@@ -5,23 +5,31 @@
   "main": "js/scripts.js",
   "license": "MIT",
   "dependencies": {
-    "bourbon-neat": "^2.1.0",
-    "breakpoint-sass": "^2.7.1",
-    "css-mqpacker": "^6.0.2",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^4.1.0",
+    "node-sass": "^4.12.0"
+  },
+  "devDependencies": {
+    "eslint-config-prettier": "^3.3.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-prettier": "^3.1.0",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^6.0.0",
     "gulp-concat": "^2.6.1",
-    "gulp-cssnano": "^2.1.2",
-    "gulp-eslint": "^4.0.2",
-    "gulp-exec": "^3.0.1",
-    "gulp-load-plugins": "^1.5.0",
-    "gulp-postcss": "^7.0.1",
-    "gulp-sass": "^3.1.0",
-    "gulp-sass-glob": "^1.0.8",
-    "gulp-sass-lint": "^1.3.4",
+    "gulp-eslint": "^6.0.0",
+    "gulp-group-css-media-queries": "^1.2.2",
+    "gulp-load-plugins": "^2.0.0",
+    "gulp-postcss": "^8.0.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-sass-glob": "^1.1.0",
+    "gulp-sass-lint": "^1.4.0",
     "gulp-sourcemaps": "^2.6.4",
-    "merge-stream": "^1.0.1",
-    "natives": "^1.1.6",
-    "path": "^0.12.7"
-  }
+    "gulp-uglify": "^3.0.2",
+    "postcss-clean": "^1.1.0",
+    "prettier": "1.15.3"
+  },
+  "browserslist": [
+    "> 2%",
+    "last 2 versions",
+    "IE 11"
+  ]
 }