From 4aa2f6a51cad7bbf4db59db7e0c70a8bc43bc272 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Mon, 3 Jul 2017 20:58:24 +0200 Subject: [PATCH 01/60] Add initial setup of the front-end workflow based on Node and Gulp (tasks: `clean`, `css`, `css-lint`). --- .eslintrc | 7 ++- .jshintrc | 3 +- fe-workflow/gulpfile.babel.js | 29 +++++++++ fe-workflow/tasks/clean.js | 14 +++++ fe-workflow/tasks/css-lint.js | 32 ++++++++++ fe-workflow/tasks/css.js | 74 ++++++++++++++++++++++ fe-workflow/utils/get-package-data.js | 6 ++ package.json | 90 ++++++++++++++++++++++++++- 8 files changed, 251 insertions(+), 4 deletions(-) create mode 100755 fe-workflow/gulpfile.babel.js create mode 100644 fe-workflow/tasks/clean.js create mode 100644 fe-workflow/tasks/css-lint.js create mode 100644 fe-workflow/tasks/css.js create mode 100644 fe-workflow/utils/get-package-data.js diff --git a/.eslintrc b/.eslintrc index d2661d1..ba9eb82 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,6 +1,11 @@ { "env": { - "browser": true + "browser": true, + "es6": true, + "node": true + }, + "parserOptions": { + "sourceType": "module" }, "globals": { "_": false, diff --git a/.jshintrc b/.jshintrc index 0a082dd..24e678a 100644 --- a/.jshintrc +++ b/.jshintrc @@ -3,7 +3,7 @@ "curly": true, "eqeqeq": true, "eqnull": true, - "es3": true, + "esversion": 6, "expr": true, "immed": true, "noarg": true, @@ -15,6 +15,7 @@ "unused": true, "browser": true, + "node": true, "globals": { "_": false, diff --git a/fe-workflow/gulpfile.babel.js b/fe-workflow/gulpfile.babel.js new file mode 100755 index 0000000..305bc7d --- /dev/null +++ b/fe-workflow/gulpfile.babel.js @@ -0,0 +1,29 @@ +import requireDir from 'require-dir'; +import gulp from 'gulp'; +import runSequence from 'run-sequence'; +import yargs from 'yargs'; + +// Define tasks for each environment. +const tasks = { + prod: [ + 'clean', + [ 'js-lint' ], + [ 'images', 'css', 'js' ], + 'assets', + 'size-report' + ], + dev: [ + 'clean', + [ 'css' ] + ] +}; + +// Load all Gulp tasks from `tasks` dir. +requireDir( 'tasks' ); + +// To add a new task, simply create a new task file in `tasks` folder. +gulp.task( 'default', done => { + const taskList = 'dev' === yargs.argv.env ? tasks.dev : tasks.prod; + + runSequence( ...taskList, done ); +} ); diff --git a/fe-workflow/tasks/clean.js b/fe-workflow/tasks/clean.js new file mode 100644 index 0000000..610caa5 --- /dev/null +++ b/fe-workflow/tasks/clean.js @@ -0,0 +1,14 @@ +import gulp from 'gulp'; +import gutil from 'gulp-util'; +import { paths } from '../utils/get-package-data'; +import del from 'del'; + +gulp.task( 'clean', done => { + if ( undefined === paths.clean ) { + gutil.log( `Missing path in '${ gutil.colors.cyan( 'clean' ) }' task, aborting!` ); + done(); + return; + } + + del( paths.clean ).then( () => done() ); +} ); diff --git a/fe-workflow/tasks/css-lint.js b/fe-workflow/tasks/css-lint.js new file mode 100644 index 0000000..aa86cd9 --- /dev/null +++ b/fe-workflow/tasks/css-lint.js @@ -0,0 +1,32 @@ +import gulp from 'gulp'; +import gutil from 'gulp-util'; +import cache from 'gulp-cached'; +import yargs from 'yargs'; +import { join } from 'path'; +import { paths } from '../utils/get-package-data'; +import gulpIf from 'gulp-if'; +import postcss from 'gulp-postcss'; +import reporter from 'postcss-reporter'; +import scss from 'postcss-scss'; +import stylelint from 'stylelint'; + +const isDev = 'dev' === yargs.argv.env; + +gulp.task( 'css-lint', () => { + if ( undefined === paths.css || undefined === paths.css.glob || undefined === paths.css.src ) { + gutil.log( `Missing path in '${ gutil.colors.cyan( 'css-lint' ) }' task, aborting!` ); + return null; + } + + return gulp + .src( join( paths.css.src, paths.css.glob ) ) + + // Caching and incremental building (progeny) in Gulp. + .pipe( gulpIf( isDev, cache( 'css-lint-task-cache' ) ) ) + + // Lint styles. + .pipe( postcss( [ + stylelint(), + reporter( { clearMessages: true } ) + ], { syntax: scss } ) ); +} ); diff --git a/fe-workflow/tasks/css.js b/fe-workflow/tasks/css.js new file mode 100644 index 0000000..b3d9736 --- /dev/null +++ b/fe-workflow/tasks/css.js @@ -0,0 +1,74 @@ +import gulp from 'gulp'; +import gutil from 'gulp-util'; +import cache from 'gulp-cached'; +import progeny from 'gulp-progeny'; +import yargs from 'yargs'; +import { join } from 'path'; +import { paths } from '../utils/get-package-data'; +import sass from 'gulp-sass'; +import sourcemaps from 'gulp-sourcemaps'; +import flatten from 'gulp-flatten'; +import gulpIf from 'gulp-if'; +import postcss from 'gulp-postcss'; +import cssnext from 'postcss-cssnext'; +import pxtorem from 'postcss-pxtorem'; +import autoprefixer from 'autoprefixer'; +//import assets from 'postcss-assets'; + +const isDev = 'dev' === yargs.argv.env, + processors = [ + cssnext( { warnForDuplicates: false } ), + autoprefixer(), + pxtorem( { + rootValue: 16, + unitPrecision: 5, + propList: [ '*' ], + selectorBlackList: [], + replace: true, + mediaQuery: true, + minPixelValue: 2 + } ) + ]; + +//if ( undefined !== paths.images.dest ) { +// processors.push( +// assets( { +// basePath: '/', +// loadPaths: paths.images.dest +// } ) +// ); +//} + +gulp.task( 'css', [ 'css-lint' ], () => { + if ( undefined === paths.css || undefined === paths.css.glob || undefined === paths.css.src || undefined === paths.css.dest ) { + gutil.log( `Missing path in '${ gutil.colors.cyan( 'css' ) }' task, aborting!` ); + return null; + } + + return gulp + .src( join( paths.css.src, paths.css.glob ) ) + + // Caching and incremental building (progeny) in Gulp. + .pipe( gulpIf( isDev, cache( 'css-task-cache' ) ) ) + .pipe( gulpIf( isDev, progeny() ) ) + + // Actual SASS compilation. + .pipe( gulpIf ( isDev, sourcemaps.init() ) ) + .pipe( sass( { + includePaths: paths.css.includePaths, + outputStyle: isDev ? 'expanded' : 'compressed' + } ).on( 'error', sass.logError ) ) + .pipe( postcss( processors ) ) + .pipe( gulpIf ( isDev, sourcemaps.write( '' ) ) ) + + // Flatten directories. + .pipe( flatten() ) + .pipe( gulp.dest( paths.css.dest ) ); + + /* + * If you generate source maps to a separate `.map` file you need to add `{match: '** / *.css'}` option to stream. + * These files end up being sent down stream and when browserSync.stream() receives them, it will attempt + * a full page reload (as it will not find any .map files in the DOM). + */ + //.pipe( gulpIf( isDev, bs.stream() ) ); +} ); diff --git a/fe-workflow/utils/get-package-data.js b/fe-workflow/utils/get-package-data.js new file mode 100644 index 0000000..96bc200 --- /dev/null +++ b/fe-workflow/utils/get-package-data.js @@ -0,0 +1,6 @@ +import fs from 'fs'; + +const json = JSON.parse( fs.readFileSync( './package.json' ) ); +const paths = json['paths']; + +export { json, paths }; diff --git a/package.json b/package.json index 2655d44..4293607 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,9 @@ "version": "1.0.0", "description": "Common code used during development of WordPress plugins and themes", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "prod": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./", + "dev": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --env dev" }, "repository": "xwp/wp-dev-lib", "keywords": [ @@ -15,5 +17,89 @@ ], "author": "Weston Ruter (https://xwp.co)", "license": "MIT", - "homepage": "https://github.com/xwp/wp-dev-lib#readme" + "homepage": "https://github.com/xwp/wp-dev-lib#readme", + "paths": { + "clean": "assets/dist", + "css": { + "glob": "**/*.scss", + "src": "assets/src/parent/css", + "dest": "assets/dist/css", + "includePaths": [] + }, + "images": { + "glob": "**/*.+(png|jpg|jpeg|gif|bmp|svg)", + "src": "assets/src/images", + "dest": "assets/dist/images" + } + }, + "browserslist": [ + "Edge >= 13", + "Explorer >= 11", + "ExplorerMobile >= 11", + "Firefox >= 50", + "Chrome >= 55", + "ChromeAndroid >= 55", + "Android >= 55", + "Safari >= 10", + "Opera >= 42", + "iOS >= 9" + ], + "stylelint": { + "extends": "stylelint-config-wordpress/scss", + "rules": { + "at-rule-empty-line-before": [ + "always", + { + "except": [ + "first-nested" + ], + "ignore": [ + "after-comment" + ] + } + ], + "selector-pseudo-element-colon-notation": "double", + "value-keyword-case": null + } + }, + "babel": { + "presets": [ + [ + "env", + { + "targets": { + "browsers": "Edge 15" + } + } + ] + ] + }, + "devDependencies": { + "autoprefixer": "^7.1.1", + "babel-cli": "^6.24.1", + "babel-preset-env": "^1.4.0", + "del": "^3.0.0", + "eslint": "^3.19.0", + "eslint-plugin-compat": "^1.0.4", + "gulp": "^3.9.1", + "gulp-cached": "^1.1.1", + "gulp-flatten": "^0.3.1", + "gulp-if": "^2.0.2", + "gulp-postcss": "^7.0.0", + "gulp-progeny": "^0.4.0", + "gulp-sass": "^3.1.0", + "gulp-sourcemaps": "^2.6.0", + "postcss-assets": "^4.1.0", + "postcss-cli": "^4.0.0", + "postcss-cssnext": "^2.11.0", + "postcss-normalize": "^2.0.1", + "postcss-pxtorem": "^4.0.1", + "postcss-reporter": "^4.0.0", + "postcss-scss": "^1.0.2", + "require-dir": "^0.3.2", + "run-sequence": "^1.2.2", + "stylelint": "^7.12.0", + "stylelint-config-wordpress": "^11.0.0", + "yargs": "^8.0.2" + } } From 390fb81c865bd8ac9a146fb5625028fbfeebd8cc Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Tue, 4 Jul 2017 16:31:57 +0200 Subject: [PATCH 02/60] Make it possible to use multiple front-end workflows directly from `package.json`. --- fe-workflow/gulpfile.babel.js | 43 ++++++++++++++++----------- fe-workflow/tasks/clean.js | 6 ++-- fe-workflow/tasks/css-lint.js | 8 ++--- fe-workflow/tasks/css.js | 25 +++++++++------- fe-workflow/utils/get-package-data.js | 16 ++++++++-- package.json | 41 +++++++++++++++---------- 6 files changed, 85 insertions(+), 54 deletions(-) diff --git a/fe-workflow/gulpfile.babel.js b/fe-workflow/gulpfile.babel.js index 305bc7d..054a23e 100755 --- a/fe-workflow/gulpfile.babel.js +++ b/fe-workflow/gulpfile.babel.js @@ -1,29 +1,36 @@ +import { env, workflow, tasks } from './utils/get-package-data'; import requireDir from 'require-dir'; import gulp from 'gulp'; +import gutil from 'gulp-util'; import runSequence from 'run-sequence'; -import yargs from 'yargs'; - -// Define tasks for each environment. -const tasks = { - prod: [ - 'clean', - [ 'js-lint' ], - [ 'images', 'css', 'js' ], - 'assets', - 'size-report' - ], - dev: [ - 'clean', - [ 'css' ] - ] -}; // Load all Gulp tasks from `tasks` dir. requireDir( 'tasks' ); // To add a new task, simply create a new task file in `tasks` folder. gulp.task( 'default', done => { - const taskList = 'dev' === yargs.argv.env ? tasks.dev : tasks.prod; + if ( undefined === workflow ) { + gutil.log( gutil.colors.red( `No workflow provided, aborting!` ) ); + return; + } + gutil.log( `Using '${ gutil.colors.yellow( workflow ) }' workflow...` ); + + if ( undefined !== env ) { + gutil.log( `Using '${ gutil.colors.yellow( env ) }' environment...` ); + } + + const tasksList = Object.keys( tasks ).filter( task => { + if ( undefined === gulp.tasks[ task ] ) { + gutil.log( `Task '${ gutil.colors.red( task ) }' is not defined, ignoring!` ); + return false; + } + return true; + } ); + + if ( 0 === tasksList.length ) { + gutil.log( `No tasks provided for workflow '${ gutil.colors.yellow( workflow ) }', aborting!` ); + return; + } - runSequence( ...taskList, done ); + runSequence( ...tasksList, done ); } ); diff --git a/fe-workflow/tasks/clean.js b/fe-workflow/tasks/clean.js index 610caa5..7208619 100644 --- a/fe-workflow/tasks/clean.js +++ b/fe-workflow/tasks/clean.js @@ -1,14 +1,14 @@ import gulp from 'gulp'; import gutil from 'gulp-util'; -import { paths } from '../utils/get-package-data'; +import { tasks } from '../utils/get-package-data'; import del from 'del'; gulp.task( 'clean', done => { - if ( undefined === paths.clean ) { + if ( undefined === tasks.clean ) { gutil.log( `Missing path in '${ gutil.colors.cyan( 'clean' ) }' task, aborting!` ); done(); return; } - del( paths.clean ).then( () => done() ); + del( tasks.clean ).then( () => done() ); } ); diff --git a/fe-workflow/tasks/css-lint.js b/fe-workflow/tasks/css-lint.js index aa86cd9..ae33afc 100644 --- a/fe-workflow/tasks/css-lint.js +++ b/fe-workflow/tasks/css-lint.js @@ -3,23 +3,23 @@ import gutil from 'gulp-util'; import cache from 'gulp-cached'; import yargs from 'yargs'; import { join } from 'path'; -import { paths } from '../utils/get-package-data'; +import { tasks, env } from '../utils/get-package-data'; import gulpIf from 'gulp-if'; import postcss from 'gulp-postcss'; import reporter from 'postcss-reporter'; import scss from 'postcss-scss'; import stylelint from 'stylelint'; -const isDev = 'dev' === yargs.argv.env; +const isDev = 'dev' === env; gulp.task( 'css-lint', () => { - if ( undefined === paths.css || undefined === paths.css.glob || undefined === paths.css.src ) { + if ( undefined === tasks.css || undefined === tasks.css.glob || undefined === tasks.css.src ) { gutil.log( `Missing path in '${ gutil.colors.cyan( 'css-lint' ) }' task, aborting!` ); return null; } return gulp - .src( join( paths.css.src, paths.css.glob ) ) + .src( join( tasks.css.src, tasks.css.glob ) ) // Caching and incremental building (progeny) in Gulp. .pipe( gulpIf( isDev, cache( 'css-lint-task-cache' ) ) ) diff --git a/fe-workflow/tasks/css.js b/fe-workflow/tasks/css.js index b3d9736..53d07d2 100644 --- a/fe-workflow/tasks/css.js +++ b/fe-workflow/tasks/css.js @@ -2,9 +2,8 @@ import gulp from 'gulp'; import gutil from 'gulp-util'; import cache from 'gulp-cached'; import progeny from 'gulp-progeny'; -import yargs from 'yargs'; import { join } from 'path'; -import { paths } from '../utils/get-package-data'; +import { tasks, env } from '../utils/get-package-data'; import sass from 'gulp-sass'; import sourcemaps from 'gulp-sourcemaps'; import flatten from 'gulp-flatten'; @@ -15,7 +14,7 @@ import pxtorem from 'postcss-pxtorem'; import autoprefixer from 'autoprefixer'; //import assets from 'postcss-assets'; -const isDev = 'dev' === yargs.argv.env, +const isDev = 'dev' === env, processors = [ cssnext( { warnForDuplicates: false } ), autoprefixer(), @@ -30,23 +29,29 @@ const isDev = 'dev' === yargs.argv.env, } ) ]; -//if ( undefined !== paths.images.dest ) { +let preTasks = []; + +if ( undefined !== tasks.css.enableStylelinter && true === tasks.css.enableStylelinter ) { + preTasks.push( 'css-lint' ); +} + +//if ( undefined !== tasks.images.dest ) { // processors.push( // assets( { // basePath: '/', -// loadPaths: paths.images.dest +// loadtasks: tasks.images.dest // } ) // ); //} -gulp.task( 'css', [ 'css-lint' ], () => { - if ( undefined === paths.css || undefined === paths.css.glob || undefined === paths.css.src || undefined === paths.css.dest ) { +gulp.task( 'css', preTasks, () => { + if ( undefined === tasks.css || undefined === tasks.css.glob || undefined === tasks.css.src || undefined === tasks.css.dest ) { gutil.log( `Missing path in '${ gutil.colors.cyan( 'css' ) }' task, aborting!` ); return null; } return gulp - .src( join( paths.css.src, paths.css.glob ) ) + .src( join( tasks.css.src, tasks.css.glob ) ) // Caching and incremental building (progeny) in Gulp. .pipe( gulpIf( isDev, cache( 'css-task-cache' ) ) ) @@ -55,7 +60,7 @@ gulp.task( 'css', [ 'css-lint' ], () => { // Actual SASS compilation. .pipe( gulpIf ( isDev, sourcemaps.init() ) ) .pipe( sass( { - includePaths: paths.css.includePaths, + includetasks: tasks.css.includetasks, outputStyle: isDev ? 'expanded' : 'compressed' } ).on( 'error', sass.logError ) ) .pipe( postcss( processors ) ) @@ -63,7 +68,7 @@ gulp.task( 'css', [ 'css-lint' ], () => { // Flatten directories. .pipe( flatten() ) - .pipe( gulp.dest( paths.css.dest ) ); + .pipe( gulp.dest( tasks.css.dest ) ); /* * If you generate source maps to a separate `.map` file you need to add `{match: '** / *.css'}` option to stream. diff --git a/fe-workflow/utils/get-package-data.js b/fe-workflow/utils/get-package-data.js index 96bc200..5ae6f11 100644 --- a/fe-workflow/utils/get-package-data.js +++ b/fe-workflow/utils/get-package-data.js @@ -1,6 +1,16 @@ import fs from 'fs'; +import yargs from 'yargs'; -const json = JSON.parse( fs.readFileSync( './package.json' ) ); -const paths = json['paths']; +const json = JSON.parse( fs.readFileSync( './package.json' ) ), + env = yargs.argv.env, + workflow = yargs.argv.workflow; -export { json, paths }; +let tasks; +if ( undefined !== workflow && undefined !== json.workflows[ workflow ] ) { + tasks = json.workflows[ workflow ]; +} +if ( undefined !== env && undefined !== tasks[ env ] ) { + tasks = tasks[ env ]; +} + +export { json, tasks, env, workflow }; diff --git a/package.json b/package.json index 4293607..8bb82f9 100644 --- a/package.json +++ b/package.json @@ -2,11 +2,6 @@ "name": "wp-dev-lib", "version": "1.0.0", "description": "Common code used during development of WordPress plugins and themes", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "prod": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./", - "dev": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --env dev" - }, "repository": "xwp/wp-dev-lib", "keywords": [ "wordpress", @@ -18,18 +13,32 @@ "author": "Weston Ruter (https://xwp.co)", "license": "MIT", "homepage": "https://github.com/xwp/wp-dev-lib#readme", - "paths": { - "clean": "assets/dist", - "css": { - "glob": "**/*.scss", - "src": "assets/src/parent/css", - "dest": "assets/dist/css", - "includePaths": [] + "scripts": { + "theme:dev": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", + "plugin-sample": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --workflow=plugin-1", + "all": "yarn run theme:dev && yarn run plugin-sample" + }, + "workflows": { + "theme": { + "dev": { + "clean": "assets/dist", + "css": { + "glob": "**/*.scss", + "src": "assets/src/parent/css", + "dest": "assets/dist/css", + "includePaths": [], + "enableStylelinter": false + }, + "images": { + "glob": "**/*.+(png|jpg|jpeg|gif|bmp|svg)", + "src": "assets/src/images", + "dest": "assets/dist/images" + } + }, + "prod": {} }, - "images": { - "glob": "**/*.+(png|jpg|jpeg|gif|bmp|svg)", - "src": "assets/src/images", - "dest": "assets/dist/images" + "plugin-sample": { + "clean": "assets/dist" } }, "browserslist": [ From f7d55d8c5bd440064cdf98eb05f2890e30cd8924 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Tue, 4 Jul 2017 21:03:15 +0200 Subject: [PATCH 03/60] Add the JS workflow based on Browserify allowing for multiple bundles creation. --- fe-workflow/tasks/clean.js | 15 +++---- fe-workflow/tasks/css-lint.js | 34 ++++++++------- fe-workflow/tasks/css.js | 82 ++++++++++++++++++----------------- fe-workflow/tasks/js.js | 67 ++++++++++++++++++++++++++++ package.json | 52 +++++++++++++++++----- 5 files changed, 173 insertions(+), 77 deletions(-) create mode 100755 fe-workflow/tasks/js.js diff --git a/fe-workflow/tasks/clean.js b/fe-workflow/tasks/clean.js index 7208619..47a444a 100644 --- a/fe-workflow/tasks/clean.js +++ b/fe-workflow/tasks/clean.js @@ -1,14 +1,9 @@ import gulp from 'gulp'; -import gutil from 'gulp-util'; import { tasks } from '../utils/get-package-data'; import del from 'del'; -gulp.task( 'clean', done => { - if ( undefined === tasks.clean ) { - gutil.log( `Missing path in '${ gutil.colors.cyan( 'clean' ) }' task, aborting!` ); - done(); - return; - } - - del( tasks.clean ).then( () => done() ); -} ); +if ( undefined !== tasks.clean ) { + gulp.task( 'clean', done => { + del( tasks.clean ).then( () => done() ); + } ); +} diff --git a/fe-workflow/tasks/css-lint.js b/fe-workflow/tasks/css-lint.js index ae33afc..cc5dda2 100644 --- a/fe-workflow/tasks/css-lint.js +++ b/fe-workflow/tasks/css-lint.js @@ -10,23 +10,25 @@ import reporter from 'postcss-reporter'; import scss from 'postcss-scss'; import stylelint from 'stylelint'; -const isDev = 'dev' === env; +if ( undefined !== tasks.css ) { + const isDev = 'dev' === env; -gulp.task( 'css-lint', () => { - if ( undefined === tasks.css || undefined === tasks.css.glob || undefined === tasks.css.src ) { - gutil.log( `Missing path in '${ gutil.colors.cyan( 'css-lint' ) }' task, aborting!` ); - return null; - } + gulp.task( 'css-lint', () => { + if ( undefined === tasks.css.glob || undefined === tasks.css.src ) { + gutil.log( `Missing path in '${ gutil.colors.cyan( 'css-lint' ) }' task, aborting!` ); + return null; + } - return gulp - .src( join( tasks.css.src, tasks.css.glob ) ) + return gulp + .src( join( tasks.css.src, tasks.css.glob ) ) - // Caching and incremental building (progeny) in Gulp. - .pipe( gulpIf( isDev, cache( 'css-lint-task-cache' ) ) ) + // Caching and incremental building (progeny) in Gulp. + .pipe( gulpIf( isDev, cache( 'css-lint-task-cache' ) ) ) - // Lint styles. - .pipe( postcss( [ - stylelint(), - reporter( { clearMessages: true } ) - ], { syntax: scss } ) ); -} ); + // Lint styles. + .pipe( postcss( [ + stylelint(), + reporter( { clearMessages: true } ) + ], { syntax: scss } ) ); + } ); +} diff --git a/fe-workflow/tasks/css.js b/fe-workflow/tasks/css.js index 53d07d2..12ae5b5 100644 --- a/fe-workflow/tasks/css.js +++ b/fe-workflow/tasks/css.js @@ -14,26 +14,27 @@ import pxtorem from 'postcss-pxtorem'; import autoprefixer from 'autoprefixer'; //import assets from 'postcss-assets'; -const isDev = 'dev' === env, - processors = [ - cssnext( { warnForDuplicates: false } ), - autoprefixer(), - pxtorem( { - rootValue: 16, - unitPrecision: 5, - propList: [ '*' ], - selectorBlackList: [], - replace: true, - mediaQuery: true, - minPixelValue: 2 - } ) - ]; +if ( undefined !== tasks.css ) { + const isDev = 'dev' === env, + processors = [ + cssnext( { warnForDuplicates: false } ), + autoprefixer(), + pxtorem( { + rootValue: 16, + unitPrecision: 5, + propList: [ '*' ], + selectorBlackList: [], + replace: true, + mediaQuery: true, + minPixelValue: 2 + } ) + ]; -let preTasks = []; + let preTasks = []; -if ( undefined !== tasks.css.enableStylelinter && true === tasks.css.enableStylelinter ) { - preTasks.push( 'css-lint' ); -} + if ( undefined !== tasks.css.enableStylelinter && true === tasks.css.enableStylelinter ) { + preTasks.push( 'css-lint' ); + } //if ( undefined !== tasks.images.dest ) { // processors.push( @@ -44,31 +45,31 @@ if ( undefined !== tasks.css.enableStylelinter && true === tasks.css.enableStyle // ); //} -gulp.task( 'css', preTasks, () => { - if ( undefined === tasks.css || undefined === tasks.css.glob || undefined === tasks.css.src || undefined === tasks.css.dest ) { - gutil.log( `Missing path in '${ gutil.colors.cyan( 'css' ) }' task, aborting!` ); - return null; - } + gulp.task( 'css', preTasks, () => { + if ( undefined === tasks.css || undefined === tasks.css.glob || undefined === tasks.css.src || undefined === tasks.css.dest ) { + gutil.log( `Missing path in '${ gutil.colors.cyan( 'css' ) }' task, aborting!` ); + return null; + } - return gulp - .src( join( tasks.css.src, tasks.css.glob ) ) + return gulp + .src( join( tasks.css.src, tasks.css.glob ) ) - // Caching and incremental building (progeny) in Gulp. - .pipe( gulpIf( isDev, cache( 'css-task-cache' ) ) ) - .pipe( gulpIf( isDev, progeny() ) ) + // Caching and incremental building (progeny) in Gulp. + .pipe( gulpIf( isDev, cache( 'css-task-cache' ) ) ) + .pipe( gulpIf( isDev, progeny() ) ) - // Actual SASS compilation. - .pipe( gulpIf ( isDev, sourcemaps.init() ) ) - .pipe( sass( { - includetasks: tasks.css.includetasks, - outputStyle: isDev ? 'expanded' : 'compressed' - } ).on( 'error', sass.logError ) ) - .pipe( postcss( processors ) ) - .pipe( gulpIf ( isDev, sourcemaps.write( '' ) ) ) + // Actual SASS compilation. + .pipe( gulpIf( isDev, sourcemaps.init() ) ) + .pipe( sass( { + includetasks: tasks.css.includetasks, + outputStyle: isDev ? 'expanded' : 'compressed' + } ).on( 'error', sass.logError ) ) + .pipe( postcss( processors ) ) + .pipe( gulpIf( isDev, sourcemaps.write( '' ) ) ) - // Flatten directories. - .pipe( flatten() ) - .pipe( gulp.dest( tasks.css.dest ) ); + // Flatten directories. + .pipe( flatten() ) + .pipe( gulp.dest( tasks.css.dest ) ); /* * If you generate source maps to a separate `.map` file you need to add `{match: '** / *.css'}` option to stream. @@ -76,4 +77,5 @@ gulp.task( 'css', preTasks, () => { * a full page reload (as it will not find any .map files in the DOM). */ //.pipe( gulpIf( isDev, bs.stream() ) ); -} ); + } ); +} diff --git a/fe-workflow/tasks/js.js b/fe-workflow/tasks/js.js new file mode 100755 index 0000000..9b46db5 --- /dev/null +++ b/fe-workflow/tasks/js.js @@ -0,0 +1,67 @@ +import { tasks, env } from '../utils/get-package-data'; +import gulp from 'gulp'; +import plumber from 'gulp-plumber'; +import browserify from 'browserify'; +import babelify from 'babelify'; +import watchify from 'watchify'; +import source from 'vinyl-source-stream'; +import buffer from 'vinyl-buffer'; +import sourcemaps from 'gulp-sourcemaps'; +//import { bs } from './browser-sync'; +import uglify from 'gulp-uglify'; +import gutil from 'gulp-util'; +import es from 'event-stream'; + +if ( undefined !== tasks.js ) { + const isDev = 'dev' === env; + + let preTasks = []; + + gulp.task( 'js', preTasks, () => { + const options = { + paths: tasks.js.includePaths + }; + + let devBundler, prodBundler, jsTasks, jsTasksStream; + + devBundler = function( task ) { + const opt = Object.assign( { entries: task.entries, debug: true }, watchify.args, options ), + w = watchify( browserify( opt ).transform( babelify ) ), + bundle = function() { + return w.bundle() + .on( 'error', ( error ) => { + gutil.log( error.codeFrame + '\n' + gutil.colors.red( error.toString() ) ); + } ) + .pipe( plumber() ) + .pipe( source( task.bundle ) ) + .pipe( buffer() ) + .pipe( sourcemaps.init( { loadMaps: true } ) ) + .pipe( sourcemaps.write( '' ) ) + .pipe( gulp.dest( task.dest ) ); + }; + + w.on( 'update', bundle ); + w.on( 'log', gutil.log ); + + return bundle(); + }; + + prodBundler = function( task ) { + const opt = Object.assign( { entries: task.entries, debug: false }, options ); + + return browserify( opt ) + .transform( babelify ) + .bundle() + .pipe( plumber() ) + .pipe( source( task.bundle ) ) + .pipe( buffer() ) + .pipe( uglify() ) + .pipe( gulp.dest( task.dest ) ); + }; + + jsTasks = Array.isArray( tasks.js ) ? tasks.js : [ tasks.js ]; + jsTasksStream = jsTasks.map( isDev ? devBundler : prodBundler ); + + return es.merge.apply( null, jsTasksStream ); + } ); +} diff --git a/package.json b/package.json index 8bb82f9..9e74f94 100644 --- a/package.json +++ b/package.json @@ -15,30 +15,60 @@ "homepage": "https://github.com/xwp/wp-dev-lib#readme", "scripts": { "theme:dev": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", - "plugin-sample": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --workflow=plugin-1", - "all": "yarn run theme:dev && yarn run plugin-sample" + "theme:prod": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", + "plugin": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --workflow=plugin", + "all": "yarn run theme:dev && yarn run plugin" }, "workflows": { "theme": { "dev": { - "clean": "assets/dist", + "clean": "path/to/clean/folder", "css": { "glob": "**/*.scss", - "src": "assets/src/parent/css", - "dest": "assets/dist/css", - "includePaths": [], + "src": "path/to/src/folder", + "dest": "path/to/dest/folder", + "includePaths": [ + "node_modules" + ], "enableStylelinter": false }, "images": { "glob": "**/*.+(png|jpg|jpeg|gif|bmp|svg)", - "src": "assets/src/images", - "dest": "assets/dist/images" - } + "src": "path/to/src/folder", + "dest": "path/to/dest/folder" + }, + "js": [ + { + "entries": [ + "path/to/entry/file1.js", + "path/to/entry/file2.js" + ], + "bundle": "bundle.js", + "dest": "path/to/bundle/folder", + "includePaths": [ + "node_modules" + ] + }, + { + "entries": [ + "path/to/another/bundle/entry/file.js" + ], + "bundle": "another-bundle.js", + "dest": "path/to/antother/bundle/dest/folder" + } + ] }, "prod": {} }, - "plugin-sample": { - "clean": "assets/dist" + "plugin": { + "clean": "path/to/plugin/clean/folder", + "js": { + "entries": [ + "path/to/plugin/entry/file.js" + ], + "bundle": "bundle.js", + "dest": "path/to/plugin/bundle/folder" + } } }, "browserslist": [ From 5b702cbcad102a2da42a9a1359d2eabf614a5dd9 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Tue, 4 Jul 2017 21:05:23 +0200 Subject: [PATCH 04/60] Fix minor code typos. --- fe-workflow/tasks/js.js | 3 +-- package.json | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/fe-workflow/tasks/js.js b/fe-workflow/tasks/js.js index 9b46db5..cb58cfb 100755 --- a/fe-workflow/tasks/js.js +++ b/fe-workflow/tasks/js.js @@ -13,8 +13,7 @@ import gutil from 'gulp-util'; import es from 'event-stream'; if ( undefined !== tasks.js ) { - const isDev = 'dev' === env; - + const isDev = 'dev' === env; let preTasks = []; gulp.task( 'js', preTasks, () => { diff --git a/package.json b/package.json index 9e74f94..de20441 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "theme:dev": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", "theme:prod": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", "plugin": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --workflow=plugin", - "all": "yarn run theme:dev && yarn run plugin" + "all": "yarn run theme:prod && yarn run plugin" }, "workflows": { "theme": { From f5feb460c2c6fcd369cbfc57cddbfe93af1884f9 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Wed, 5 Jul 2017 11:12:53 +0200 Subject: [PATCH 05/60] Use `browserslist` with `babel-preset-env` and `babelify` to compile JS code. --- fe-workflow/tasks/js.js | 15 +++++++++++---- fe-workflow/utils/get-package-data.js | 5 +++-- package.json | 12 ------------ 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/fe-workflow/tasks/js.js b/fe-workflow/tasks/js.js index cb58cfb..22e39f9 100755 --- a/fe-workflow/tasks/js.js +++ b/fe-workflow/tasks/js.js @@ -1,4 +1,4 @@ -import { tasks, env } from '../utils/get-package-data'; +import { tasks, env, browserslist } from '../utils/get-package-data'; import gulp from 'gulp'; import plumber from 'gulp-plumber'; import browserify from 'browserify'; @@ -13,7 +13,14 @@ import gutil from 'gulp-util'; import es from 'event-stream'; if ( undefined !== tasks.js ) { - const isDev = 'dev' === env; + const isDev = 'dev' === env, + babelifyOptions = { + presets: [[ 'env', { + targets: { + browsers: browserslist + } + } ]] + }; let preTasks = []; gulp.task( 'js', preTasks, () => { @@ -25,7 +32,7 @@ if ( undefined !== tasks.js ) { devBundler = function( task ) { const opt = Object.assign( { entries: task.entries, debug: true }, watchify.args, options ), - w = watchify( browserify( opt ).transform( babelify ) ), + w = watchify( browserify( opt ).transform( babelify, babelifyOptions ) ), bundle = function() { return w.bundle() .on( 'error', ( error ) => { @@ -49,7 +56,7 @@ if ( undefined !== tasks.js ) { const opt = Object.assign( { entries: task.entries, debug: false }, options ); return browserify( opt ) - .transform( babelify ) + .transform( babelify, babelifyOptions ) .bundle() .pipe( plumber() ) .pipe( source( task.bundle ) ) diff --git a/fe-workflow/utils/get-package-data.js b/fe-workflow/utils/get-package-data.js index 5ae6f11..eac9485 100644 --- a/fe-workflow/utils/get-package-data.js +++ b/fe-workflow/utils/get-package-data.js @@ -3,7 +3,8 @@ import yargs from 'yargs'; const json = JSON.parse( fs.readFileSync( './package.json' ) ), env = yargs.argv.env, - workflow = yargs.argv.workflow; + workflow = yargs.argv.workflow, + browserslist = json.browserslist; let tasks; if ( undefined !== workflow && undefined !== json.workflows[ workflow ] ) { @@ -13,4 +14,4 @@ if ( undefined !== env && undefined !== tasks[ env ] ) { tasks = tasks[ env ]; } -export { json, tasks, env, workflow }; +export { json, tasks, env, workflow, browserslist }; diff --git a/package.json b/package.json index de20441..dfe6fbd 100644 --- a/package.json +++ b/package.json @@ -101,18 +101,6 @@ "value-keyword-case": null } }, - "babel": { - "presets": [ - [ - "env", - { - "targets": { - "browsers": "Edge 15" - } - } - ] - ] - }, "devDependencies": { "autoprefixer": "^7.1.1", "babel-cli": "^6.24.1", From 522be75db35fc861a8ac4c6ad96714da3341a60c Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Wed, 5 Jul 2017 16:00:49 +0200 Subject: [PATCH 06/60] Add JS Lint task to the workflow. --- fe-workflow/gulpfile.babel.js | 2 ++ fe-workflow/tasks/css-lint.js | 1 - fe-workflow/tasks/js-lint.js | 29 +++++++++++++++++++++++++++++ fe-workflow/tasks/js.js | 3 +-- package.json | 8 +++++++- 5 files changed, 39 insertions(+), 4 deletions(-) create mode 100644 fe-workflow/tasks/js-lint.js diff --git a/fe-workflow/gulpfile.babel.js b/fe-workflow/gulpfile.babel.js index 054a23e..219987a 100755 --- a/fe-workflow/gulpfile.babel.js +++ b/fe-workflow/gulpfile.babel.js @@ -23,6 +23,8 @@ gulp.task( 'default', done => { if ( undefined === gulp.tasks[ task ] ) { gutil.log( `Task '${ gutil.colors.red( task ) }' is not defined, ignoring!` ); return false; + } else if ( 'js-lint' === task ) { + return false; } return true; } ); diff --git a/fe-workflow/tasks/css-lint.js b/fe-workflow/tasks/css-lint.js index cc5dda2..dc174a8 100644 --- a/fe-workflow/tasks/css-lint.js +++ b/fe-workflow/tasks/css-lint.js @@ -1,7 +1,6 @@ import gulp from 'gulp'; import gutil from 'gulp-util'; import cache from 'gulp-cached'; -import yargs from 'yargs'; import { join } from 'path'; import { tasks, env } from '../utils/get-package-data'; import gulpIf from 'gulp-if'; diff --git a/fe-workflow/tasks/js-lint.js b/fe-workflow/tasks/js-lint.js new file mode 100644 index 0000000..a31594e --- /dev/null +++ b/fe-workflow/tasks/js-lint.js @@ -0,0 +1,29 @@ +import gulp from 'gulp'; +import cache from 'gulp-cached'; +import { tasks, env } from '../utils/get-package-data'; +import gulpIf from 'gulp-if'; +import eslint from 'gulp-eslint'; +import gutil from 'gulp-util'; + +if ( undefined !== tasks[ 'js-lint' ] ) { + const isDev = 'dev' === env, + isProd = 'prod' === env; + + gulp.task( 'js-lint', () => { + if ( undefined === tasks[ 'js-lint' ].src ) { + gutil.log( `Missing path in '${ gutil.colors.cyan( 'js-lint' ) }' task, aborting!` ); + return null; + } + + return gulp + .src( tasks[ 'js-lint' ].src ) + + // Cache. + .pipe( gulpIf( isDev, cache( 'js-lint-task-cache' ) ) ) + + // Lint JS. + .pipe( eslint() ) + .pipe( eslint.format() ) + .pipe( gulpIf( isProd, eslint.failAfterError() ) ); + } ); +} diff --git a/fe-workflow/tasks/js.js b/fe-workflow/tasks/js.js index 22e39f9..120709c 100755 --- a/fe-workflow/tasks/js.js +++ b/fe-workflow/tasks/js.js @@ -21,9 +21,8 @@ if ( undefined !== tasks.js ) { } } ]] }; - let preTasks = []; - gulp.task( 'js', preTasks, () => { + gulp.task( 'js', [ 'js-lint' ], () => { const options = { paths: tasks.js.includePaths }; diff --git a/package.json b/package.json index dfe6fbd..838a612 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,10 @@ "bundle": "another-bundle.js", "dest": "path/to/antother/bundle/dest/folder" } - ] + ], + "js-lint": { + "src": [ "path/to/linted/file.js" ] + } }, "prod": {} }, @@ -83,6 +86,9 @@ "Opera >= 42", "iOS >= 9" ], + "babel": { + "presets": [[ "env" ]] + }, "stylelint": { "extends": "stylelint-config-wordpress/scss", "rules": { From da8c5f04e93ab2e356be7279690eb0327393970c Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Wed, 5 Jul 2017 16:11:32 +0200 Subject: [PATCH 07/60] Use better name for the config module. --- fe-workflow/gulpfile.babel.js | 2 +- fe-workflow/tasks/clean.js | 2 +- fe-workflow/tasks/css-lint.js | 4 +--- fe-workflow/tasks/css.js | 5 ++--- fe-workflow/tasks/js-lint.js | 5 +---- fe-workflow/tasks/js.js | 17 ++++++++--------- .../{get-package-data.js => get-config.js} | 4 +++- 7 files changed, 17 insertions(+), 22 deletions(-) rename fe-workflow/utils/{get-package-data.js => get-config.js} (77%) diff --git a/fe-workflow/gulpfile.babel.js b/fe-workflow/gulpfile.babel.js index 219987a..1622fa2 100755 --- a/fe-workflow/gulpfile.babel.js +++ b/fe-workflow/gulpfile.babel.js @@ -1,4 +1,4 @@ -import { env, workflow, tasks } from './utils/get-package-data'; +import { env, workflow, tasks } from './utils/get-config'; import requireDir from 'require-dir'; import gulp from 'gulp'; import gutil from 'gulp-util'; diff --git a/fe-workflow/tasks/clean.js b/fe-workflow/tasks/clean.js index 47a444a..bab6269 100644 --- a/fe-workflow/tasks/clean.js +++ b/fe-workflow/tasks/clean.js @@ -1,5 +1,5 @@ import gulp from 'gulp'; -import { tasks } from '../utils/get-package-data'; +import { tasks } from '../utils/get-config'; import del from 'del'; if ( undefined !== tasks.clean ) { diff --git a/fe-workflow/tasks/css-lint.js b/fe-workflow/tasks/css-lint.js index dc174a8..e05855c 100644 --- a/fe-workflow/tasks/css-lint.js +++ b/fe-workflow/tasks/css-lint.js @@ -2,7 +2,7 @@ import gulp from 'gulp'; import gutil from 'gulp-util'; import cache from 'gulp-cached'; import { join } from 'path'; -import { tasks, env } from '../utils/get-package-data'; +import { tasks, isDev } from '../utils/get-config'; import gulpIf from 'gulp-if'; import postcss from 'gulp-postcss'; import reporter from 'postcss-reporter'; @@ -10,8 +10,6 @@ import scss from 'postcss-scss'; import stylelint from 'stylelint'; if ( undefined !== tasks.css ) { - const isDev = 'dev' === env; - gulp.task( 'css-lint', () => { if ( undefined === tasks.css.glob || undefined === tasks.css.src ) { gutil.log( `Missing path in '${ gutil.colors.cyan( 'css-lint' ) }' task, aborting!` ); diff --git a/fe-workflow/tasks/css.js b/fe-workflow/tasks/css.js index 12ae5b5..14a95c8 100644 --- a/fe-workflow/tasks/css.js +++ b/fe-workflow/tasks/css.js @@ -3,7 +3,7 @@ import gutil from 'gulp-util'; import cache from 'gulp-cached'; import progeny from 'gulp-progeny'; import { join } from 'path'; -import { tasks, env } from '../utils/get-package-data'; +import { tasks, isDev } from '../utils/get-config'; import sass from 'gulp-sass'; import sourcemaps from 'gulp-sourcemaps'; import flatten from 'gulp-flatten'; @@ -15,8 +15,7 @@ import autoprefixer from 'autoprefixer'; //import assets from 'postcss-assets'; if ( undefined !== tasks.css ) { - const isDev = 'dev' === env, - processors = [ + const processors = [ cssnext( { warnForDuplicates: false } ), autoprefixer(), pxtorem( { diff --git a/fe-workflow/tasks/js-lint.js b/fe-workflow/tasks/js-lint.js index a31594e..5ff1b85 100644 --- a/fe-workflow/tasks/js-lint.js +++ b/fe-workflow/tasks/js-lint.js @@ -1,14 +1,11 @@ import gulp from 'gulp'; import cache from 'gulp-cached'; -import { tasks, env } from '../utils/get-package-data'; +import { tasks, isDev, isProd } from '../utils/get-config'; import gulpIf from 'gulp-if'; import eslint from 'gulp-eslint'; import gutil from 'gulp-util'; if ( undefined !== tasks[ 'js-lint' ] ) { - const isDev = 'dev' === env, - isProd = 'prod' === env; - gulp.task( 'js-lint', () => { if ( undefined === tasks[ 'js-lint' ].src ) { gutil.log( `Missing path in '${ gutil.colors.cyan( 'js-lint' ) }' task, aborting!` ); diff --git a/fe-workflow/tasks/js.js b/fe-workflow/tasks/js.js index 120709c..0d6f99a 100755 --- a/fe-workflow/tasks/js.js +++ b/fe-workflow/tasks/js.js @@ -1,4 +1,4 @@ -import { tasks, env, browserslist } from '../utils/get-package-data'; +import { tasks, isDev, browserslist } from '../utils/get-config'; import gulp from 'gulp'; import plumber from 'gulp-plumber'; import browserify from 'browserify'; @@ -13,14 +13,13 @@ import gutil from 'gulp-util'; import es from 'event-stream'; if ( undefined !== tasks.js ) { - const isDev = 'dev' === env, - babelifyOptions = { - presets: [[ 'env', { - targets: { - browsers: browserslist - } - } ]] - }; + const babelifyOptions = { + presets: [ [ 'env', { + targets: { + browsers: browserslist + } + } ] ] + }; gulp.task( 'js', [ 'js-lint' ], () => { const options = { diff --git a/fe-workflow/utils/get-package-data.js b/fe-workflow/utils/get-config.js similarity index 77% rename from fe-workflow/utils/get-package-data.js rename to fe-workflow/utils/get-config.js index eac9485..9f49fb3 100644 --- a/fe-workflow/utils/get-package-data.js +++ b/fe-workflow/utils/get-config.js @@ -3,6 +3,8 @@ import yargs from 'yargs'; const json = JSON.parse( fs.readFileSync( './package.json' ) ), env = yargs.argv.env, + isDev = 'dev' === env, + isProd = 'prod' === env, workflow = yargs.argv.workflow, browserslist = json.browserslist; @@ -14,4 +16,4 @@ if ( undefined !== env && undefined !== tasks[ env ] ) { tasks = tasks[ env ]; } -export { json, tasks, env, workflow, browserslist }; +export { json, tasks, env, isDev, isProd, workflow, browserslist }; From fbfdf3b0629082e7b7fa67ca181404a817b5969c Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Thu, 6 Jul 2017 19:22:38 +0200 Subject: [PATCH 08/60] Add `watch` task to the workflow. --- fe-workflow/tasks/js-lint.js | 5 +++-- fe-workflow/tasks/watch.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 fe-workflow/tasks/watch.js diff --git a/fe-workflow/tasks/js-lint.js b/fe-workflow/tasks/js-lint.js index 5ff1b85..381af6e 100644 --- a/fe-workflow/tasks/js-lint.js +++ b/fe-workflow/tasks/js-lint.js @@ -4,16 +4,17 @@ import { tasks, isDev, isProd } from '../utils/get-config'; import gulpIf from 'gulp-if'; import eslint from 'gulp-eslint'; import gutil from 'gulp-util'; +import { join } from 'path'; if ( undefined !== tasks[ 'js-lint' ] ) { gulp.task( 'js-lint', () => { - if ( undefined === tasks[ 'js-lint' ].src ) { + if ( undefined === tasks[ 'js-lint' ].src || undefined === tasks[ 'js-lint' ].glob ) { gutil.log( `Missing path in '${ gutil.colors.cyan( 'js-lint' ) }' task, aborting!` ); return null; } return gulp - .src( tasks[ 'js-lint' ].src ) + .src( join( tasks[ 'js-lint' ].src, tasks[ 'js-lint' ].glob ) ) // Cache. .pipe( gulpIf( isDev, cache( 'js-lint-task-cache' ) ) ) diff --git a/fe-workflow/tasks/watch.js b/fe-workflow/tasks/watch.js new file mode 100644 index 0000000..227777f --- /dev/null +++ b/fe-workflow/tasks/watch.js @@ -0,0 +1,28 @@ +import gulp from 'gulp'; +import { tasks } from '../utils/get-config'; +import watch from 'gulp-watch'; +import { join } from 'path'; +import _without from 'lodash/without'; + +if ( undefined !== tasks.watch && undefined !== tasks.watch.tasks ) { + gulp.task( 'watch', () => { + + // Omit some tasks, e.g. `js` is already watched by Watchify. + const filteredTasks = _without( tasks.watch.tasks, 'js', 'clean' ); + + filteredTasks.forEach( taskSlug => { + const task = tasks[ taskSlug ]; + let source; + + if ( undefined !== task.src && undefined !== task.glob ) { + source = join( task.src, task.glob ); + } else if ( undefined !== task.src ) { + source = task.src; + } else { + return; + } + + watch( source, () => gulp.start( taskSlug ) ); + } ); + } ); +} From ec5b1260656ffb0aaff16144c1df5d943e8ff812 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Mon, 10 Jul 2017 15:54:23 +0200 Subject: [PATCH 09/60] Fix typo in prop name. --- fe-workflow/tasks/css.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fe-workflow/tasks/css.js b/fe-workflow/tasks/css.js index 14a95c8..4327ecb 100644 --- a/fe-workflow/tasks/css.js +++ b/fe-workflow/tasks/css.js @@ -60,7 +60,7 @@ if ( undefined !== tasks.css ) { // Actual SASS compilation. .pipe( gulpIf( isDev, sourcemaps.init() ) ) .pipe( sass( { - includetasks: tasks.css.includetasks, + includePaths: tasks.css.includePaths, outputStyle: isDev ? 'expanded' : 'compressed' } ).on( 'error', sass.logError ) ) .pipe( postcss( processors ) ) From 1c848031de68e1dbe187b85c4298f356c1fa1ba2 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Mon, 10 Jul 2017 15:54:49 +0200 Subject: [PATCH 10/60] Add `images` task. --- fe-workflow/tasks/images.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100755 fe-workflow/tasks/images.js diff --git a/fe-workflow/tasks/images.js b/fe-workflow/tasks/images.js new file mode 100755 index 0000000..70c9e0d --- /dev/null +++ b/fe-workflow/tasks/images.js @@ -0,0 +1,24 @@ +import gulp from 'gulp'; +import gutil from 'gulp-util'; +import { tasks, isDev } from '../utils/get-config'; +import cache from 'gulp-cached'; +import imagemin from 'gulp-imagemin'; +import { join } from 'path'; +import gulpIf from 'gulp-if'; +//import { bs } from './browser-sync'; + +if ( undefined !== tasks.images ) { + gulp.task( 'images', () => { + if ( undefined === tasks.images.glob || undefined === tasks.images.src || undefined === tasks.images.dest ) { + gutil.log( `Missing path in '${ gutil.colors.cyan( 'images' ) }' task, aborting!` ); + return null; + } + + return gulp + .src( join( tasks.images.src, tasks.images.glob ) ) + .pipe( gulpIf( isDev, cache( 'images-task-cache', { optimizeMemory: true } ) ) ) + .pipe( imagemin() ) + .pipe( gulp.dest( tasks.images.dest ) ); + //.pipe( gulpIf( isDev, bs.stream() ) ); + } ); +} From 14b16b2d7af468d6f8f357efff217fea52902c98 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Mon, 10 Jul 2017 17:45:02 +0200 Subject: [PATCH 11/60] Add `copy` task. --- fe-workflow/tasks/copy.js | 20 ++++++++++++++++++++ package.json | 5 +++++ 2 files changed, 25 insertions(+) create mode 100755 fe-workflow/tasks/copy.js diff --git a/fe-workflow/tasks/copy.js b/fe-workflow/tasks/copy.js new file mode 100755 index 0000000..3e26cb7 --- /dev/null +++ b/fe-workflow/tasks/copy.js @@ -0,0 +1,20 @@ +import gulp from 'gulp'; +import gutil from 'gulp-util'; +import { tasks, isDev } from '../utils/get-config'; +import cache from 'gulp-cached'; +import { join } from 'path'; +import gulpIf from 'gulp-if'; + +if ( undefined !== tasks.copy ) { + gulp.task( 'copy', () => { + if ( undefined === tasks.copy.glob || undefined === tasks.copy.src || undefined === tasks.copy.dest ) { + gutil.log( `Missing path in '${ gutil.colors.cyan( 'copy' ) }' task, aborting!` ); + return null; + } + + return gulp + .src( join( tasks.copy.src, tasks.copy.glob ) ) + .pipe( gulpIf( isDev, cache( 'copy-task-cache', { optimizeMemory: true } ) ) ) + .pipe( gulp.dest( tasks.copy.dest ) ); + } ); +} diff --git a/package.json b/package.json index 838a612..4931e70 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,11 @@ "src": "path/to/src/folder", "dest": "path/to/dest/folder" }, + "copy": { + "glob": "**/*", + "src": "path/to/copy/folder", + "dest": "path/to/dest/folder" + }, "js": [ { "entries": [ From 839ecd881d92b98175f36deaecdfc25f9bd1a277 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Mon, 10 Jul 2017 18:00:54 +0200 Subject: [PATCH 12/60] Improve `env` parameter handling. --- fe-workflow/utils/get-config.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/fe-workflow/utils/get-config.js b/fe-workflow/utils/get-config.js index 9f49fb3..1e4759e 100644 --- a/fe-workflow/utils/get-config.js +++ b/fe-workflow/utils/get-config.js @@ -3,8 +3,9 @@ import yargs from 'yargs'; const json = JSON.parse( fs.readFileSync( './package.json' ) ), env = yargs.argv.env, - isDev = 'dev' === env, - isProd = 'prod' === env, + isDev = 'development' === env || 'dev' === env, + isTest = 'test' === env, + isProd = 'production' === env || 'prod' === env, workflow = yargs.argv.workflow, browserslist = json.browserslist; @@ -16,4 +17,4 @@ if ( undefined !== env && undefined !== tasks[ env ] ) { tasks = tasks[ env ]; } -export { json, tasks, env, isDev, isProd, workflow, browserslist }; +export { json, tasks, env, isDev, isTest, isProd, workflow, browserslist }; From 4f6696dfafd666465463bddf87089a481b2a4d1b Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Mon, 10 Jul 2017 18:42:21 +0200 Subject: [PATCH 13/60] Rename `fe-workflow` to more general `workflows` --- package.json | 9 +++++---- {fe-workflow => workflows}/gulpfile.babel.js | 0 {fe-workflow => workflows}/tasks/clean.js | 0 {fe-workflow => workflows}/tasks/copy.js | 0 {fe-workflow => workflows}/tasks/css-lint.js | 0 {fe-workflow => workflows}/tasks/css.js | 0 {fe-workflow => workflows}/tasks/images.js | 0 {fe-workflow => workflows}/tasks/js-lint.js | 0 {fe-workflow => workflows}/tasks/js.js | 0 {fe-workflow => workflows}/tasks/watch.js | 0 {fe-workflow => workflows}/utils/get-config.js | 0 11 files changed, 5 insertions(+), 4 deletions(-) rename {fe-workflow => workflows}/gulpfile.babel.js (100%) rename {fe-workflow => workflows}/tasks/clean.js (100%) rename {fe-workflow => workflows}/tasks/copy.js (100%) rename {fe-workflow => workflows}/tasks/css-lint.js (100%) rename {fe-workflow => workflows}/tasks/css.js (100%) rename {fe-workflow => workflows}/tasks/images.js (100%) rename {fe-workflow => workflows}/tasks/js-lint.js (100%) rename {fe-workflow => workflows}/tasks/js.js (100%) rename {fe-workflow => workflows}/tasks/watch.js (100%) rename {fe-workflow => workflows}/utils/get-config.js (100%) diff --git a/package.json b/package.json index 4931e70..0f71c08 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,11 @@ "license": "MIT", "homepage": "https://github.com/xwp/wp-dev-lib#readme", "scripts": { - "theme:dev": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", - "theme:prod": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", - "plugin": "gulp --gulpfile ./dev-lib/fe-workflow/gulpfile.babel.js --cwd ./ --workflow=plugin", - "all": "yarn run theme:prod && yarn run plugin" + "theme:dev": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", + "theme:prod": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", + "plugin": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --workflow=plugin", + "prod": "yarn run theme:prod && yarn run plugin", + "dev": "yarn run theme:dev && yarn run plugin" }, "workflows": { "theme": { diff --git a/fe-workflow/gulpfile.babel.js b/workflows/gulpfile.babel.js similarity index 100% rename from fe-workflow/gulpfile.babel.js rename to workflows/gulpfile.babel.js diff --git a/fe-workflow/tasks/clean.js b/workflows/tasks/clean.js similarity index 100% rename from fe-workflow/tasks/clean.js rename to workflows/tasks/clean.js diff --git a/fe-workflow/tasks/copy.js b/workflows/tasks/copy.js similarity index 100% rename from fe-workflow/tasks/copy.js rename to workflows/tasks/copy.js diff --git a/fe-workflow/tasks/css-lint.js b/workflows/tasks/css-lint.js similarity index 100% rename from fe-workflow/tasks/css-lint.js rename to workflows/tasks/css-lint.js diff --git a/fe-workflow/tasks/css.js b/workflows/tasks/css.js similarity index 100% rename from fe-workflow/tasks/css.js rename to workflows/tasks/css.js diff --git a/fe-workflow/tasks/images.js b/workflows/tasks/images.js similarity index 100% rename from fe-workflow/tasks/images.js rename to workflows/tasks/images.js diff --git a/fe-workflow/tasks/js-lint.js b/workflows/tasks/js-lint.js similarity index 100% rename from fe-workflow/tasks/js-lint.js rename to workflows/tasks/js-lint.js diff --git a/fe-workflow/tasks/js.js b/workflows/tasks/js.js similarity index 100% rename from fe-workflow/tasks/js.js rename to workflows/tasks/js.js diff --git a/fe-workflow/tasks/watch.js b/workflows/tasks/watch.js similarity index 100% rename from fe-workflow/tasks/watch.js rename to workflows/tasks/watch.js diff --git a/fe-workflow/utils/get-config.js b/workflows/utils/get-config.js similarity index 100% rename from fe-workflow/utils/get-config.js rename to workflows/utils/get-config.js From d0b8f1a31892a4edae9d65ff855a5350f64d6c85 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Tue, 11 Jul 2017 20:47:09 +0200 Subject: [PATCH 14/60] Introduce `TaskHelper` class and make use of it in Gulp tasks. --- workflows/gulpfile.babel.js | 6 +-- workflows/tasks/clean.js | 17 +++++--- workflows/tasks/copy.js | 33 +++++++------- workflows/tasks/css-lint.js | 25 +++++------ workflows/tasks/css.js | 32 +++++++------- workflows/tasks/images.js | 38 ++++++++-------- workflows/tasks/js-lint.js | 28 ++++++------ workflows/tasks/js.js | 82 +++++++++++++++++++++-------------- workflows/tasks/watch.js | 10 ++--- workflows/utils/TaskHelper.js | 75 ++++++++++++++++++++++++++++++++ workflows/utils/get-config.js | 27 +++++++++--- 11 files changed, 243 insertions(+), 130 deletions(-) create mode 100644 workflows/utils/TaskHelper.js diff --git a/workflows/gulpfile.babel.js b/workflows/gulpfile.babel.js index 1622fa2..e676337 100755 --- a/workflows/gulpfile.babel.js +++ b/workflows/gulpfile.babel.js @@ -3,6 +3,7 @@ import requireDir from 'require-dir'; import gulp from 'gulp'; import gutil from 'gulp-util'; import runSequence from 'run-sequence'; +import _without from 'lodash/without'; // Load all Gulp tasks from `tasks` dir. requireDir( 'tasks' ); @@ -19,12 +20,11 @@ gulp.task( 'default', done => { gutil.log( `Using '${ gutil.colors.yellow( env ) }' environment...` ); } - const tasksList = Object.keys( tasks ).filter( task => { + let tasksList = _without( Object.keys( tasks ), 'js-lint', 'cwd' ); + tasksList = tasksList.filter( task => { if ( undefined === gulp.tasks[ task ] ) { gutil.log( `Task '${ gutil.colors.red( task ) }' is not defined, ignoring!` ); return false; - } else if ( 'js-lint' === task ) { - return false; } return true; } ); diff --git a/workflows/tasks/clean.js b/workflows/tasks/clean.js index bab6269..0295a13 100644 --- a/workflows/tasks/clean.js +++ b/workflows/tasks/clean.js @@ -1,9 +1,16 @@ import gulp from 'gulp'; import { tasks } from '../utils/get-config'; import del from 'del'; +import TaskHelper from '../utils/TaskHelper'; -if ( undefined !== tasks.clean ) { - gulp.task( 'clean', done => { - del( tasks.clean ).then( () => done() ); - } ); -} +const task = new TaskHelper( { + name: 'clean', + requiredPaths: ['src'], + config: tasks +} ); + +gulp.task( task.name, done => { + if ( task.isValid() ) { + del( task.src ).then( () => done() ); + } +} ); diff --git a/workflows/tasks/copy.js b/workflows/tasks/copy.js index 3e26cb7..04a7cbc 100755 --- a/workflows/tasks/copy.js +++ b/workflows/tasks/copy.js @@ -1,20 +1,21 @@ import gulp from 'gulp'; -import gutil from 'gulp-util'; -import { tasks, isDev } from '../utils/get-config'; -import cache from 'gulp-cached'; -import { join } from 'path'; import gulpIf from 'gulp-if'; +import cache from 'gulp-cached'; +import { tasks, isDev } from '../utils/get-config'; +import TaskHelper from '../utils/TaskHelper'; + +const task = new TaskHelper( { + name: 'copy', + requiredPaths: [ 'src', 'dest' ], + config: tasks +} ); -if ( undefined !== tasks.copy ) { - gulp.task( 'copy', () => { - if ( undefined === tasks.copy.glob || undefined === tasks.copy.src || undefined === tasks.copy.dest ) { - gutil.log( `Missing path in '${ gutil.colors.cyan( 'copy' ) }' task, aborting!` ); - return null; - } +gulp.task( task.name, () => { + if ( ! task.isValid() ) { + return null; + } - return gulp - .src( join( tasks.copy.src, tasks.copy.glob ) ) - .pipe( gulpIf( isDev, cache( 'copy-task-cache', { optimizeMemory: true } ) ) ) - .pipe( gulp.dest( tasks.copy.dest ) ); - } ); -} + return task.start() + .pipe( gulpIf( isDev, cache( task.cacheName, { optimizeMemory: false } ) ) ) + .pipe( task.end() ); +} ); diff --git a/workflows/tasks/css-lint.js b/workflows/tasks/css-lint.js index e05855c..237a4fb 100644 --- a/workflows/tasks/css-lint.js +++ b/workflows/tasks/css-lint.js @@ -1,28 +1,27 @@ import gulp from 'gulp'; -import gutil from 'gulp-util'; import cache from 'gulp-cached'; -import { join } from 'path'; import { tasks, isDev } from '../utils/get-config'; import gulpIf from 'gulp-if'; import postcss from 'gulp-postcss'; import reporter from 'postcss-reporter'; import scss from 'postcss-scss'; import stylelint from 'stylelint'; +import TaskHelper from '../utils/TaskHelper'; -if ( undefined !== tasks.css ) { - gulp.task( 'css-lint', () => { - if ( undefined === tasks.css.glob || undefined === tasks.css.src ) { - gutil.log( `Missing path in '${ gutil.colors.cyan( 'css-lint' ) }' task, aborting!` ); +const task = new TaskHelper( { + name: 'css-lint', + requiredPaths: ['src'], + config: tasks +} ); + +if ( undefined !== task.config ) { + gulp.task( task.name, () => { + if ( ! task.isValid() ) { return null; } - return gulp - .src( join( tasks.css.src, tasks.css.glob ) ) - - // Caching and incremental building (progeny) in Gulp. - .pipe( gulpIf( isDev, cache( 'css-lint-task-cache' ) ) ) - - // Lint styles. + return task.start() + .pipe( gulpIf( isDev, cache( task.cacheName ) ) ) .pipe( postcss( [ stylelint(), reporter( { clearMessages: true } ) diff --git a/workflows/tasks/css.js b/workflows/tasks/css.js index 4327ecb..042f0bf 100644 --- a/workflows/tasks/css.js +++ b/workflows/tasks/css.js @@ -1,27 +1,31 @@ import gulp from 'gulp'; -import gutil from 'gulp-util'; import cache from 'gulp-cached'; import progeny from 'gulp-progeny'; -import { join } from 'path'; import { tasks, isDev } from '../utils/get-config'; import sass from 'gulp-sass'; import sourcemaps from 'gulp-sourcemaps'; -import flatten from 'gulp-flatten'; import gulpIf from 'gulp-if'; import postcss from 'gulp-postcss'; import cssnext from 'postcss-cssnext'; import pxtorem from 'postcss-pxtorem'; import autoprefixer from 'autoprefixer'; //import assets from 'postcss-assets'; +import TaskHelper from '../utils/TaskHelper'; -if ( undefined !== tasks.css ) { +const task = new TaskHelper( { + name: 'css', + requiredPaths: [ 'src', 'dest' ], + config: tasks +} ); + +if ( undefined !== task.config ) { const processors = [ cssnext( { warnForDuplicates: false } ), autoprefixer(), pxtorem( { rootValue: 16, unitPrecision: 5, - propList: [ '*' ], + propList: ['*'], selectorBlackList: [], replace: true, mediaQuery: true, @@ -31,7 +35,7 @@ if ( undefined !== tasks.css ) { let preTasks = []; - if ( undefined !== tasks.css.enableStylelinter && true === tasks.css.enableStylelinter ) { + if ( undefined !== tasks['css-lint'] ) { preTasks.push( 'css-lint' ); } @@ -44,31 +48,27 @@ if ( undefined !== tasks.css ) { // ); //} - gulp.task( 'css', preTasks, () => { - if ( undefined === tasks.css || undefined === tasks.css.glob || undefined === tasks.css.src || undefined === tasks.css.dest ) { - gutil.log( `Missing path in '${ gutil.colors.cyan( 'css' ) }' task, aborting!` ); + gulp.task( task.name, preTasks, () => { + if ( ! task.isValid() ) { return null; } - return gulp - .src( join( tasks.css.src, tasks.css.glob ) ) + return task.start() // Caching and incremental building (progeny) in Gulp. - .pipe( gulpIf( isDev, cache( 'css-task-cache' ) ) ) + .pipe( gulpIf( isDev, cache( task.cacheName ) ) ) .pipe( gulpIf( isDev, progeny() ) ) // Actual SASS compilation. .pipe( gulpIf( isDev, sourcemaps.init() ) ) .pipe( sass( { - includePaths: tasks.css.includePaths, + includePaths: task.config.includePaths, outputStyle: isDev ? 'expanded' : 'compressed' } ).on( 'error', sass.logError ) ) .pipe( postcss( processors ) ) .pipe( gulpIf( isDev, sourcemaps.write( '' ) ) ) - // Flatten directories. - .pipe( flatten() ) - .pipe( gulp.dest( tasks.css.dest ) ); + .pipe( task.end() ); /* * If you generate source maps to a separate `.map` file you need to add `{match: '** / *.css'}` option to stream. diff --git a/workflows/tasks/images.js b/workflows/tasks/images.js index 70c9e0d..74d8837 100755 --- a/workflows/tasks/images.js +++ b/workflows/tasks/images.js @@ -1,24 +1,24 @@ import gulp from 'gulp'; -import gutil from 'gulp-util'; -import { tasks, isDev } from '../utils/get-config'; +import gulpIf from 'gulp-if'; import cache from 'gulp-cached'; import imagemin from 'gulp-imagemin'; -import { join } from 'path'; -import gulpIf from 'gulp-if'; -//import { bs } from './browser-sync'; +import { tasks, isDev } from '../utils/get-config'; +import TaskHelper from '../utils/TaskHelper'; + +const task = new TaskHelper( { + name: 'images', + requiredPaths: [ 'src', 'dest' ], + config: tasks +} ); -if ( undefined !== tasks.images ) { - gulp.task( 'images', () => { - if ( undefined === tasks.images.glob || undefined === tasks.images.src || undefined === tasks.images.dest ) { - gutil.log( `Missing path in '${ gutil.colors.cyan( 'images' ) }' task, aborting!` ); - return null; - } +gulp.task( task.name, () => { + if ( ! task.isValid() ) { + return null; + } - return gulp - .src( join( tasks.images.src, tasks.images.glob ) ) - .pipe( gulpIf( isDev, cache( 'images-task-cache', { optimizeMemory: true } ) ) ) - .pipe( imagemin() ) - .pipe( gulp.dest( tasks.images.dest ) ); - //.pipe( gulpIf( isDev, bs.stream() ) ); - } ); -} + return task.start() + .pipe( gulpIf( isDev, cache( task.cacheName, { optimizeMemory: false } ) ) ) + .pipe( imagemin() ) + .pipe( task.end() ); + //.pipe( gulpIf( isDev, bs.stream() ) ); +} ); diff --git a/workflows/tasks/js-lint.js b/workflows/tasks/js-lint.js index 381af6e..b5b3859 100644 --- a/workflows/tasks/js-lint.js +++ b/workflows/tasks/js-lint.js @@ -1,27 +1,27 @@ import gulp from 'gulp'; import cache from 'gulp-cached'; import { tasks, isDev, isProd } from '../utils/get-config'; -import gulpIf from 'gulp-if'; import eslint from 'gulp-eslint'; -import gutil from 'gulp-util'; -import { join } from 'path'; +import gulpIf from 'gulp-if'; +import TaskHelper from '../utils/TaskHelper'; + +const task = new TaskHelper( { + name: 'js-lint', + requiredPaths: ['src'], + config: tasks +} ); -if ( undefined !== tasks[ 'js-lint' ] ) { - gulp.task( 'js-lint', () => { - if ( undefined === tasks[ 'js-lint' ].src || undefined === tasks[ 'js-lint' ].glob ) { - gutil.log( `Missing path in '${ gutil.colors.cyan( 'js-lint' ) }' task, aborting!` ); +if ( undefined !== task.config ) { + gulp.task( task.name, () => { + if ( ! task.isValid() ) { return null; } - return gulp - .src( join( tasks[ 'js-lint' ].src, tasks[ 'js-lint' ].glob ) ) - - // Cache. - .pipe( gulpIf( isDev, cache( 'js-lint-task-cache' ) ) ) - - // Lint JS. + return task.start() + .pipe( gulpIf( isDev, cache( task.cacheName ) ) ) .pipe( eslint() ) .pipe( eslint.format() ) .pipe( gulpIf( isProd, eslint.failAfterError() ) ); } ); } + diff --git a/workflows/tasks/js.js b/workflows/tasks/js.js index 0d6f99a..6f4a96c 100755 --- a/workflows/tasks/js.js +++ b/workflows/tasks/js.js @@ -1,4 +1,4 @@ -import { tasks, isDev, browserslist } from '../utils/get-config'; +import { tasks, isProd, browserslist, cwd } from '../utils/get-config'; import gulp from 'gulp'; import plumber from 'gulp-plumber'; import browserify from 'browserify'; @@ -11,60 +11,76 @@ import sourcemaps from 'gulp-sourcemaps'; import uglify from 'gulp-uglify'; import gutil from 'gulp-util'; import es from 'event-stream'; +import { join } from 'path'; if ( undefined !== tasks.js ) { - const babelifyOptions = { - presets: [ [ 'env', { - targets: { - browsers: browserslist - } - } ] ] - }; + let preTasks = undefined === tasks['js-lint'] ? [] : [ 'js-lint' ]; - gulp.task( 'js', [ 'js-lint' ], () => { - const options = { - paths: tasks.js.includePaths + gulp.task( 'js', preTasks, () => { + let defaultBundler, prodBundler, jsTasks, jsTasksStream, addCwdToPaths, babelifyOptions; + + babelifyOptions = { + presets: [ [ 'env', { + targets: { + browsers: browserslist + } + } ] ] + }; + + addCwdToPaths = function( paths ) { + const path = Array.isArray( paths ) ? paths : [ paths ]; + return path.map( entry => join( cwd, entry ) ); }; - let devBundler, prodBundler, jsTasks, jsTasksStream; + defaultBundler = function( task ) { + let options, watchifyTask, bundle; + + options = Object.assign( { + entries: addCwdToPaths( task.entries ), + paths: addCwdToPaths( task.includePaths ), + debug: true + }, watchify.args ); + + watchifyTask = watchify( browserify( options ).transform( babelify, babelifyOptions ) ); - devBundler = function( task ) { - const opt = Object.assign( { entries: task.entries, debug: true }, watchify.args, options ), - w = watchify( browserify( opt ).transform( babelify, babelifyOptions ) ), - bundle = function() { - return w.bundle() - .on( 'error', ( error ) => { - gutil.log( error.codeFrame + '\n' + gutil.colors.red( error.toString() ) ); - } ) - .pipe( plumber() ) - .pipe( source( task.bundle ) ) - .pipe( buffer() ) - .pipe( sourcemaps.init( { loadMaps: true } ) ) - .pipe( sourcemaps.write( '' ) ) - .pipe( gulp.dest( task.dest ) ); - }; + bundle = function() { + return watchifyTask.bundle() + .on( 'error', ( error ) => { + gutil.log( error.codeFrame + '\n' + gutil.colors.red( error.toString() ) ); + } ) + .pipe( plumber() ) + .pipe( source( task.bundle ) ) + .pipe( buffer() ) + .pipe( sourcemaps.init( { loadMaps: true } ) ) + .pipe( sourcemaps.write( '' ) ) + .pipe( gulp.dest( task.dest, { cwd } ) ); + }; - w.on( 'update', bundle ); - w.on( 'log', gutil.log ); + watchifyTask.on( 'update', bundle ); + watchifyTask.on( 'log', gutil.log ); return bundle(); }; prodBundler = function( task ) { - const opt = Object.assign( { entries: task.entries, debug: false }, options ); + const options = { + entries: addCwdToPaths( task.entries ), + paths: addCwdToPaths( task.includePaths ), + debug: false + }; - return browserify( opt ) + return browserify( options ) .transform( babelify, babelifyOptions ) .bundle() .pipe( plumber() ) .pipe( source( task.bundle ) ) .pipe( buffer() ) .pipe( uglify() ) - .pipe( gulp.dest( task.dest ) ); + .pipe( gulp.dest( task.dest, { cwd } ) ); }; jsTasks = Array.isArray( tasks.js ) ? tasks.js : [ tasks.js ]; - jsTasksStream = jsTasks.map( isDev ? devBundler : prodBundler ); + jsTasksStream = jsTasks.map( isProd ? prodBundler : defaultBundler ); return es.merge.apply( null, jsTasksStream ); } ); diff --git a/workflows/tasks/watch.js b/workflows/tasks/watch.js index 227777f..0773e1e 100644 --- a/workflows/tasks/watch.js +++ b/workflows/tasks/watch.js @@ -1,5 +1,5 @@ import gulp from 'gulp'; -import { tasks } from '../utils/get-config'; +import { tasks, cwd } from '../utils/get-config'; import watch from 'gulp-watch'; import { join } from 'path'; import _without from 'lodash/without'; @@ -8,16 +8,14 @@ if ( undefined !== tasks.watch && undefined !== tasks.watch.tasks ) { gulp.task( 'watch', () => { // Omit some tasks, e.g. `js` is already watched by Watchify. - const filteredTasks = _without( tasks.watch.tasks, 'js', 'clean' ); + const filteredTasks = _without( tasks.watch.tasks, 'js', 'js-lint', 'clean' ); filteredTasks.forEach( taskSlug => { const task = tasks[ taskSlug ]; let source; - if ( undefined !== task.src && undefined !== task.glob ) { - source = join( task.src, task.glob ); - } else if ( undefined !== task.src ) { - source = task.src; + if ( undefined !== task.src ) { + source = join( cwd, task.src ); } else { return; } diff --git a/workflows/utils/TaskHelper.js b/workflows/utils/TaskHelper.js new file mode 100644 index 0000000..a30f034 --- /dev/null +++ b/workflows/utils/TaskHelper.js @@ -0,0 +1,75 @@ +import gulp from 'gulp'; +import gutil from 'gulp-util'; +import { join } from 'path'; +import { cwd } from './get-config'; + +export default class TaskHelper { + constructor( { name = '', requiredPaths = [], config = null } ) { + if ( null === config ) { + gutil.log( gutil.colors.red( 'The task template is missing a configuration.' ) ); + return; + } + + this._name = name; + this._requiredPaths = requiredPaths; + this._config = config; + } + + get config() { + return '' !== this.name ? this._config[ this.name ] : this._config; + } + + get name() { + return this._name; + } + + get requiredPaths() { + return this._requiredPaths; + } + + get hasPathsDefined() { + return this.requiredPaths.every( path => undefined !== this.config[ path ] ); + } + + get src() { + const srcList = Array.isArray( this.config.src ) ? this.config.src : [ this.config.src ], + src = srcList.map( path => join( cwd, path ) ); + + return src; + } + + get entries() { + const entriesList = Array.isArray( this.config.entries ) ? this.config.entries : [ this.config.entries ], + entries = entriesList.map( path => join( cwd, path ) ); + + return entries; + } + + get base() { + return undefined === this.config.base ? '' : join( cwd, this.config.base ); + } + + get dest() { + return this.config.dest; + } + + get cacheName() { + return `${ this.name }-task-cache`; + } + + isValid() { + if ( ! this.hasPathsDefined ) { + gutil.log( `Missing paths in '${ gutil.colors.red( this.name ) }' task, aborting!` ); + return false; + } + return true; + } + + start() { + return gulp.src( this.src, { base: this.base } ); + } + + end() { + return gulp.dest( this.dest, { cwd } ); + } +} diff --git a/workflows/utils/get-config.js b/workflows/utils/get-config.js index 1e4759e..f84d8ea 100644 --- a/workflows/utils/get-config.js +++ b/workflows/utils/get-config.js @@ -3,18 +3,35 @@ import yargs from 'yargs'; const json = JSON.parse( fs.readFileSync( './package.json' ) ), env = yargs.argv.env, - isDev = 'development' === env || 'dev' === env, - isTest = 'test' === env, - isProd = 'production' === env || 'prod' === env, workflow = yargs.argv.workflow, browserslist = json.browserslist; -let tasks; +let tasks, + cwd = '', + isTest = false, + isProd = false, + isDev = false; + +switch ( env ) { +case 'test': + isTest = true; + break; +case 'prod': +case 'production': + isProd = true; + break; +default: + isDev = true; +} + if ( undefined !== workflow && undefined !== json.workflows[ workflow ] ) { tasks = json.workflows[ workflow ]; } if ( undefined !== env && undefined !== tasks[ env ] ) { tasks = tasks[ env ]; } +if ( undefined !== tasks.cwd ) { + cwd = tasks.cwd; +} -export { json, tasks, env, isDev, isTest, isProd, workflow, browserslist }; +export { json, tasks, env, cwd, isDev, isTest, isProd, workflow, browserslist }; From c6e1f740eadabe2705b32933d332ab0f7793767a Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Tue, 11 Jul 2017 20:56:25 +0200 Subject: [PATCH 15/60] Update `package.json` template. --- package.json | 67 +++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 48 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 0f71c08..039ee64 100644 --- a/package.json +++ b/package.json @@ -22,26 +22,32 @@ }, "workflows": { "theme": { + "cwd": "common/working/directory", "dev": { - "clean": "path/to/clean/folder", + "clean": { + "src": "path/to/clean/folder" + }, "css": { - "glob": "**/*.scss", - "src": "path/to/src/folder", - "dest": "path/to/dest/folder", + "src": "path/to/src/folder/**/*.scss", + "base": "path/to/src", + "dest": "dest/folder", "includePaths": [ "node_modules" - ], - "enableStylelinter": false + ] + }, + "css-lint": { + "src": "path/to/src/folder/**/*.scss", + "base": "path/to/src" }, "images": { - "glob": "**/*.+(png|jpg|jpeg|gif|bmp|svg)", - "src": "path/to/src/folder", - "dest": "path/to/dest/folder" + "src": "path/to/src/folder/**/*.+(png|jpg|jpeg|gif|bmp|svg)", + "base": "path/to/src", + "dest": "dest/folder" }, "copy": { - "glob": "**/*", - "src": "path/to/copy/folder", - "dest": "path/to/dest/folder" + "src": [ "path/to/copy/folder/**/*", "path/to/another/folder/*.ext" ], + "base": "path/to/src", + "dest": "dest/folder" }, "js": [ { @@ -50,33 +56,44 @@ "path/to/entry/file2.js" ], "bundle": "bundle.js", - "dest": "path/to/bundle/folder", + "dest": "bundle/js/folder", "includePaths": [ "node_modules" ] }, { "entries": [ - "path/to/another/bundle/entry/file.js" + "path/to/another/js/bundle/entry/file.js" ], "bundle": "another-bundle.js", - "dest": "path/to/antother/bundle/dest/folder" + "dest": "path/to/antother/js/bundle/dest/folder" } ], "js-lint": { - "src": [ "path/to/linted/file.js" ] + "src": [ "path/to/linted/file.js" ], + "base": "path/to/src" + }, + "watch": { + "tasks": [ + "css", + "copy", + "images" + ] } }, "prod": {} }, "plugin": { - "clean": "path/to/plugin/clean/folder", + "cwd": "path/to/plugin/directory", + "clean": { + "src": "clean/folder" + }, "js": { "entries": [ - "path/to/plugin/entry/file.js" + "entry/file.js" ], "bundle": "bundle.js", - "dest": "path/to/plugin/bundle/folder" + "dest": "bundle/folder" } } }, @@ -117,17 +134,26 @@ "autoprefixer": "^7.1.1", "babel-cli": "^6.24.1", "babel-preset-env": "^1.4.0", + "babelify": "^7.3.0", + "browserify": "^14.4.0", "del": "^3.0.0", "eslint": "^3.19.0", "eslint-plugin-compat": "^1.0.4", + "event-stream": "^3.3.4", "gulp": "^3.9.1", "gulp-cached": "^1.1.1", + "gulp-eslint": "^4.0.0", "gulp-flatten": "^0.3.1", "gulp-if": "^2.0.2", + "gulp-imagemin": "^3.3.0", + "gulp-plumber": "^1.1.0", "gulp-postcss": "^7.0.0", "gulp-progeny": "^0.4.0", "gulp-sass": "^3.1.0", "gulp-sourcemaps": "^2.6.0", + "gulp-uglify": "^3.0.0", + "gulp-watch": "^4.3.11", + "lodash": "^4.17.4", "postcss-assets": "^4.1.0", "postcss-cli": "^4.0.0", "postcss-cssnext": "^2.11.0", @@ -139,6 +165,9 @@ "run-sequence": "^1.2.2", "stylelint": "^7.12.0", "stylelint-config-wordpress": "^11.0.0", + "vinyl-buffer": "^1.0.0", + "vinyl-source-stream": "^1.1.0", + "watchify": "^3.9.0", "yargs": "^8.0.2" } } From 3abb4b6f43030741fdec0b99f196ec256d45342c Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Wed, 12 Jul 2017 20:22:29 +0200 Subject: [PATCH 16/60] Add support for `postcss-assets` processor. Improve PostCSS processors handling. --- workflows/tasks/css.js | 80 ++++++++++++++++++++++++++---------------- 1 file changed, 49 insertions(+), 31 deletions(-) diff --git a/workflows/tasks/css.js b/workflows/tasks/css.js index 042f0bf..fd64876 100644 --- a/workflows/tasks/css.js +++ b/workflows/tasks/css.js @@ -9,7 +9,7 @@ import postcss from 'gulp-postcss'; import cssnext from 'postcss-cssnext'; import pxtorem from 'postcss-pxtorem'; import autoprefixer from 'autoprefixer'; -//import assets from 'postcss-assets'; +import assets from 'postcss-assets'; import TaskHelper from '../utils/TaskHelper'; const task = new TaskHelper( { @@ -19,34 +19,7 @@ const task = new TaskHelper( { } ); if ( undefined !== task.config ) { - const processors = [ - cssnext( { warnForDuplicates: false } ), - autoprefixer(), - pxtorem( { - rootValue: 16, - unitPrecision: 5, - propList: ['*'], - selectorBlackList: [], - replace: true, - mediaQuery: true, - minPixelValue: 2 - } ) - ]; - - let preTasks = []; - - if ( undefined !== tasks['css-lint'] ) { - preTasks.push( 'css-lint' ); - } - -//if ( undefined !== tasks.images.dest ) { -// processors.push( -// assets( { -// basePath: '/', -// loadtasks: tasks.images.dest -// } ) -// ); -//} + const preTasks = undefined === tasks['css-lint'] ? [] : [ 'css-lint' ]; gulp.task( task.name, preTasks, () => { if ( ! task.isValid() ) { @@ -62,10 +35,10 @@ if ( undefined !== task.config ) { // Actual SASS compilation. .pipe( gulpIf( isDev, sourcemaps.init() ) ) .pipe( sass( { - includePaths: task.config.includePaths, + includePaths: undefined !== task.config.includePaths ? task.config.includePaths : [], outputStyle: isDev ? 'expanded' : 'compressed' } ).on( 'error', sass.logError ) ) - .pipe( postcss( processors ) ) + .pipe( postcss( getProcessors( task.config.postcssProcessors ) ) ) .pipe( gulpIf( isDev, sourcemaps.write( '' ) ) ) .pipe( task.end() ); @@ -78,3 +51,48 @@ if ( undefined !== task.config ) { //.pipe( gulpIf( isDev, bs.stream() ) ); } ); } + +function getProcessors( settings ) { + let processors = [], defaults, s; + + defaults = { + cssnext: { + warnForDuplicates: false + }, + autoprefixer: {}, + pxtorem: { + rootValue: 16, + unitPrecision: 5, + propList: [ '*' ], + selectorBlackList: [], + replace: true, + mediaQuery: true, + minPixelValue: 2 + }, + assets: { + relative: true + } + }; + + if ( false !== settings.cssnext ) { + s = true === settings.cssnext ? {} : settings.cssnext; + processors.push( cssnext( Object.assign( defaults.cssnext, s ) ) ); + } + + if ( false !== settings.autoprefixer ) { + s = true === settings.autoprefixer ? {} : settings.autoprefixer; + processors.push( autoprefixer( Object.assign( defaults.autoprefixer, s ) ) ); + } + + if ( false !== settings.pxtorem ) { + s = true === settings.pxtorem ? {} : settings.pxtorem; + processors.push( pxtorem( Object.assign( defaults.pxtorem, s ) ) ); + } + + if ( false !== settings.assets ) { + s = true === settings.assets ? {} : settings.assets; + processors.push( assets( Object.assign( defaults.assets, s ) ) ); + } + + return processors; +} From 57bf6ca248dfa7ad950d25c9e194855f5b97b297 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Wed, 12 Jul 2017 20:24:13 +0200 Subject: [PATCH 17/60] Update `package.json`. --- package.json | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 039ee64..b1e6087 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,15 @@ "dest": "dest/folder", "includePaths": [ "node_modules" - ] + ], + "postcssProcessors": { + "cssnext": true, + "autoprefixer": { + "minPixelValue": 0 + }, + "pxtorem": true, + "assets": true + } }, "css-lint": { "src": "path/to/src/folder/**/*.scss", From 36cbf7b28671bd81dc3c6bc3ef19bb2f8748f884 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Wed, 12 Jul 2017 21:56:29 +0300 Subject: [PATCH 18/60] Updated to Gulp 4 --- package.json | 73 ++++++++++++++++++++++++------------------ workflows/tasks/css.js | 4 +-- workflows/tasks/js.js | 4 +-- 3 files changed, 45 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index 039ee64..4b5a39b 100644 --- a/package.json +++ b/package.json @@ -14,64 +14,68 @@ "license": "MIT", "homepage": "https://github.com/xwp/wp-dev-lib#readme", "scripts": { - "theme:dev": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", - "theme:prod": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", - "plugin": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --workflow=plugin", + "theme:dev": "gulp --gulpfile ./workflows/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", + "theme:prod": "gulp --gulpfile ./workflows/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", + "plugin": "gulp --gulpfile ./workflows/gulpfile.babel.js --cwd ./ --workflow=plugin", "prod": "yarn run theme:prod && yarn run plugin", "dev": "yarn run theme:dev && yarn run plugin" }, "workflows": { "theme": { - "cwd": "common/working/directory", + "cwd": "../wp-content/themes/test-theme", "dev": { "clean": { - "src": "path/to/clean/folder" + "src": "assets/dist" }, "css": { - "src": "path/to/src/folder/**/*.scss", - "base": "path/to/src", - "dest": "dest/folder", + "src": "assets/src/scss/**/*.scss", + "base": "assets/src/scss", + "dest": "assets/dist/css", "includePaths": [ "node_modules" ] }, "css-lint": { - "src": "path/to/src/folder/**/*.scss", - "base": "path/to/src" + "src": "assets/src/scss/**/*.scss", + "base": "assets/src/scss" }, "images": { - "src": "path/to/src/folder/**/*.+(png|jpg|jpeg|gif|bmp|svg)", - "base": "path/to/src", - "dest": "dest/folder" + "src": "assets/images/**/*.+(png|jpg|jpeg|gif|bmp|svg)", + "base": "assets/images/", + "dest": "assets/images/" }, "copy": { - "src": [ "path/to/copy/folder/**/*", "path/to/another/folder/*.ext" ], + "src": [ + "path/to/copy/folder/**/*", + "path/to/another/folder/*.ext" + ], "base": "path/to/src", "dest": "dest/folder" }, "js": [ { "entries": [ - "path/to/entry/file1.js", - "path/to/entry/file2.js" + "assets/src/js/app.js" ], - "bundle": "bundle.js", - "dest": "bundle/js/folder", + "bundle": "bundle.app.js", + "dest": "assets/dist/js", "includePaths": [ "node_modules" ] }, { "entries": [ - "path/to/another/js/bundle/entry/file.js" + "assets/src/js/vendors.js" ], - "bundle": "another-bundle.js", - "dest": "path/to/antother/js/bundle/dest/folder" + "bundle": "bundle.vendor.js", + "dest": "assets/dist/js" } ], "js-lint": { - "src": [ "path/to/linted/file.js" ], - "base": "path/to/src" + "src": [ + "assets/src/js/app.js" + ], + "base": "assets/src" }, "watch": { "tasks": [ @@ -110,7 +114,11 @@ "iOS >= 9" ], "babel": { - "presets": [[ "env" ]] + "presets": [ + [ + "env" + ] + ] }, "stylelint": { "extends": "stylelint-config-wordpress/scss", @@ -131,16 +139,16 @@ } }, "devDependencies": { - "autoprefixer": "^7.1.1", + "autoprefixer": "^7.1.2", "babel-cli": "^6.24.1", - "babel-preset-env": "^1.4.0", + "babel-preset-env": "^1.6.0", "babelify": "^7.3.0", "browserify": "^14.4.0", "del": "^3.0.0", - "eslint": "^3.19.0", + "eslint": "^4.2.0", "eslint-plugin-compat": "^1.0.4", "event-stream": "^3.3.4", - "gulp": "^3.9.1", + "gulp": "github:gulpjs/gulp#4.0", "gulp-cached": "^1.1.1", "gulp-eslint": "^4.0.0", "gulp-flatten": "^0.3.1", @@ -154,16 +162,17 @@ "gulp-uglify": "^3.0.0", "gulp-watch": "^4.3.11", "lodash": "^4.17.4", + "postcss": "^6.0.6", "postcss-assets": "^4.1.0", - "postcss-cli": "^4.0.0", - "postcss-cssnext": "^2.11.0", + "postcss-cli": "^4.1.0", + "postcss-cssnext": "^3.0.2", "postcss-normalize": "^2.0.1", "postcss-pxtorem": "^4.0.1", "postcss-reporter": "^4.0.0", "postcss-scss": "^1.0.2", "require-dir": "^0.3.2", - "run-sequence": "^1.2.2", - "stylelint": "^7.12.0", + "run-sequence": "^2.0.0", + "stylelint": "^7.13.0", "stylelint-config-wordpress": "^11.0.0", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0", diff --git a/workflows/tasks/css.js b/workflows/tasks/css.js index 042f0bf..9f2fa77 100644 --- a/workflows/tasks/css.js +++ b/workflows/tasks/css.js @@ -48,7 +48,7 @@ if ( undefined !== task.config ) { // ); //} - gulp.task( task.name, preTasks, () => { + gulp.task( task.name, gulp.series( preTasks, () => { if ( ! task.isValid() ) { return null; } @@ -76,5 +76,5 @@ if ( undefined !== task.config ) { * a full page reload (as it will not find any .map files in the DOM). */ //.pipe( gulpIf( isDev, bs.stream() ) ); - } ); + } ) ); } diff --git a/workflows/tasks/js.js b/workflows/tasks/js.js index 6f4a96c..7f30ad9 100755 --- a/workflows/tasks/js.js +++ b/workflows/tasks/js.js @@ -16,7 +16,7 @@ import { join } from 'path'; if ( undefined !== tasks.js ) { let preTasks = undefined === tasks['js-lint'] ? [] : [ 'js-lint' ]; - gulp.task( 'js', preTasks, () => { + gulp.task( 'js', gulp.series( preTasks, () => { let defaultBundler, prodBundler, jsTasks, jsTasksStream, addCwdToPaths, babelifyOptions; babelifyOptions = { @@ -83,5 +83,5 @@ if ( undefined !== tasks.js ) { jsTasksStream = jsTasks.map( isProd ? prodBundler : defaultBundler ); return es.merge.apply( null, jsTasksStream ); - } ); + } ) ); } From 96b74610bc631e1b2029f8ae2929852a009aabd4 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Thu, 13 Jul 2017 07:32:09 +0300 Subject: [PATCH 19/60] Updated devDependencies --- package.json | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index b1e6087..71b8a13 100644 --- a/package.json +++ b/package.json @@ -139,13 +139,13 @@ } }, "devDependencies": { - "autoprefixer": "^7.1.1", + "autoprefixer": "^7.1.2", "babel-cli": "^6.24.1", - "babel-preset-env": "^1.4.0", + "babel-preset-env": "^1.6.0", "babelify": "^7.3.0", "browserify": "^14.4.0", "del": "^3.0.0", - "eslint": "^3.19.0", + "eslint": "^4.2.0", "eslint-plugin-compat": "^1.0.4", "event-stream": "^3.3.4", "gulp": "^3.9.1", @@ -162,16 +162,17 @@ "gulp-uglify": "^3.0.0", "gulp-watch": "^4.3.11", "lodash": "^4.17.4", + "postcss": "^6.0.6", "postcss-assets": "^4.1.0", - "postcss-cli": "^4.0.0", - "postcss-cssnext": "^2.11.0", + "postcss-cli": "^4.1.0", + "postcss-cssnext": "^3.0.2", "postcss-normalize": "^2.0.1", "postcss-pxtorem": "^4.0.1", "postcss-reporter": "^4.0.0", "postcss-scss": "^1.0.2", "require-dir": "^0.3.2", - "run-sequence": "^1.2.2", - "stylelint": "^7.12.0", + "run-sequence": "^2.0.0", + "stylelint": "^7.13.0", "stylelint-config-wordpress": "^11.0.0", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0", From f0d873db9e6e31a35b3b786d1b28703d2c597595 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Thu, 13 Jul 2017 14:53:21 +0200 Subject: [PATCH 20/60] Run Gulp 4 tasks sequentially. Simplify `css-lint` task configuration. --- package.json | 8 ++------ workflows/gulpfile.babel.js | 22 +++++++++------------- workflows/tasks/css-lint.js | 3 ++- workflows/tasks/css.js | 2 +- workflows/utils/TaskHelper.js | 9 +++++++-- 5 files changed, 21 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 4b5a39b..51d339a 100644 --- a/package.json +++ b/package.json @@ -33,11 +33,8 @@ "dest": "assets/dist/css", "includePaths": [ "node_modules" - ] - }, - "css-lint": { - "src": "assets/src/scss/**/*.scss", - "base": "assets/src/scss" + ], + "enableLinter": true }, "images": { "src": "assets/images/**/*.+(png|jpg|jpeg|gif|bmp|svg)", @@ -171,7 +168,6 @@ "postcss-reporter": "^4.0.0", "postcss-scss": "^1.0.2", "require-dir": "^0.3.2", - "run-sequence": "^2.0.0", "stylelint": "^7.13.0", "stylelint-config-wordpress": "^11.0.0", "vinyl-buffer": "^1.0.0", diff --git a/workflows/gulpfile.babel.js b/workflows/gulpfile.babel.js index e676337..18f916d 100755 --- a/workflows/gulpfile.babel.js +++ b/workflows/gulpfile.babel.js @@ -2,27 +2,24 @@ import { env, workflow, tasks } from './utils/get-config'; import requireDir from 'require-dir'; import gulp from 'gulp'; import gutil from 'gulp-util'; -import runSequence from 'run-sequence'; import _without from 'lodash/without'; // Load all Gulp tasks from `tasks` dir. requireDir( 'tasks' ); -// To add a new task, simply create a new task file in `tasks` folder. -gulp.task( 'default', done => { - if ( undefined === workflow ) { - gutil.log( gutil.colors.red( `No workflow provided, aborting!` ) ); - return; - } +if ( undefined === workflow ) { + gutil.log( gutil.colors.red( `No workflow provided, aborting!` ) ); +} else { gutil.log( `Using '${ gutil.colors.yellow( workflow ) }' workflow...` ); if ( undefined !== env ) { gutil.log( `Using '${ gutil.colors.yellow( env ) }' environment...` ); } + // To add a new task, simply create a new task file in `tasks` folder. let tasksList = _without( Object.keys( tasks ), 'js-lint', 'cwd' ); - tasksList = tasksList.filter( task => { - if ( undefined === gulp.tasks[ task ] ) { + tasksList = tasksList.filter( task => { + if ( undefined === gulp.task( task ) ) { gutil.log( `Task '${ gutil.colors.red( task ) }' is not defined, ignoring!` ); return false; } @@ -31,8 +28,7 @@ gulp.task( 'default', done => { if ( 0 === tasksList.length ) { gutil.log( `No tasks provided for workflow '${ gutil.colors.yellow( workflow ) }', aborting!` ); - return; + } else { + gulp.task( 'default', gulp.series( tasksList ) ); } - - runSequence( ...tasksList, done ); -} ); +} \ No newline at end of file diff --git a/workflows/tasks/css-lint.js b/workflows/tasks/css-lint.js index 237a4fb..b0ef7eb 100644 --- a/workflows/tasks/css-lint.js +++ b/workflows/tasks/css-lint.js @@ -11,7 +11,8 @@ import TaskHelper from '../utils/TaskHelper'; const task = new TaskHelper( { name: 'css-lint', requiredPaths: ['src'], - config: tasks + config: tasks, + configSlug: 'css' } ); if ( undefined !== task.config ) { diff --git a/workflows/tasks/css.js b/workflows/tasks/css.js index 9f2fa77..6558341 100644 --- a/workflows/tasks/css.js +++ b/workflows/tasks/css.js @@ -35,7 +35,7 @@ if ( undefined !== task.config ) { let preTasks = []; - if ( undefined !== tasks['css-lint'] ) { + if ( undefined !== task.config.enableLinter && true === task.config.enableLinter ) { preTasks.push( 'css-lint' ); } diff --git a/workflows/utils/TaskHelper.js b/workflows/utils/TaskHelper.js index a30f034..967050f 100644 --- a/workflows/utils/TaskHelper.js +++ b/workflows/utils/TaskHelper.js @@ -4,7 +4,7 @@ import { join } from 'path'; import { cwd } from './get-config'; export default class TaskHelper { - constructor( { name = '', requiredPaths = [], config = null } ) { + constructor( { name = '', requiredPaths = [], config = null, configSlug = '' } ) { if ( null === config ) { gutil.log( gutil.colors.red( 'The task template is missing a configuration.' ) ); return; @@ -13,16 +13,21 @@ export default class TaskHelper { this._name = name; this._requiredPaths = requiredPaths; this._config = config; + this._configSlug = '' === configSlug ? name : configSlug; } get config() { - return '' !== this.name ? this._config[ this.name ] : this._config; + return '' !== this.configSlug ? this._config[ this.configSlug ] : this._config; } get name() { return this._name; } + get configSlug() { + return this._configSlug; + } + get requiredPaths() { return this._requiredPaths; } From 34fd6ee1226764f8560699a4d211c45548ab69ae Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Thu, 13 Jul 2017 17:44:04 +0200 Subject: [PATCH 21/60] Make sure all tasks have proper display names. --- workflows/tasks/css-lint.js | 2 +- workflows/tasks/css.js | 17 ++++++++++------- workflows/tasks/js.js | 16 +++++++++++----- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/workflows/tasks/css-lint.js b/workflows/tasks/css-lint.js index b0ef7eb..90bc0e2 100644 --- a/workflows/tasks/css-lint.js +++ b/workflows/tasks/css-lint.js @@ -25,7 +25,7 @@ if ( undefined !== task.config ) { .pipe( gulpIf( isDev, cache( task.cacheName ) ) ) .pipe( postcss( [ stylelint(), - reporter( { clearMessages: true } ) + reporter( { clearAllMessages: true } ) ], { syntax: scss } ) ); } ); } diff --git a/workflows/tasks/css.js b/workflows/tasks/css.js index 43cde9d..b48321b 100644 --- a/workflows/tasks/css.js +++ b/workflows/tasks/css.js @@ -19,12 +19,7 @@ const task = new TaskHelper( { } ); if ( undefined !== task.config ) { - let preTasks = []; - if ( undefined !== task.config.enableLinter && true === task.config.enableLinter ) { - preTasks.push( 'css-lint' ); - } - - gulp.task( task.name, gulp.series( preTasks, () => { + function fn() { if ( ! task.isValid() ) { return null; } @@ -52,7 +47,15 @@ if ( undefined !== task.config ) { * a full page reload (as it will not find any .map files in the DOM). */ //.pipe( gulpIf( isDev, bs.stream() ) ); - } ) ); + } + + fn.displayName = 'css-compile'; + + if ( undefined !== task.config.enableLinter && true === task.config.enableLinter ) { + gulp.task( 'css', gulp.series( 'css-lint', fn ) ); + } else { + gulp.task( 'css', fn ); + } } function getProcessors( settings ) { diff --git a/workflows/tasks/js.js b/workflows/tasks/js.js index 7f30ad9..3354ccf 100755 --- a/workflows/tasks/js.js +++ b/workflows/tasks/js.js @@ -14,9 +14,7 @@ import es from 'event-stream'; import { join } from 'path'; if ( undefined !== tasks.js ) { - let preTasks = undefined === tasks['js-lint'] ? [] : [ 'js-lint' ]; - - gulp.task( 'js', gulp.series( preTasks, () => { + function fn() { let defaultBundler, prodBundler, jsTasks, jsTasksStream, addCwdToPaths, babelifyOptions; babelifyOptions = { @@ -79,9 +77,17 @@ if ( undefined !== tasks.js ) { .pipe( gulp.dest( task.dest, { cwd } ) ); }; - jsTasks = Array.isArray( tasks.js ) ? tasks.js : [ tasks.js ]; + jsTasks = Array.isArray( tasks.js ) ? tasks.js : [ tasks.js ]; jsTasksStream = jsTasks.map( isProd ? prodBundler : defaultBundler ); return es.merge.apply( null, jsTasksStream ); - } ) ); + } + + fn.displayName = 'js-compile'; + + if ( undefined !== tasks['js-lint'] ) { + gulp.task( 'js', gulp.series( 'js-lint', fn ) ); + } else { + gulp.task( 'js', fn ); + } } From 7952f419827edec9dffe0e418e53919d42a33da5 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Thu, 13 Jul 2017 22:06:29 +0300 Subject: [PATCH 22/60] Filtred undefined paths --- workflows/tasks/js.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/workflows/tasks/js.js b/workflows/tasks/js.js index 3354ccf..9d7ab01 100755 --- a/workflows/tasks/js.js +++ b/workflows/tasks/js.js @@ -26,7 +26,8 @@ if ( undefined !== tasks.js ) { }; addCwdToPaths = function( paths ) { - const path = Array.isArray( paths ) ? paths : [ paths ]; + let path = Array.isArray( paths ) ? paths : [ paths ]; + path = path.filter( function(element) { return element != undefined } ) return path.map( entry => join( cwd, entry ) ); }; From 60bc56b910c6a5c6cfd87a757d240a06e40ec411 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Thu, 13 Jul 2017 22:08:25 +0300 Subject: [PATCH 23/60] Replacing yarn by npm --- package.json | 62 ++++++++++++++-------------------------------------- 1 file changed, 17 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index 9dc05a9..84db22c 100644 --- a/package.json +++ b/package.json @@ -17,20 +17,20 @@ "theme:dev": "gulp --gulpfile ./workflows/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", "theme:prod": "gulp --gulpfile ./workflows/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", "plugin": "gulp --gulpfile ./workflows/gulpfile.babel.js --cwd ./ --workflow=plugin", - "prod": "yarn run theme:prod && yarn run plugin", - "dev": "yarn run theme:dev && yarn run plugin" + "prod": "npm run theme:prod && npm run plugin", + "dev": "npm run theme:dev && npm run plugin" }, "workflows": { "theme": { - "cwd": "../wp-content/themes/test-theme", "dev": { + "cwd": "wp-content/themes/test-theme/assets", "clean": { - "src": "assets/dist" + "src": "dist" }, "css": { - "src": "assets/src/scss/**/*.scss", - "base": "assets/src/scss", - "dest": "assets/dist/css", + "src": "src/css/**/*.scss", + "base": "src/css", + "dest": "dist/css", "includePaths": [ "node_modules" ], @@ -45,42 +45,14 @@ } }, "images": { - "src": "assets/images/**/*.+(png|jpg|jpeg|gif|bmp|svg)", - "base": "assets/images/", - "dest": "assets/images/" + "src": "images/**/*.+(png|jpg|jpeg|gif|bmp|svg)", + "base": "images/", + "dest": "images/" }, "copy": { - "src": [ - "path/to/copy/folder/**/*", - "path/to/another/folder/*.ext" - ], - "base": "path/to/src", - "dest": "dest/folder" - }, - "js": [ - { - "entries": [ - "assets/src/js/app.js" - ], - "bundle": "bundle.app.js", - "dest": "assets/dist/js", - "includePaths": [ - "node_modules" - ] - }, - { - "entries": [ - "assets/src/js/vendors.js" - ], - "bundle": "bundle.vendor.js", - "dest": "assets/dist/js" - } - ], - "js-lint": { - "src": [ - "assets/src/js/app.js" - ], - "base": "assets/src" + "src": "src/copy-this/**/*", + "base": "src/copy-this", + "dest": "dist/copied" }, "watch": { "tasks": [ @@ -93,16 +65,16 @@ "prod": {} }, "plugin": { - "cwd": "path/to/plugin/directory", + "cwd": "wp-content/plugins/test-plugin", "clean": { - "src": "clean/folder" + "src": "dist" }, "js": { "entries": [ - "entry/file.js" + "src/js/test.js" ], "bundle": "bundle.js", - "dest": "bundle/folder" + "dest": "dist/js" } } }, From afb19b05fbf026913494893620a30b63c7a08b6b Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Fri, 14 Jul 2017 15:37:45 +0200 Subject: [PATCH 24/60] Use `merge-stream` instead of `event-stream` in order to have task completion signalling. --- package.json | 2 +- workflows/tasks/js.js | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 84db22c..6a2430c 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,6 @@ "del": "^3.0.0", "eslint": "^4.2.0", "eslint-plugin-compat": "^1.0.4", - "event-stream": "^3.3.4", "gulp": "github:gulpjs/gulp#4.0", "gulp-cached": "^1.1.1", "gulp-eslint": "^4.0.0", @@ -139,6 +138,7 @@ "gulp-uglify": "^3.0.0", "gulp-watch": "^4.3.11", "lodash": "^4.17.4", + "merge-stream": "^1.0.1", "postcss": "^6.0.6", "postcss-assets": "^4.1.0", "postcss-cli": "^4.1.0", diff --git a/workflows/tasks/js.js b/workflows/tasks/js.js index 9d7ab01..2addf3e 100755 --- a/workflows/tasks/js.js +++ b/workflows/tasks/js.js @@ -10,7 +10,7 @@ import sourcemaps from 'gulp-sourcemaps'; //import { bs } from './browser-sync'; import uglify from 'gulp-uglify'; import gutil from 'gulp-util'; -import es from 'event-stream'; +import mergeStream from 'merge-stream'; import { join } from 'path'; if ( undefined !== tasks.js ) { @@ -26,9 +26,8 @@ if ( undefined !== tasks.js ) { }; addCwdToPaths = function( paths ) { - let path = Array.isArray( paths ) ? paths : [ paths ]; - path = path.filter( function(element) { return element != undefined } ) - return path.map( entry => join( cwd, entry ) ); + const path = Array.isArray( paths ) ? paths : [ paths ]; + return path.filter( element => element !== undefined ).map( entry => join( cwd, entry ) ); }; defaultBundler = function( task ) { @@ -81,7 +80,7 @@ if ( undefined !== tasks.js ) { jsTasks = Array.isArray( tasks.js ) ? tasks.js : [ tasks.js ]; jsTasksStream = jsTasks.map( isProd ? prodBundler : defaultBundler ); - return es.merge.apply( null, jsTasksStream ); + return mergeStream( jsTasksStream ); } fn.displayName = 'js-compile'; From 42c949f57cbaf6eecf0c9aef75fc6c1240e5638e Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Fri, 14 Jul 2017 15:38:56 +0200 Subject: [PATCH 25/60] Flatten `workflows` object - no need for separate `env` definition. --- package.json | 75 +++++++++++++++++------------------ workflows/utils/get-config.js | 3 -- 2 files changed, 36 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index 6a2430c..37c4426 100644 --- a/package.json +++ b/package.json @@ -22,47 +22,44 @@ }, "workflows": { "theme": { - "dev": { - "cwd": "wp-content/themes/test-theme/assets", - "clean": { - "src": "dist" - }, - "css": { - "src": "src/css/**/*.scss", - "base": "src/css", - "dest": "dist/css", - "includePaths": [ - "node_modules" - ], - "enableLinter": true, - "postcssProcessors": { - "cssnext": true, - "autoprefixer": { - "minPixelValue": 0 - }, - "pxtorem": true, - "assets": true - } - }, - "images": { - "src": "images/**/*.+(png|jpg|jpeg|gif|bmp|svg)", - "base": "images/", - "dest": "images/" - }, - "copy": { - "src": "src/copy-this/**/*", - "base": "src/copy-this", - "dest": "dist/copied" - }, - "watch": { - "tasks": [ - "css", - "copy", - "images" - ] + "cwd": "wp-content/themes/test-theme/assets", + "clean": { + "src": "dist" + }, + "css": { + "src": "src/css/**/*.scss", + "base": "src/css", + "dest": "dist/css", + "includePaths": [ + "node_modules" + ], + "enableLinter": true, + "postcssProcessors": { + "cssnext": true, + "autoprefixer": { + "minPixelValue": 0 + }, + "pxtorem": true, + "assets": true } }, - "prod": {} + "images": { + "src": "images/**/*.+(png|jpg|jpeg|gif|bmp|svg)", + "base": "images/", + "dest": "images/" + }, + "copy": { + "src": "src/copy-this/**/*", + "base": "src/copy-this", + "dest": "dist/copied" + }, + "watch": { + "tasks": [ + "css", + "copy", + "images" + ] + } }, "plugin": { "cwd": "wp-content/plugins/test-plugin", diff --git a/workflows/utils/get-config.js b/workflows/utils/get-config.js index f84d8ea..9289668 100644 --- a/workflows/utils/get-config.js +++ b/workflows/utils/get-config.js @@ -27,9 +27,6 @@ default: if ( undefined !== workflow && undefined !== json.workflows[ workflow ] ) { tasks = json.workflows[ workflow ]; } -if ( undefined !== env && undefined !== tasks[ env ] ) { - tasks = tasks[ env ]; -} if ( undefined !== tasks.cwd ) { cwd = tasks.cwd; } From d81cb5ee125ce29ac6deefe918bf0fe53e76c154 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Fri, 14 Jul 2017 15:39:25 +0200 Subject: [PATCH 26/60] Improve tasks handling in the `gulpfile`. --- workflows/gulpfile.babel.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/workflows/gulpfile.babel.js b/workflows/gulpfile.babel.js index 18f916d..4c202cc 100755 --- a/workflows/gulpfile.babel.js +++ b/workflows/gulpfile.babel.js @@ -1,4 +1,4 @@ -import { env, workflow, tasks } from './utils/get-config'; +import { env, workflow, tasks, isProd } from './utils/get-config'; import requireDir from 'require-dir'; import gulp from 'gulp'; import gutil from 'gulp-util'; @@ -17,8 +17,16 @@ if ( undefined === workflow ) { } // To add a new task, simply create a new task file in `tasks` folder. - let tasksList = _without( Object.keys( tasks ), 'js-lint', 'cwd' ); - tasksList = tasksList.filter( task => { + let tasksList; + const ignoredTasks = [ + 'js-lint', + 'cwd', + isProd ? 'watch' : '' + ]; + tasksList = Object.keys( tasks ).filter( task => { + if ( ignoredTasks.includes( task ) ) { + return false; + } if ( undefined === gulp.task( task ) ) { gutil.log( `Task '${ gutil.colors.red( task ) }' is not defined, ignoring!` ); return false; From d800e7298b750f35d0741ff630c7161120645287 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Fri, 14 Jul 2017 15:45:22 +0200 Subject: [PATCH 27/60] Run `clean` task in series with other tasks being run in parallel. --- workflows/gulpfile.babel.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/workflows/gulpfile.babel.js b/workflows/gulpfile.babel.js index 4c202cc..76193d8 100755 --- a/workflows/gulpfile.babel.js +++ b/workflows/gulpfile.babel.js @@ -2,7 +2,6 @@ import { env, workflow, tasks, isProd } from './utils/get-config'; import requireDir from 'require-dir'; import gulp from 'gulp'; import gutil from 'gulp-util'; -import _without from 'lodash/without'; // Load all Gulp tasks from `tasks` dir. requireDir( 'tasks' ); @@ -17,7 +16,7 @@ if ( undefined === workflow ) { } // To add a new task, simply create a new task file in `tasks` folder. - let tasksList; + let tasksList, hasCleanTask = false; const ignoredTasks = [ 'js-lint', 'cwd', @@ -27,6 +26,10 @@ if ( undefined === workflow ) { if ( ignoredTasks.includes( task ) ) { return false; } + if ( 'clean' === task ) { + hasCleanTask = true; + return false; + } if ( undefined === gulp.task( task ) ) { gutil.log( `Task '${ gutil.colors.red( task ) }' is not defined, ignoring!` ); return false; @@ -36,7 +39,9 @@ if ( undefined === workflow ) { if ( 0 === tasksList.length ) { gutil.log( `No tasks provided for workflow '${ gutil.colors.yellow( workflow ) }', aborting!` ); + } else if ( hasCleanTask ) { + gulp.task( 'default', gulp.series( 'clean', gulp.parallel( tasksList ) ) ); } else { - gulp.task( 'default', gulp.series( tasksList ) ); + gulp.task( 'default', gulp.parallel( tasksList ) ); } } \ No newline at end of file From 42e8d5dbcfa4f1b3108f70aebd2f70f159ead466 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Fri, 14 Jul 2017 15:54:29 +0200 Subject: [PATCH 28/60] Get rid of `cwd` in the tasks list as soon as possible. --- workflows/gulpfile.babel.js | 1 - workflows/utils/get-config.js | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/workflows/gulpfile.babel.js b/workflows/gulpfile.babel.js index 76193d8..e49e6d0 100755 --- a/workflows/gulpfile.babel.js +++ b/workflows/gulpfile.babel.js @@ -19,7 +19,6 @@ if ( undefined === workflow ) { let tasksList, hasCleanTask = false; const ignoredTasks = [ 'js-lint', - 'cwd', isProd ? 'watch' : '' ]; tasksList = Object.keys( tasks ).filter( task => { diff --git a/workflows/utils/get-config.js b/workflows/utils/get-config.js index 9289668..43c18eb 100644 --- a/workflows/utils/get-config.js +++ b/workflows/utils/get-config.js @@ -6,7 +6,7 @@ const json = JSON.parse( fs.readFileSync( './package.json' ) ), workflow = yargs.argv.workflow, browserslist = json.browserslist; -let tasks, +let tasks = [], cwd = '', isTest = false, isProd = false, @@ -29,6 +29,7 @@ if ( undefined !== workflow && undefined !== json.workflows[ workflow ] ) { } if ( undefined !== tasks.cwd ) { cwd = tasks.cwd; + delete tasks.cwd; } export { json, tasks, env, cwd, isDev, isTest, isProd, workflow, browserslist }; From 3b71783057a3c62982082fb902c79581832fe1a6 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Fri, 14 Jul 2017 16:25:05 +0200 Subject: [PATCH 29/60] Add preliminary test for Node min. version. Improve parallel/serial tasks handling. --- workflows/gulpfile.babel.js | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/workflows/gulpfile.babel.js b/workflows/gulpfile.babel.js index e49e6d0..0206d01 100755 --- a/workflows/gulpfile.babel.js +++ b/workflows/gulpfile.babel.js @@ -3,12 +3,16 @@ import requireDir from 'require-dir'; import gulp from 'gulp'; import gutil from 'gulp-util'; -// Load all Gulp tasks from `tasks` dir. -requireDir( 'tasks' ); +const minNodeVersion = 7; -if ( undefined === workflow ) { +if ( minNodeVersion > parseInt( process.version.slice( 1, 2 ), 10 ) ) { + gutil.log( gutil.colors.red( `You must run at least Node version 7. Please update your Node version.` ) ); +} else if ( undefined === workflow ) { gutil.log( gutil.colors.red( `No workflow provided, aborting!` ) ); } else { + // Load all Gulp tasks from `tasks` dir. + requireDir( 'tasks' ); + gutil.log( `Using '${ gutil.colors.yellow( workflow ) }' workflow...` ); if ( undefined !== env ) { @@ -16,7 +20,7 @@ if ( undefined === workflow ) { } // To add a new task, simply create a new task file in `tasks` folder. - let tasksList, hasCleanTask = false; + let tasksList, hasCleanTask = false, hasWatchTask = false, serialTasks = []; const ignoredTasks = [ 'js-lint', isProd ? 'watch' : '' @@ -29,6 +33,10 @@ if ( undefined === workflow ) { hasCleanTask = true; return false; } + if ( 'watch' === task ) { + hasWatchTask = true; + return false; + } if ( undefined === gulp.task( task ) ) { gutil.log( `Task '${ gutil.colors.red( task ) }' is not defined, ignoring!` ); return false; @@ -38,9 +46,14 @@ if ( undefined === workflow ) { if ( 0 === tasksList.length ) { gutil.log( `No tasks provided for workflow '${ gutil.colors.yellow( workflow ) }', aborting!` ); - } else if ( hasCleanTask ) { - gulp.task( 'default', gulp.series( 'clean', gulp.parallel( tasksList ) ) ); - } else { + } else if ( ! hasCleanTask && ! hasWatchTask ) { gulp.task( 'default', gulp.parallel( tasksList ) ); + } else { + serialTasks = [ + hasCleanTask ? 'clean' : '', + gulp.parallel( tasksList ), + hasWatchTask ? 'watch' : '' + ]; + gulp.task( 'default', gulp.series( serialTasks ) ); } } \ No newline at end of file From 4ef37411ca844985f8c719c4d7b21a01a987951e Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 17 Jul 2017 09:56:13 +0300 Subject: [PATCH 30/60] Updated browserslist to match Wordpress standards --- package.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 37c4426..0b9cbfd 100644 --- a/package.json +++ b/package.json @@ -76,16 +76,16 @@ } }, "browserslist": [ - "Edge >= 13", - "Explorer >= 11", - "ExplorerMobile >= 11", - "Firefox >= 50", - "Chrome >= 55", - "ChromeAndroid >= 55", - "Android >= 55", - "Safari >= 10", - "Opera >= 42", - "iOS >= 9" + "last 2 Chrome versions", + "last 2 Firefox versions", + "last 2 Safari versions", + "last 2 Edge versions", + "last 2 Opera versions", + "last 2 iOS versions", + "last 1 Android version", + "last 1 ChromeAndroid version", + "ie 11", + "> 1%" ], "babel": { "presets": [ From d90f67171d9b685a2ab99db1dc105a09ffadf20b Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 17 Jul 2017 13:46:32 +0300 Subject: [PATCH 31/60] Updated the path to include the ./dev-lib such that it can be run from outside dev-lib directly --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 0b9cbfd..e8cb961 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,9 @@ "license": "MIT", "homepage": "https://github.com/xwp/wp-dev-lib#readme", "scripts": { - "theme:dev": "gulp --gulpfile ./workflows/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", - "theme:prod": "gulp --gulpfile ./workflows/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", - "plugin": "gulp --gulpfile ./workflows/gulpfile.babel.js --cwd ./ --workflow=plugin", + "theme:dev": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", + "theme:prod": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", + "plugin": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --workflow=plugin", "prod": "npm run theme:prod && npm run plugin", "dev": "npm run theme:dev && npm run plugin" }, From f14ec3c19854fbb3dc11b9918f39a9005723ddb9 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 17 Jul 2017 14:21:14 +0300 Subject: [PATCH 32/60] Updating minimum requirement to 6.11 (in node's stable tag) --- workflows/gulpfile.babel.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/workflows/gulpfile.babel.js b/workflows/gulpfile.babel.js index 0206d01..c358771 100755 --- a/workflows/gulpfile.babel.js +++ b/workflows/gulpfile.babel.js @@ -3,10 +3,11 @@ import requireDir from 'require-dir'; import gulp from 'gulp'; import gutil from 'gulp-util'; -const minNodeVersion = 7; +const minNodeVersion = 6.11; +const currentNodeVersion = parseFloat( process.version.slice( 1, 5 ) ).toFixed( 2 ); -if ( minNodeVersion > parseInt( process.version.slice( 1, 2 ), 10 ) ) { - gutil.log( gutil.colors.red( `You must run at least Node version 7. Please update your Node version.` ) ); +if ( minNodeVersion > currentNodeVersion ) { + gutil.log( gutil.colors.red( `You need at least Node version 6.11 to run this build. \nPlease update your Node version.` ) ); } else if ( undefined === workflow ) { gutil.log( gutil.colors.red( `No workflow provided, aborting!` ) ); } else { From bc1152edd64b1d7a931540e3fc56e909762b14c0 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Wed, 19 Jul 2017 18:56:11 +0200 Subject: [PATCH 33/60] Add support for `schemas`. --- package.json | 40 ++--------------------------------- workflows/schemas/theme.json | 39 ++++++++++++++++++++++++++++++++++ workflows/utils/TaskHelper.js | 2 +- workflows/utils/get-config.js | 22 +++++++++++++++++++ 4 files changed, 64 insertions(+), 39 deletions(-) create mode 100644 workflows/schemas/theme.json diff --git a/package.json b/package.json index 37c4426..32cb10e 100644 --- a/package.json +++ b/package.json @@ -22,44 +22,8 @@ }, "workflows": { "theme": { - "cwd": "wp-content/themes/test-theme/assets", - "clean": { - "src": "dist" - }, - "css": { - "src": "src/css/**/*.scss", - "base": "src/css", - "dest": "dist/css", - "includePaths": [ - "node_modules" - ], - "enableLinter": true, - "postcssProcessors": { - "cssnext": true, - "autoprefixer": { - "minPixelValue": 0 - }, - "pxtorem": true, - "assets": true - } - }, - "images": { - "src": "images/**/*.+(png|jpg|jpeg|gif|bmp|svg)", - "base": "images/", - "dest": "images/" - }, - "copy": { - "src": "src/copy-this/**/*", - "base": "src/copy-this", - "dest": "dist/copied" - }, - "watch": { - "tasks": [ - "css", - "copy", - "images" - ] - } + "schema": "theme", + "cwd": "wp-content/themes/test-theme/assets" }, "plugin": { "cwd": "wp-content/plugins/test-plugin", diff --git a/workflows/schemas/theme.json b/workflows/schemas/theme.json new file mode 100644 index 0000000..4dafe70 --- /dev/null +++ b/workflows/schemas/theme.json @@ -0,0 +1,39 @@ +{ + "clean": { + "src": "dist" + }, + "css": { + "src": "src/css/**/*.scss", + "base": "src/css", + "dest": "dist", + "includePaths": [ + "node_modules" + ], + "enableLinter": true, + "postcssProcessors": { + "cssnext": true, + "autoprefixer": { + "minPixelValue": 0 + }, + "pxtorem": true, + "assets": true + } + }, + "images": { + "src": "images/**/*.+(png|jpg|jpeg|gif|bmp|svg)", + "base": "images", + "dest": "images" + }, + "copy": { + "src": "src/fonts/**/*", + "base": "src/fonts", + "dest": "dist" + }, + "watch": { + "tasks": [ + "css", + "copy", + "images" + ] + } +} \ No newline at end of file diff --git a/workflows/utils/TaskHelper.js b/workflows/utils/TaskHelper.js index 967050f..b3fbc90 100644 --- a/workflows/utils/TaskHelper.js +++ b/workflows/utils/TaskHelper.js @@ -17,7 +17,7 @@ export default class TaskHelper { } get config() { - return '' !== this.configSlug ? this._config[ this.configSlug ] : this._config; + return '' === this.configSlug ? this._config : this._config[ this.configSlug ]; } get name() { diff --git a/workflows/utils/get-config.js b/workflows/utils/get-config.js index 43c18eb..789c2ce 100644 --- a/workflows/utils/get-config.js +++ b/workflows/utils/get-config.js @@ -1,5 +1,8 @@ import fs from 'fs'; import yargs from 'yargs'; +import { resolve } from 'path'; +import gutil from 'gulp-util'; +import _defaultsDeep from 'lodash/defaultsDeep'; const json = JSON.parse( fs.readFileSync( './package.json' ) ), env = yargs.argv.env, @@ -8,6 +11,7 @@ const json = JSON.parse( fs.readFileSync( './package.json' ) ), let tasks = [], cwd = '', + schema = '', isTest = false, isProd = false, isDev = false; @@ -32,4 +36,22 @@ if ( undefined !== tasks.cwd ) { delete tasks.cwd; } +function getSchema( slug ) { + const file = resolve( __dirname, `../schemas/${ slug }.json` ); + + if ( ! fs.existsSync( file ) ) { + gutil.log( gutil.colors.yellow( `Schema '${ slug }' not found, ignoring...` ) ); + return {}; + } + + return JSON.parse( fs.readFileSync( file ) ); +} +if ( undefined !== tasks.schema ) { + schema = getSchema( tasks.schema ); + delete tasks.schema; + + //let settings = {}; + tasks = _defaultsDeep( tasks, schema ); +} + export { json, tasks, env, cwd, isDev, isTest, isProd, workflow, browserslist }; From d0ab033a27541ac4e50fd07ac6ee8999a10434ae Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Fri, 21 Jul 2017 12:21:19 +0300 Subject: [PATCH 34/60] Adjusted css schema to have /css --- workflows/schemas/theme.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/workflows/schemas/theme.json b/workflows/schemas/theme.json index 4dafe70..bcf3543 100644 --- a/workflows/schemas/theme.json +++ b/workflows/schemas/theme.json @@ -5,7 +5,7 @@ "css": { "src": "src/css/**/*.scss", "base": "src/css", - "dest": "dist", + "dest": "dist/css", "includePaths": [ "node_modules" ], @@ -27,7 +27,7 @@ "copy": { "src": "src/fonts/**/*", "base": "src/fonts", - "dest": "dist" + "dest": "dist/fonts" }, "watch": { "tasks": [ From 0df82596059ac401d368920ff7fda12f4992803c Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Fri, 21 Jul 2017 12:21:28 +0300 Subject: [PATCH 35/60] Webpack JS --- workflows/tasks/js.js | 117 +++++++++++++++++------------------------- 1 file changed, 47 insertions(+), 70 deletions(-) diff --git a/workflows/tasks/js.js b/workflows/tasks/js.js index 2addf3e..d63cd7f 100755 --- a/workflows/tasks/js.js +++ b/workflows/tasks/js.js @@ -1,84 +1,61 @@ -import { tasks, isProd, browserslist, cwd } from '../utils/get-config'; +import { tasks, isProd, isDev, browserslist, cwd } from '../utils/get-config'; import gulp from 'gulp'; -import plumber from 'gulp-plumber'; -import browserify from 'browserify'; -import babelify from 'babelify'; -import watchify from 'watchify'; -import source from 'vinyl-source-stream'; -import buffer from 'vinyl-buffer'; -import sourcemaps from 'gulp-sourcemaps'; -//import { bs } from './browser-sync'; -import uglify from 'gulp-uglify'; -import gutil from 'gulp-util'; import mergeStream from 'merge-stream'; -import { join } from 'path'; +import { join, resolve } from 'path'; +import webpack from 'webpack'; +import webpackStream from 'webpack-stream'; +const ProgressBarPlugin = require('progress-bar-webpack-plugin') +const {removeEmpty} = require('webpack-config-utils') if ( undefined !== tasks.js ) { function fn() { - let defaultBundler, prodBundler, jsTasks, jsTasksStream, addCwdToPaths, babelifyOptions; + let jsTasks, jsTasksStream, babelifyOptions; + const paths = tasks.js; babelifyOptions = { - presets: [ [ 'env', { - targets: { - browsers: browserslist - } - } ] ] - }; + presets: [ + ["env", { + "targets": { + browsers: browserslist + } + }] + ] + } - addCwdToPaths = function( paths ) { - const path = Array.isArray( paths ) ? paths : [ paths ]; - return path.filter( element => element !== undefined ).map( entry => join( cwd, entry ) ); - }; + const webpackConfig = { + context: resolve( cwd, paths.base ), + entry: paths.entry, + output: { + filename: '[name].js', + pathinfo: true == isDev, + }, + devtool: isProd ? 'source-map': 'eval', + module: { + loaders: [ + { + test: /\.js$/, + loader: 'babel-loader', + options: babelifyOptions, + exclude: /node_modules/ + }, + ], + }, + plugins: removeEmpty([ + new ProgressBarPlugin(), + isProd ? new webpack.optimize.UglifyJsPlugin() : undefined + ]), + watch: true, + cache: true, + } - defaultBundler = function( task ) { - let options, watchifyTask, bundle; - - options = Object.assign( { - entries: addCwdToPaths( task.entries ), - paths: addCwdToPaths( task.includePaths ), - debug: true - }, watchify.args ); - - watchifyTask = watchify( browserify( options ).transform( babelify, babelifyOptions ) ); - - bundle = function() { - return watchifyTask.bundle() - .on( 'error', ( error ) => { - gutil.log( error.codeFrame + '\n' + gutil.colors.red( error.toString() ) ); - } ) - .pipe( plumber() ) - .pipe( source( task.bundle ) ) - .pipe( buffer() ) - .pipe( sourcemaps.init( { loadMaps: true } ) ) - .pipe( sourcemaps.write( '' ) ) - .pipe( gulp.dest( task.dest, { cwd } ) ); - }; - - watchifyTask.on( 'update', bundle ); - watchifyTask.on( 'log', gutil.log ); - - return bundle(); - }; - - prodBundler = function( task ) { - const options = { - entries: addCwdToPaths( task.entries ), - paths: addCwdToPaths( task.includePaths ), - debug: false - }; - - return browserify( options ) - .transform( babelify, babelifyOptions ) - .bundle() - .pipe( plumber() ) - .pipe( source( task.bundle ) ) - .pipe( buffer() ) - .pipe( uglify() ) - .pipe( gulp.dest( task.dest, { cwd } ) ); - }; + const webpackJs = function( task ) { + return gulp.src( resolve( cwd, paths.base ) ) + .pipe( webpackStream( webpackConfig, webpack ) ) + .pipe( gulp.dest( resolve( cwd, paths.dest ) ) ); + } jsTasks = Array.isArray( tasks.js ) ? tasks.js : [ tasks.js ]; - jsTasksStream = jsTasks.map( isProd ? prodBundler : defaultBundler ); + jsTasksStream = jsTasks.map( webpackJs ); return mergeStream( jsTasksStream ); } From 432e8cb35a843be1bb981cfaf3866821137ebcfd Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Fri, 21 Jul 2017 12:29:39 +0300 Subject: [PATCH 36/60] Added webpack dependencies, removed babelify browserify. added basic js recipe --- package.json | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d37212f..fdce291 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,15 @@ "workflows": { "theme": { "schema": "theme", - "cwd": "wp-content/themes/test-theme/assets" + "cwd": "wp-content/themes/test-theme/assets", + "js": { + "base": "src/js", + "dest": "dist/js", + "entry": { + "app": "./app.js", + "vendor": "./vendors.js" + } + } }, "plugin": { "cwd": "wp-content/plugins/test-plugin", @@ -79,9 +87,9 @@ "devDependencies": { "autoprefixer": "^7.1.2", "babel-cli": "^6.24.1", + "babel-core": "^6.25.0", + "babel-loader": "^7.1.1", "babel-preset-env": "^1.6.0", - "babelify": "^7.3.0", - "browserify": "^14.4.0", "del": "^3.0.0", "eslint": "^4.2.0", "eslint-plugin-compat": "^1.0.4", @@ -108,12 +116,16 @@ "postcss-pxtorem": "^4.0.1", "postcss-reporter": "^4.0.0", "postcss-scss": "^1.0.2", + "progress-bar-webpack-plugin": "^1.10.0", "require-dir": "^0.3.2", "stylelint": "^7.13.0", "stylelint-config-wordpress": "^11.0.0", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0", "watchify": "^3.9.0", + "webpack": "^3.3.0", + "webpack-config-utils": "^2.3.0", + "webpack-stream": "^3.2.0", "yargs": "^8.0.2" } } From 93541b2d6fd8cb730a8e7cb08ac0dec5b34acad3 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Fri, 21 Jul 2017 12:35:45 +0300 Subject: [PATCH 37/60] JS: Added default theme schema --- workflows/schemas/theme.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/workflows/schemas/theme.json b/workflows/schemas/theme.json index bcf3543..32f18e1 100644 --- a/workflows/schemas/theme.json +++ b/workflows/schemas/theme.json @@ -19,6 +19,13 @@ "assets": true } }, + "js": { + "base": "src/js", + "dest": "dist/js", + "entry": { + "main": "./main.js" + } + }, "images": { "src": "images/**/*.+(png|jpg|jpeg|gif|bmp|svg)", "base": "images", From eb3e39370b2e471d0c89bfdf0d7e1b91221ec93b Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Fri, 21 Jul 2017 12:35:59 +0300 Subject: [PATCH 38/60] JS: Cleaned package.json - added sample vendors.js 2nd js compilation --- package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/package.json b/package.json index fdce291..e4a588a 100644 --- a/package.json +++ b/package.json @@ -25,10 +25,7 @@ "schema": "theme", "cwd": "wp-content/themes/test-theme/assets", "js": { - "base": "src/js", - "dest": "dist/js", "entry": { - "app": "./app.js", "vendor": "./vendors.js" } } From 6fcb209523d770fd8cbd9c50885e8b6ebfedece2 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 24 Jul 2017 07:16:14 +0300 Subject: [PATCH 39/60] Adding jQuery global to ESLint due to high percentage of WP sites using it --- .eslintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc b/.eslintrc index ba9eb82..1880319 100644 --- a/.eslintrc +++ b/.eslintrc @@ -10,7 +10,7 @@ "globals": { "_": false, "Backbone": false, - "jQuery": false, + "jQuery": true, "wp": false }, "rules": { From a6a08fb10733dc715c8eb04c4d95179e76d115b9 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 24 Jul 2017 07:26:55 +0300 Subject: [PATCH 40/60] Added no unsupported browser features to the styles linting plugin --- package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/package.json b/package.json index e4a588a..e486aab 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,9 @@ }, "stylelint": { "extends": "stylelint-config-wordpress/scss", + "plugins": [ + "stylelint-no-unsupported-browser-features" + ], "rules": { "at-rule-empty-line-before": [ "always", @@ -77,6 +80,7 @@ ] } ], + "plugin/no-unsupported-browser-features": [true, { "severity": "warning" }], "selector-pseudo-element-colon-notation": "double", "value-keyword-case": null } @@ -117,6 +121,7 @@ "require-dir": "^0.3.2", "stylelint": "^7.13.0", "stylelint-config-wordpress": "^11.0.0", + "stylelint-no-unsupported-browser-features": "^1.0.0", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0", "watchify": "^3.9.0", From d4e03162bae41d00d14dda68ca39ba397dbd549f Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 24 Jul 2017 07:29:58 +0300 Subject: [PATCH 41/60] Disabled eslint.format in dev to avoid the formatting updates from triggering a recompile (and another, and another) --- workflows/tasks/js-lint.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/workflows/tasks/js-lint.js b/workflows/tasks/js-lint.js index b5b3859..30763d2 100644 --- a/workflows/tasks/js-lint.js +++ b/workflows/tasks/js-lint.js @@ -20,7 +20,7 @@ if ( undefined !== task.config ) { return task.start() .pipe( gulpIf( isDev, cache( task.cacheName ) ) ) .pipe( eslint() ) - .pipe( eslint.format() ) + .pipe( gulpIf( isProd, eslint.format() ) ) .pipe( gulpIf( isProd, eslint.failAfterError() ) ); } ); } From 924a9e3afe10a72542bf39fd7e7e393c97dcb7c2 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 24 Jul 2017 08:17:50 +0300 Subject: [PATCH 42/60] Added plumber and eslint to webpack workflow --- workflows/tasks/js.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/workflows/tasks/js.js b/workflows/tasks/js.js index d63cd7f..54d76da 100755 --- a/workflows/tasks/js.js +++ b/workflows/tasks/js.js @@ -6,10 +6,11 @@ import webpack from 'webpack'; import webpackStream from 'webpack-stream'; const ProgressBarPlugin = require('progress-bar-webpack-plugin') const {removeEmpty} = require('webpack-config-utils') +import plumber from 'gulp-plumber'; if ( undefined !== tasks.js ) { function fn() { - let jsTasks, jsTasksStream, babelifyOptions; + let jsTasks, jsTasksStream, babelifyOptions, esLintOptions = {}; const paths = tasks.js; babelifyOptions = { @@ -22,6 +23,15 @@ if ( undefined !== tasks.js ) { ] } + // Avoid linting for the test environment + if ( isDev || isProd ) { + esLintOptions = { + test: /\.js$/, + loader: 'eslint-loader', + exclude: /(node_modules)/ + } + } + const webpackConfig = { context: resolve( cwd, paths.base ), entry: paths.entry, @@ -31,6 +41,9 @@ if ( undefined !== tasks.js ) { }, devtool: isProd ? 'source-map': 'eval', module: { + rules: [ + esLintOptions + ], loaders: [ { test: /\.js$/, @@ -50,7 +63,9 @@ if ( undefined !== tasks.js ) { const webpackJs = function( task ) { return gulp.src( resolve( cwd, paths.base ) ) + .pipe( plumber() ) .pipe( webpackStream( webpackConfig, webpack ) ) + .pipe( plumber.stop() ) .pipe( gulp.dest( resolve( cwd, paths.dest ) ) ); } From 152a6eb6ad1944596f11b7f106c69348d9976f43 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 24 Jul 2017 08:41:07 +0300 Subject: [PATCH 43/60] Updated comment about task that watches for JS --- workflows/tasks/watch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/workflows/tasks/watch.js b/workflows/tasks/watch.js index 0773e1e..0d92ceb 100644 --- a/workflows/tasks/watch.js +++ b/workflows/tasks/watch.js @@ -7,7 +7,7 @@ import _without from 'lodash/without'; if ( undefined !== tasks.watch && undefined !== tasks.watch.tasks ) { gulp.task( 'watch', () => { - // Omit some tasks, e.g. `js` is already watched by Watchify. + // Omit some tasks, e.g. `js` is already watched by Webpack. const filteredTasks = _without( tasks.watch.tasks, 'js', 'js-lint', 'clean' ); filteredTasks.forEach( taskSlug => { From 487d181f1d44849a7c3e4752b3bd710ef65c7eb1 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 24 Jul 2017 08:41:53 +0300 Subject: [PATCH 44/60] Updated authors / contributors + shrank the dependencies list according to what's actually used. Updated dependencies ot latest version --- package.json | 42 +++++++++++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index e486aab..0db1c73 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,21 @@ "development", "tools" ], - "author": "Weston Ruter (https://xwp.co)", + "author": { + "name": "Piotr Delawski", + "email": "piotr.delawski@xwp.co", + "url": "https://www.xwp.co" + }, + "contributors": [ + { + "name": "Mike Crantea", + "email": "mike.crantea@xwp.co" + }, + { + "name": "Weston Ruter", + "email": "weston.ruter@xwp.co" + } + ], "license": "MIT", "homepage": "https://github.com/xwp/wp-dev-lib#readme", "scripts": { @@ -80,24 +94,28 @@ ] } ], - "plugin/no-unsupported-browser-features": [true, { "severity": "warning" }], + "plugin/no-unsupported-browser-features": [ + true, + { + "severity": "warning" + } + ], "selector-pseudo-element-colon-notation": "double", "value-keyword-case": null } }, "devDependencies": { "autoprefixer": "^7.1.2", - "babel-cli": "^6.24.1", "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-env": "^1.6.0", "del": "^3.0.0", - "eslint": "^4.2.0", + "eslint": "^4.3.0", + "eslint-loader": "^1.9.0", "eslint-plugin-compat": "^1.0.4", - "gulp": "github:gulpjs/gulp#4.0", + "gulp": "gulpjs/gulp.git#4.0", "gulp-cached": "^1.1.1", "gulp-eslint": "^4.0.0", - "gulp-flatten": "^0.3.1", "gulp-if": "^2.0.2", "gulp-imagemin": "^3.3.0", "gulp-plumber": "^1.1.0", @@ -105,26 +123,20 @@ "gulp-progeny": "^0.4.0", "gulp-sass": "^3.1.0", "gulp-sourcemaps": "^2.6.0", - "gulp-uglify": "^3.0.0", "gulp-watch": "^4.3.11", "lodash": "^4.17.4", "merge-stream": "^1.0.1", - "postcss": "^6.0.6", - "postcss-assets": "^4.1.0", - "postcss-cli": "^4.1.0", + "postcss": "^6.0.8", + "postcss-assets": "^4.2.0", "postcss-cssnext": "^3.0.2", - "postcss-normalize": "^2.0.1", "postcss-pxtorem": "^4.0.1", "postcss-reporter": "^4.0.0", "postcss-scss": "^1.0.2", "progress-bar-webpack-plugin": "^1.10.0", "require-dir": "^0.3.2", "stylelint": "^7.13.0", - "stylelint-config-wordpress": "^11.0.0", + "stylelint-config-wordpress": "^12.0.0", "stylelint-no-unsupported-browser-features": "^1.0.0", - "vinyl-buffer": "^1.0.0", - "vinyl-source-stream": "^1.1.0", - "watchify": "^3.9.0", "webpack": "^3.3.0", "webpack-config-utils": "^2.3.0", "webpack-stream": "^3.2.0", From d285e824cd16dfdfbc3d5610df8a8ed08382591a Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 24 Jul 2017 08:59:31 +0300 Subject: [PATCH 45/60] ESLint Ignored the dist directory --- .eslintignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintignore b/.eslintignore index 4cd1606..ff24424 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ **/*.min.js **/node_modules/** **/vendor/** +**/dist/** From 66746b8e713f5e71a65fb72c3160d6a6df9fa451 Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 24 Jul 2017 08:59:40 +0300 Subject: [PATCH 46/60] Added back empty test script --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 0db1c73..741e3d7 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "theme:prod": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", "plugin": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --workflow=plugin", "prod": "npm run theme:prod && npm run plugin", - "dev": "npm run theme:dev && npm run plugin" + "dev": "npm run theme:dev && npm run plugin", + "test": "echo \"Error: no test specified\" && exit 1" }, "workflows": { "theme": { From cd8c9adb13bf5a5318f0a5eb0a952294b1d25f4c Mon Sep 17 00:00:00 2001 From: Mike Crantea Date: Mon, 24 Jul 2017 09:06:03 +0300 Subject: [PATCH 47/60] Fixed contributors --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 741e3d7..d2f596c 100644 --- a/package.json +++ b/package.json @@ -11,18 +11,18 @@ "tools" ], "author": { - "name": "Piotr Delawski", - "email": "piotr.delawski@xwp.co", + "name": "Weston Ruter", + "email": "weston.ruter@xwp.co", "url": "https://www.xwp.co" }, "contributors": [ { - "name": "Mike Crantea", - "email": "mike.crantea@xwp.co" + "name": "Piotr Delawski", + "email": "piotr.delawski@xwp.co" }, { - "name": "Weston Ruter", - "email": "weston.ruter@xwp.co" + "name": "Mike Crantea", + "email": "mike.crantea@xwp.co" } ], "license": "MIT", From 7cb7a13d02dd10b2def0b4aa06ae3fb1480789c6 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Mon, 24 Jul 2017 12:48:20 +0200 Subject: [PATCH 48/60] Remove unneeded code in the `JS` task. --- package.json | 1 - workflows/tasks/js.js | 46 ++++++++++++++++++------------------------- 2 files changed, 19 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index d2f596c..f9636ea 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,6 @@ "gulp-sourcemaps": "^2.6.0", "gulp-watch": "^4.3.11", "lodash": "^4.17.4", - "merge-stream": "^1.0.1", "postcss": "^6.0.8", "postcss-assets": "^4.2.0", "postcss-cssnext": "^3.0.2", diff --git a/workflows/tasks/js.js b/workflows/tasks/js.js index 54d76da..e6358f0 100755 --- a/workflows/tasks/js.js +++ b/workflows/tasks/js.js @@ -1,27 +1,26 @@ import { tasks, isProd, isDev, browserslist, cwd } from '../utils/get-config'; import gulp from 'gulp'; -import mergeStream from 'merge-stream'; -import { join, resolve } from 'path'; +import { resolve } from 'path'; import webpack from 'webpack'; import webpackStream from 'webpack-stream'; -const ProgressBarPlugin = require('progress-bar-webpack-plugin') -const {removeEmpty} = require('webpack-config-utils') +import ProgressBarPlugin from 'progress-bar-webpack-plugin'; +import { removeEmpty } from 'webpack-config-utils'; import plumber from 'gulp-plumber'; if ( undefined !== tasks.js ) { - function fn() { - let jsTasks, jsTasksStream, babelifyOptions, esLintOptions = {}; + let fn = function() { + let babelifyOptions, webpackConfig, esLintOptions = {}; const paths = tasks.js; babelifyOptions = { presets: [ - ["env", { - "targets": { + [ 'env', { + targets: { browsers: browserslist } - }] + } ] ] - } + }; // Avoid linting for the test environment if ( isDev || isProd ) { @@ -29,15 +28,15 @@ if ( undefined !== tasks.js ) { test: /\.js$/, loader: 'eslint-loader', exclude: /(node_modules)/ - } + }; } - const webpackConfig = { + webpackConfig = { context: resolve( cwd, paths.base ), entry: paths.entry, output: { filename: '[name].js', - pathinfo: true == isDev, + pathinfo: isDev, }, devtool: isProd ? 'source-map': 'eval', module: { @@ -59,21 +58,14 @@ if ( undefined !== tasks.js ) { ]), watch: true, cache: true, - } - - const webpackJs = function( task ) { - return gulp.src( resolve( cwd, paths.base ) ) - .pipe( plumber() ) - .pipe( webpackStream( webpackConfig, webpack ) ) - .pipe( plumber.stop() ) - .pipe( gulp.dest( resolve( cwd, paths.dest ) ) ); - } - - jsTasks = Array.isArray( tasks.js ) ? tasks.js : [ tasks.js ]; - jsTasksStream = jsTasks.map( webpackJs ); + }; - return mergeStream( jsTasksStream ); - } + return gulp.src( resolve( cwd, paths.base ) ) + .pipe( plumber() ) + .pipe( webpackStream( webpackConfig, webpack ) ) + .pipe( plumber.stop() ) + .pipe( gulp.dest( resolve( cwd, paths.dest ) ) ); + }; fn.displayName = 'js-compile'; From 07106c49a057f4e71a83553d08bdd402b23e59d3 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Mon, 24 Jul 2017 12:51:24 +0200 Subject: [PATCH 49/60] Remove commented out code and slight code improvements. --- workflows/gulpfile.babel.js | 4 ++-- workflows/tasks/css.js | 11 ++--------- workflows/tasks/images.js | 1 - workflows/tasks/watch.js | 7 ++----- workflows/utils/get-config.js | 2 -- 5 files changed, 6 insertions(+), 19 deletions(-) diff --git a/workflows/gulpfile.babel.js b/workflows/gulpfile.babel.js index c358771..0134cdc 100755 --- a/workflows/gulpfile.babel.js +++ b/workflows/gulpfile.babel.js @@ -3,8 +3,8 @@ import requireDir from 'require-dir'; import gulp from 'gulp'; import gutil from 'gulp-util'; -const minNodeVersion = 6.11; -const currentNodeVersion = parseFloat( process.version.slice( 1, 5 ) ).toFixed( 2 ); +const minNodeVersion = 6.11, + currentNodeVersion = parseFloat( process.version.slice( 1, 5 ) ).toFixed( 2 ); if ( minNodeVersion > currentNodeVersion ) { gutil.log( gutil.colors.red( `You need at least Node version 6.11 to run this build. \nPlease update your Node version.` ) ); diff --git a/workflows/tasks/css.js b/workflows/tasks/css.js index b48321b..9bf4bc4 100644 --- a/workflows/tasks/css.js +++ b/workflows/tasks/css.js @@ -19,7 +19,7 @@ const task = new TaskHelper( { } ); if ( undefined !== task.config ) { - function fn() { + let fn = function() { if ( ! task.isValid() ) { return null; } @@ -40,14 +40,7 @@ if ( undefined !== task.config ) { .pipe( gulpIf( isDev, sourcemaps.write( '' ) ) ) .pipe( task.end() ); - - /* - * If you generate source maps to a separate `.map` file you need to add `{match: '** / *.css'}` option to stream. - * These files end up being sent down stream and when browserSync.stream() receives them, it will attempt - * a full page reload (as it will not find any .map files in the DOM). - */ - //.pipe( gulpIf( isDev, bs.stream() ) ); - } + }; fn.displayName = 'css-compile'; diff --git a/workflows/tasks/images.js b/workflows/tasks/images.js index 74d8837..d06bd01 100755 --- a/workflows/tasks/images.js +++ b/workflows/tasks/images.js @@ -20,5 +20,4 @@ gulp.task( task.name, () => { .pipe( gulpIf( isDev, cache( task.cacheName, { optimizeMemory: false } ) ) ) .pipe( imagemin() ) .pipe( task.end() ); - //.pipe( gulpIf( isDev, bs.stream() ) ); } ); diff --git a/workflows/tasks/watch.js b/workflows/tasks/watch.js index 0d92ceb..a0da0dc 100644 --- a/workflows/tasks/watch.js +++ b/workflows/tasks/watch.js @@ -12,15 +12,12 @@ if ( undefined !== tasks.watch && undefined !== tasks.watch.tasks ) { filteredTasks.forEach( taskSlug => { const task = tasks[ taskSlug ]; - let source; - if ( undefined !== task.src ) { - source = join( cwd, task.src ); - } else { + if ( undefined === task.src ) { return; } - watch( source, () => gulp.start( taskSlug ) ); + watch( join( cwd, task.src ), () => gulp.start( taskSlug ) ); } ); } ); } diff --git a/workflows/utils/get-config.js b/workflows/utils/get-config.js index 789c2ce..f4e6e9d 100644 --- a/workflows/utils/get-config.js +++ b/workflows/utils/get-config.js @@ -49,8 +49,6 @@ function getSchema( slug ) { if ( undefined !== tasks.schema ) { schema = getSchema( tasks.schema ); delete tasks.schema; - - //let settings = {}; tasks = _defaultsDeep( tasks, schema ); } From b807afd6a61dbcae848d58a6de8b18b2aea230e6 Mon Sep 17 00:00:00 2001 From: Justin Kopepasah Date: Mon, 24 Jul 2017 21:19:40 +0900 Subject: [PATCH 50/60] Recommendations for workflow updates. --- .eslintrc | 1 + .gitignore | 1 + package.json | 17 ++++++++++++++++- 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/.eslintrc b/.eslintrc index 1880319..94ae914 100644 --- a/.eslintrc +++ b/.eslintrc @@ -13,6 +13,7 @@ "jQuery": true, "wp": false }, + "extends": 'wordpress', "rules": { "accessor-pairs": [2], "block-scoped-var": [2], diff --git a/.gitignore b/.gitignore index bdfda97..a121d1d 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ codecept.phar +node_modules diff --git a/package.json b/package.json index f9636ea..edd50dd 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,11 @@ { "name": "Mike Crantea", "email": "mike.crantea@xwp.co" + }, + { + "name": "Justin Kopepasah", + "email": "justin.kopepasah@xwp.co", + "url": "https://kopepasah.com" } ], "license": "MIT", @@ -84,14 +89,23 @@ "stylelint-no-unsupported-browser-features" ], "rules": { + "string-quotes": "single", + "color-hex-length": "long", + "function-parentheses-space-inside": "always", + "function-url-quotes": "always", "at-rule-empty-line-before": [ "always", { "except": [ - "first-nested" + "first-nested", + "blockless-after-same-name-blockless" ], "ignore": [ "after-comment" + ], + "ignoreAtRules": [ + "else", + "elseif" ] } ], @@ -112,6 +126,7 @@ "babel-preset-env": "^1.6.0", "del": "^3.0.0", "eslint": "^4.3.0", + "eslint-config-wordpress": "^2.0.0", "eslint-loader": "^1.9.0", "eslint-plugin-compat": "^1.0.4", "gulp": "gulpjs/gulp.git#4.0", From 5e02f9d4f7e335bc305b0e990626d53741166bc8 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Mon, 24 Jul 2017 20:44:02 +0200 Subject: [PATCH 51/60] Update FE workflow: - Make `prod` env work. - Split the main Gulp file into smaller modules. - Add first Jest tests. - Rely on Node version setting from the `package.json` instead of hardcoded value. --- package.json | 4 ++ workflows/gulpfile.babel.js | 63 +++--------------------------- workflows/utils/get-tasks.js | 38 ++++++++++++++++++ workflows/utils/pre-check.js | 24 ++++++++++++ workflows/utils/sort-tasks.js | 15 +++++++ workflows/utils/sort-tasks.test.js | 53 +++++++++++++++++++++++++ 6 files changed, 140 insertions(+), 57 deletions(-) create mode 100644 workflows/utils/get-tasks.js create mode 100644 workflows/utils/pre-check.js create mode 100644 workflows/utils/sort-tasks.js create mode 100755 workflows/utils/sort-tasks.test.js diff --git a/package.json b/package.json index f9636ea..e9bbd85 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "1.0.0", "description": "Common code used during development of WordPress plugins and themes", "repository": "xwp/wp-dev-lib", + "engines": { + "node": ">=6.11.x" + }, "keywords": [ "wordpress", "plugins", @@ -137,6 +140,7 @@ "stylelint": "^7.13.0", "stylelint-config-wordpress": "^12.0.0", "stylelint-no-unsupported-browser-features": "^1.0.0", + "validate-node-version": "^1.1.1", "webpack": "^3.3.0", "webpack-config-utils": "^2.3.0", "webpack-stream": "^3.2.0", diff --git a/workflows/gulpfile.babel.js b/workflows/gulpfile.babel.js index 0134cdc..298fc3f 100755 --- a/workflows/gulpfile.babel.js +++ b/workflows/gulpfile.babel.js @@ -1,60 +1,9 @@ -import { env, workflow, tasks, isProd } from './utils/get-config'; -import requireDir from 'require-dir'; import gulp from 'gulp'; -import gutil from 'gulp-util'; +import { preCheck } from './utils/pre-check'; +import { getTasks } from './utils/get-tasks'; -const minNodeVersion = 6.11, - currentNodeVersion = parseFloat( process.version.slice( 1, 5 ) ).toFixed( 2 ); +// Check Node version and workflow setup. +preCheck(); -if ( minNodeVersion > currentNodeVersion ) { - gutil.log( gutil.colors.red( `You need at least Node version 6.11 to run this build. \nPlease update your Node version.` ) ); -} else if ( undefined === workflow ) { - gutil.log( gutil.colors.red( `No workflow provided, aborting!` ) ); -} else { - // Load all Gulp tasks from `tasks` dir. - requireDir( 'tasks' ); - - gutil.log( `Using '${ gutil.colors.yellow( workflow ) }' workflow...` ); - - if ( undefined !== env ) { - gutil.log( `Using '${ gutil.colors.yellow( env ) }' environment...` ); - } - - // To add a new task, simply create a new task file in `tasks` folder. - let tasksList, hasCleanTask = false, hasWatchTask = false, serialTasks = []; - const ignoredTasks = [ - 'js-lint', - isProd ? 'watch' : '' - ]; - tasksList = Object.keys( tasks ).filter( task => { - if ( ignoredTasks.includes( task ) ) { - return false; - } - if ( 'clean' === task ) { - hasCleanTask = true; - return false; - } - if ( 'watch' === task ) { - hasWatchTask = true; - return false; - } - if ( undefined === gulp.task( task ) ) { - gutil.log( `Task '${ gutil.colors.red( task ) }' is not defined, ignoring!` ); - return false; - } - return true; - } ); - - if ( 0 === tasksList.length ) { - gutil.log( `No tasks provided for workflow '${ gutil.colors.yellow( workflow ) }', aborting!` ); - } else if ( ! hasCleanTask && ! hasWatchTask ) { - gulp.task( 'default', gulp.parallel( tasksList ) ); - } else { - serialTasks = [ - hasCleanTask ? 'clean' : '', - gulp.parallel( tasksList ), - hasWatchTask ? 'watch' : '' - ]; - gulp.task( 'default', gulp.series( serialTasks ) ); - } -} \ No newline at end of file +// Define default task. +gulp.task( 'default', gulp.series( getTasks() ) ); diff --git a/workflows/utils/get-tasks.js b/workflows/utils/get-tasks.js new file mode 100644 index 0000000..3d75320 --- /dev/null +++ b/workflows/utils/get-tasks.js @@ -0,0 +1,38 @@ +import gulp from 'gulp'; +import gutil from 'gulp-util'; +import requireDir from 'require-dir'; +import { tasks } from './get-config'; +import { sortTasks } from './sort-tasks'; + +export const getTasks = function() { + let tasksList, gulpTasks; + + // Load all Gulp tasks from `tasks` dir. + requireDir( '../tasks' ); + + // Filter the list to only contain existing Gulp tasks. + tasksList = Object.keys( tasks ).filter( task => { + if ( undefined === gulp.task( task ) ) { + gutil.log( `Task '${ gutil.colors.red( task ) }' is not defined, ignoring!` ); + return false; + } + + return true; + } ); + + // Sort tasks into `before`, `after` and `tasks` lists. + tasksList = sortTasks( tasksList ); + gulpTasks = []; + + if ( 0 < tasksList.before.length ) { + gulpTasks.push( gulp.parallel( tasksList.before ) ); + } + if ( 0 < tasksList.tasks.length ) { + gulpTasks.push( gulp.parallel( tasksList.tasks ) ); + } + if ( 0 < tasksList.after.length ) { + gulpTasks.push( gulp.parallel( tasksList.after ) ); + } + + return gulpTasks; +}; diff --git a/workflows/utils/pre-check.js b/workflows/utils/pre-check.js new file mode 100644 index 0000000..13790c6 --- /dev/null +++ b/workflows/utils/pre-check.js @@ -0,0 +1,24 @@ +import gutil from 'gulp-util'; +import validateNode from 'validate-node-version'; +import { workflow, env } from './get-config'; + +export const preCheck = function() { + const nodeTest = validateNode(), + exitCode = 1; + + if ( ! nodeTest.satisfies ) { + gutil.log( gutil.colors.red( nodeTest.message ) ); + process.exit( exitCode ); + } + + if ( undefined === workflow ) { + gutil.log( gutil.colors.red( `No workflow provided, aborting!` ) ); + process.exit( exitCode ); + } else { + gutil.log( `Using '${ gutil.colors.yellow( workflow ) }' workflow...` ); + } + + if ( undefined !== env ) { + gutil.log( `Using '${ gutil.colors.yellow( env ) }' environment...` ); + } +}; diff --git a/workflows/utils/sort-tasks.js b/workflows/utils/sort-tasks.js new file mode 100644 index 0000000..a42decd --- /dev/null +++ b/workflows/utils/sort-tasks.js @@ -0,0 +1,15 @@ +export const sortTasks = function( allTasks ) { + let tasks = allTasks, before = [], after = []; + + if ( tasks.includes( 'clean' ) ) { + before.push( 'clean' ); + tasks = tasks.filter( task => 'clean' !== task ); + } + + if ( tasks.includes( 'watch' ) ) { + after.push( 'watch' ); + tasks = tasks.filter( task => 'watch' !== task ); + } + + return { before, tasks, after }; +}; diff --git a/workflows/utils/sort-tasks.test.js b/workflows/utils/sort-tasks.test.js new file mode 100755 index 0000000..40d1ca7 --- /dev/null +++ b/workflows/utils/sort-tasks.test.js @@ -0,0 +1,53 @@ +/* eslint-env jest */ + +import { sortTasks } from './sort-tasks'; + +describe( 'sortTasks()', () => { + test( 'returns before and main tasks', () => { + expect( sortTasks( [ 'clean', 'js', 'css' ] ) ).toEqual( { + before: [ 'clean' ], + tasks: [ 'js', 'css' ], + after: [] + } ); + } ); + + test( 'returns before, after and main tasks', () => { + expect( sortTasks( [ 'watch', 'clean', 'js', 'css' ] ) ).toEqual( { + before: [ 'clean' ], + tasks: [ 'js', 'css' ], + after: [ 'watch' ] + } ); + } ); + + test( 'returns after and main tasks', () => { + expect( sortTasks( [ 'watch', 'js', 'css' ] ) ).toEqual( { + before: [], + tasks: [ 'js', 'css' ], + after: [ 'watch' ] + } ); + } ); + + test( 'returns after tasks only', () => { + expect( sortTasks( [ 'watch' ] ) ).toEqual( { + before: [], + tasks: [], + after: [ 'watch' ] + } ); + } ); + + test( 'returns main tasks only', () => { + expect( sortTasks( [ 'css' ] ) ).toEqual( { + before: [], + tasks: [ 'css' ], + after: [] + } ); + } ); + + test( 'returns before tasks only', () => { + expect( sortTasks( [ 'clean' ] ) ).toEqual( { + before: [ 'clean' ], + tasks: [], + after: [] + } ); + } ); +} ); From 7c4b07a234a30484366e0e8b1693de92aeb855f4 Mon Sep 17 00:00:00 2001 From: Justin Kopepasah Date: Tue, 25 Jul 2017 14:48:04 +0900 Subject: [PATCH 52/60] Update quotes for JSON. --- .eslintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc b/.eslintrc index 94ae914..5c9d1ad 100644 --- a/.eslintrc +++ b/.eslintrc @@ -13,7 +13,7 @@ "jQuery": true, "wp": false }, - "extends": 'wordpress', + "extends": "wordpress", "rules": { "accessor-pairs": [2], "block-scoped-var": [2], From f63fc78c929b273790c63bc300595aac1908dc50 Mon Sep 17 00:00:00 2001 From: Justin Kopepasah Date: Tue, 25 Jul 2017 14:48:22 +0900 Subject: [PATCH 53/60] Set rules as null to not enforce. --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index edd50dd..c7232c2 100644 --- a/package.json +++ b/package.json @@ -90,8 +90,8 @@ ], "rules": { "string-quotes": "single", - "color-hex-length": "long", - "function-parentheses-space-inside": "always", + "color-hex-length": null, + "function-parentheses-space-inside": null, "function-url-quotes": "always", "at-rule-empty-line-before": [ "always", From 49de1694fcc5de9c6623257ddab1dae41c4bfd10 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Tue, 25 Jul 2017 08:43:53 +0200 Subject: [PATCH 54/60] Make it possible to ignore tasks from the initial list. --- workflows/utils/get-tasks.js | 2 +- workflows/utils/sort-tasks.js | 13 ++++++++++++- workflows/utils/sort-tasks.test.js | 24 ++++++++++++++++++++++++ 3 files changed, 37 insertions(+), 2 deletions(-) diff --git a/workflows/utils/get-tasks.js b/workflows/utils/get-tasks.js index 3d75320..80b7f41 100644 --- a/workflows/utils/get-tasks.js +++ b/workflows/utils/get-tasks.js @@ -21,7 +21,7 @@ export const getTasks = function() { } ); // Sort tasks into `before`, `after` and `tasks` lists. - tasksList = sortTasks( tasksList ); + tasksList = sortTasks( tasksList, [ 'js-lint' ] ); gulpTasks = []; if ( 0 < tasksList.before.length ) { diff --git a/workflows/utils/sort-tasks.js b/workflows/utils/sort-tasks.js index a42decd..a743356 100644 --- a/workflows/utils/sort-tasks.js +++ b/workflows/utils/sort-tasks.js @@ -1,6 +1,17 @@ -export const sortTasks = function( allTasks ) { +/** + * Split tasks into 3 categories: main tasks, before and after. + * + * @param {Array} allTasks Set of all tasks + * @param {Array} ignoredTasks Tasks to ignore + * @return {{before: Array, tasks: Array, after: Array}} Categorized tasks object + */ +export const sortTasks = function( allTasks, ignoredTasks ) { let tasks = allTasks, before = [], after = []; + if ( undefined !== ignoredTasks ) { + tasks = tasks.filter( task => ! ignoredTasks.includes( task ) ); + } + if ( tasks.includes( 'clean' ) ) { before.push( 'clean' ); tasks = tasks.filter( task => 'clean' !== task ); diff --git a/workflows/utils/sort-tasks.test.js b/workflows/utils/sort-tasks.test.js index 40d1ca7..26023aa 100755 --- a/workflows/utils/sort-tasks.test.js +++ b/workflows/utils/sort-tasks.test.js @@ -50,4 +50,28 @@ describe( 'sortTasks()', () => { after: [] } ); } ); + + test( 'specified tasks are ignored', () => { + expect( sortTasks( [ 'watch', 'clean', 'js', 'css' ], [ 'css' ] ) ).toEqual( { + before: [ 'clean' ], + tasks: [ 'js' ], + after: [ 'watch' ] + } ); + } ); + + test( 'specified tasks are ignored', () => { + expect( sortTasks( [ 'watch', 'clean', 'js', 'css' ], [ 'clean' ] ) ).toEqual( { + before: [], + tasks: [ 'js', 'css' ], + after: [ 'watch' ] + } ); + } ); + + test( 'specified tasks are ignored', () => { + expect( sortTasks( [ 'watch', 'clean', 'js', 'css' ], [ 'watch' ] ) ).toEqual( { + before: [ 'clean' ], + tasks: [ 'js', 'css' ], + after: [] + } ); + } ); } ); From 57b7055fafa3a40cee74f66a48375f3e4d62c47c Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Tue, 25 Jul 2017 09:53:58 +0200 Subject: [PATCH 55/60] Use `dependencies` instead of `devDependencies`. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e9bbd85..83af995 100644 --- a/package.json +++ b/package.json @@ -108,7 +108,7 @@ "value-keyword-case": null } }, - "devDependencies": { + "dependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.25.0", "babel-loader": "^7.1.1", From db047d420b3b7a42891c5ff74197889880fe5c9b Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Tue, 25 Jul 2017 11:21:29 +0200 Subject: [PATCH 56/60] Add transpiled gulpfile. --- package.json | 1 + workflows/gulpfile.js | 910 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 911 insertions(+) create mode 100644 workflows/gulpfile.js diff --git a/package.json b/package.json index a649b87..b0c732b 100644 --- a/package.json +++ b/package.json @@ -124,6 +124,7 @@ }, "dependencies": { "autoprefixer": "^7.1.2", + "babel-cli": "^6.24.1", "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-env": "^1.6.0", diff --git a/workflows/gulpfile.js b/workflows/gulpfile.js new file mode 100644 index 0000000..52f12d1 --- /dev/null +++ b/workflows/gulpfile.js @@ -0,0 +1,910 @@ +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _preCheck = require('./utils/pre-check'); + +var _getTasks = require('./utils/get-tasks'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +// Check Node version and workflow setup. +(0, _preCheck.preCheck)(); + +// Define default task. +_gulp2.default.task('default', _gulp2.default.series((0, _getTasks.getTasks)())); +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _getConfig = require('../utils/get-config'); + +var _del = require('del'); + +var _del2 = _interopRequireDefault(_del); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'clean', + requiredPaths: ['src'], + config: _getConfig.tasks +}); + +_gulp2.default.task(task.name, function (done) { + if (task.isValid()) { + (0, _del2.default)(task.src).then(function () { + return done(); + }); + } +}); +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpIf = require('gulp-if'); + +var _gulpIf2 = _interopRequireDefault(_gulpIf); + +var _gulpCached = require('gulp-cached'); + +var _gulpCached2 = _interopRequireDefault(_gulpCached); + +var _getConfig = require('../utils/get-config'); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'copy', + requiredPaths: ['src', 'dest'], + config: _getConfig.tasks +}); + +_gulp2.default.task(task.name, function () { + if (!task.isValid()) { + return null; + } + + return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName, { optimizeMemory: false }))).pipe(task.end()); +}); +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpCached = require('gulp-cached'); + +var _gulpCached2 = _interopRequireDefault(_gulpCached); + +var _getConfig = require('../utils/get-config'); + +var _gulpIf = require('gulp-if'); + +var _gulpIf2 = _interopRequireDefault(_gulpIf); + +var _gulpPostcss = require('gulp-postcss'); + +var _gulpPostcss2 = _interopRequireDefault(_gulpPostcss); + +var _postcssReporter = require('postcss-reporter'); + +var _postcssReporter2 = _interopRequireDefault(_postcssReporter); + +var _postcssScss = require('postcss-scss'); + +var _postcssScss2 = _interopRequireDefault(_postcssScss); + +var _stylelint = require('stylelint'); + +var _stylelint2 = _interopRequireDefault(_stylelint); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'css-lint', + requiredPaths: ['src'], + config: _getConfig.tasks, + configSlug: 'css' +}); + +if (undefined !== task.config) { + _gulp2.default.task(task.name, function () { + if (!task.isValid()) { + return null; + } + + return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName))).pipe((0, _gulpPostcss2.default)([(0, _stylelint2.default)(), (0, _postcssReporter2.default)({ clearAllMessages: true })], { syntax: _postcssScss2.default })); + }); +} +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpCached = require('gulp-cached'); + +var _gulpCached2 = _interopRequireDefault(_gulpCached); + +var _gulpProgeny = require('gulp-progeny'); + +var _gulpProgeny2 = _interopRequireDefault(_gulpProgeny); + +var _getConfig = require('../utils/get-config'); + +var _gulpSass = require('gulp-sass'); + +var _gulpSass2 = _interopRequireDefault(_gulpSass); + +var _gulpSourcemaps = require('gulp-sourcemaps'); + +var _gulpSourcemaps2 = _interopRequireDefault(_gulpSourcemaps); + +var _gulpIf = require('gulp-if'); + +var _gulpIf2 = _interopRequireDefault(_gulpIf); + +var _gulpPostcss = require('gulp-postcss'); + +var _gulpPostcss2 = _interopRequireDefault(_gulpPostcss); + +var _postcssCssnext = require('postcss-cssnext'); + +var _postcssCssnext2 = _interopRequireDefault(_postcssCssnext); + +var _postcssPxtorem = require('postcss-pxtorem'); + +var _postcssPxtorem2 = _interopRequireDefault(_postcssPxtorem); + +var _autoprefixer = require('autoprefixer'); + +var _autoprefixer2 = _interopRequireDefault(_autoprefixer); + +var _postcssAssets = require('postcss-assets'); + +var _postcssAssets2 = _interopRequireDefault(_postcssAssets); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'css', + requiredPaths: ['src', 'dest'], + config: _getConfig.tasks +}); + +if (undefined !== task.config) { + var fn = function fn() { + if (!task.isValid()) { + return null; + } + + return task.start() + + // Caching and incremental building (progeny) in Gulp. + .pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName))).pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpProgeny2.default)())) + + // Actual SASS compilation. + .pipe((0, _gulpIf2.default)(_getConfig.isDev, _gulpSourcemaps2.default.init())).pipe((0, _gulpSass2.default)({ + includePaths: undefined !== task.config.includePaths ? task.config.includePaths : [], + outputStyle: _getConfig.isDev ? 'expanded' : 'compressed' + }).on('error', _gulpSass2.default.logError)).pipe((0, _gulpPostcss2.default)(getProcessors(task.config.postcssProcessors))).pipe((0, _gulpIf2.default)(_getConfig.isDev, _gulpSourcemaps2.default.write(''))).pipe(task.end()); + }; + + fn.displayName = 'css-compile'; + + if (undefined !== task.config.enableLinter && true === task.config.enableLinter) { + _gulp2.default.task('css', _gulp2.default.series('css-lint', fn)); + } else { + _gulp2.default.task('css', fn); + } +} + +function getProcessors(settings) { + var processors = [], + defaults = void 0, + s = void 0; + + defaults = { + cssnext: { + warnForDuplicates: false + }, + autoprefixer: {}, + pxtorem: { + rootValue: 16, + unitPrecision: 5, + propList: ['*'], + selectorBlackList: [], + replace: true, + mediaQuery: true, + minPixelValue: 2 + }, + assets: { + relative: true + } + }; + + if (false !== settings.cssnext) { + s = true === settings.cssnext ? {} : settings.cssnext; + processors.push((0, _postcssCssnext2.default)(Object.assign(defaults.cssnext, s))); + } + + if (false !== settings.autoprefixer) { + s = true === settings.autoprefixer ? {} : settings.autoprefixer; + processors.push((0, _autoprefixer2.default)(Object.assign(defaults.autoprefixer, s))); + } + + if (false !== settings.pxtorem) { + s = true === settings.pxtorem ? {} : settings.pxtorem; + processors.push((0, _postcssPxtorem2.default)(Object.assign(defaults.pxtorem, s))); + } + + if (false !== settings.assets) { + s = true === settings.assets ? {} : settings.assets; + processors.push((0, _postcssAssets2.default)(Object.assign(defaults.assets, s))); + } + + return processors; +} +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpIf = require('gulp-if'); + +var _gulpIf2 = _interopRequireDefault(_gulpIf); + +var _gulpCached = require('gulp-cached'); + +var _gulpCached2 = _interopRequireDefault(_gulpCached); + +var _gulpImagemin = require('gulp-imagemin'); + +var _gulpImagemin2 = _interopRequireDefault(_gulpImagemin); + +var _getConfig = require('../utils/get-config'); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'images', + requiredPaths: ['src', 'dest'], + config: _getConfig.tasks +}); + +_gulp2.default.task(task.name, function () { + if (!task.isValid()) { + return null; + } + + return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName, { optimizeMemory: false }))).pipe((0, _gulpImagemin2.default)()).pipe(task.end()); +}); +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpCached = require('gulp-cached'); + +var _gulpCached2 = _interopRequireDefault(_gulpCached); + +var _getConfig = require('../utils/get-config'); + +var _gulpEslint = require('gulp-eslint'); + +var _gulpEslint2 = _interopRequireDefault(_gulpEslint); + +var _gulpIf = require('gulp-if'); + +var _gulpIf2 = _interopRequireDefault(_gulpIf); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'js-lint', + requiredPaths: ['src'], + config: _getConfig.tasks +}); + +if (undefined !== task.config) { + _gulp2.default.task(task.name, function () { + if (!task.isValid()) { + return null; + } + + return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName))).pipe((0, _gulpEslint2.default)()).pipe((0, _gulpIf2.default)(_getConfig.isProd, _gulpEslint2.default.format())).pipe((0, _gulpIf2.default)(_getConfig.isProd, _gulpEslint2.default.failAfterError())); + }); +} +'use strict'; + +var _getConfig = require('../utils/get-config'); + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _path = require('path'); + +var _webpack = require('webpack'); + +var _webpack2 = _interopRequireDefault(_webpack); + +var _webpackStream = require('webpack-stream'); + +var _webpackStream2 = _interopRequireDefault(_webpackStream); + +var _progressBarWebpackPlugin = require('progress-bar-webpack-plugin'); + +var _progressBarWebpackPlugin2 = _interopRequireDefault(_progressBarWebpackPlugin); + +var _webpackConfigUtils = require('webpack-config-utils'); + +var _gulpPlumber = require('gulp-plumber'); + +var _gulpPlumber2 = _interopRequireDefault(_gulpPlumber); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +if (undefined !== _getConfig.tasks.js) { + var fn = function fn() { + var babelifyOptions = void 0, + webpackConfig = void 0, + esLintOptions = {}; + var paths = _getConfig.tasks.js; + + babelifyOptions = { + presets: [['env', { + targets: { + browsers: _getConfig.browserslist + } + }]] + }; + + // Avoid linting for the test environment + if (_getConfig.isDev || _getConfig.isProd) { + esLintOptions = { + test: /\.js$/, + loader: 'eslint-loader', + exclude: /(node_modules)/ + }; + } + + webpackConfig = { + context: (0, _path.resolve)(_getConfig.cwd, paths.base), + entry: paths.entry, + output: { + filename: '[name].js', + pathinfo: _getConfig.isDev + }, + devtool: _getConfig.isProd ? 'source-map' : 'eval', + module: { + rules: [esLintOptions], + loaders: [{ + test: /\.js$/, + loader: 'babel-loader', + options: babelifyOptions, + exclude: /node_modules/ + }] + }, + plugins: (0, _webpackConfigUtils.removeEmpty)([new _progressBarWebpackPlugin2.default(), _getConfig.isProd ? new _webpack2.default.optimize.UglifyJsPlugin() : undefined]), + watch: true, + cache: true + }; + + return _gulp2.default.src((0, _path.resolve)(_getConfig.cwd, paths.base)).pipe((0, _gulpPlumber2.default)()).pipe((0, _webpackStream2.default)(webpackConfig, _webpack2.default)).pipe(_gulpPlumber2.default.stop()).pipe(_gulp2.default.dest((0, _path.resolve)(_getConfig.cwd, paths.dest))); + }; + + fn.displayName = 'js-compile'; + + if (undefined !== _getConfig.tasks['js-lint']) { + _gulp2.default.task('js', _gulp2.default.series('js-lint', fn)); + } else { + _gulp2.default.task('js', fn); + } +} +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _getConfig = require('../utils/get-config'); + +var _gulpWatch = require('gulp-watch'); + +var _gulpWatch2 = _interopRequireDefault(_gulpWatch); + +var _path = require('path'); + +var _without2 = require('lodash/without'); + +var _without3 = _interopRequireDefault(_without2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +if (undefined !== _getConfig.tasks.watch && undefined !== _getConfig.tasks.watch.tasks) { + _gulp2.default.task('watch', function () { + + // Omit some tasks, e.g. `js` is already watched by Webpack. + var filteredTasks = (0, _without3.default)(_getConfig.tasks.watch.tasks, 'js', 'js-lint', 'clean'); + + filteredTasks.forEach(function (taskSlug) { + var task = _getConfig.tasks[taskSlug]; + + if (undefined === task.src) { + return; + } + + (0, _gulpWatch2.default)((0, _path.join)(_getConfig.cwd, task.src), function () { + return _gulp2.default.start(taskSlug); + }); + }); + }); +} +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpUtil = require('gulp-util'); + +var _gulpUtil2 = _interopRequireDefault(_gulpUtil); + +var _path = require('path'); + +var _getConfig = require('./get-config'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +var TaskHelper = function () { + function TaskHelper(_ref) { + var _ref$name = _ref.name, + name = _ref$name === undefined ? '' : _ref$name, + _ref$requiredPaths = _ref.requiredPaths, + requiredPaths = _ref$requiredPaths === undefined ? [] : _ref$requiredPaths, + _ref$config = _ref.config, + config = _ref$config === undefined ? null : _ref$config, + _ref$configSlug = _ref.configSlug, + configSlug = _ref$configSlug === undefined ? '' : _ref$configSlug; + + _classCallCheck(this, TaskHelper); + + if (null === config) { + _gulpUtil2.default.log(_gulpUtil2.default.colors.red('The task template is missing a configuration.')); + return; + } + + this._name = name; + this._requiredPaths = requiredPaths; + this._config = config; + this._configSlug = '' === configSlug ? name : configSlug; + } + + _createClass(TaskHelper, [{ + key: 'isValid', + value: function isValid() { + if (!this.hasPathsDefined) { + _gulpUtil2.default.log('Missing paths in \'' + _gulpUtil2.default.colors.red(this.name) + '\' task, aborting!'); + return false; + } + return true; + } + }, { + key: 'start', + value: function start() { + return _gulp2.default.src(this.src, { base: this.base }); + } + }, { + key: 'end', + value: function end() { + return _gulp2.default.dest(this.dest, { cwd: _getConfig.cwd }); + } + }, { + key: 'config', + get: function get() { + return '' === this.configSlug ? this._config : this._config[this.configSlug]; + } + }, { + key: 'name', + get: function get() { + return this._name; + } + }, { + key: 'configSlug', + get: function get() { + return this._configSlug; + } + }, { + key: 'requiredPaths', + get: function get() { + return this._requiredPaths; + } + }, { + key: 'hasPathsDefined', + get: function get() { + var _this = this; + + return this.requiredPaths.every(function (path) { + return undefined !== _this.config[path]; + }); + } + }, { + key: 'src', + get: function get() { + var srcList = Array.isArray(this.config.src) ? this.config.src : [this.config.src], + src = srcList.map(function (path) { + return (0, _path.join)(_getConfig.cwd, path); + }); + + return src; + } + }, { + key: 'entries', + get: function get() { + var entriesList = Array.isArray(this.config.entries) ? this.config.entries : [this.config.entries], + entries = entriesList.map(function (path) { + return (0, _path.join)(_getConfig.cwd, path); + }); + + return entries; + } + }, { + key: 'base', + get: function get() { + return undefined === this.config.base ? '' : (0, _path.join)(_getConfig.cwd, this.config.base); + } + }, { + key: 'dest', + get: function get() { + return this.config.dest; + } + }, { + key: 'cacheName', + get: function get() { + return this.name + '-task-cache'; + } + }]); + + return TaskHelper; +}(); + +exports.default = TaskHelper; +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.browserslist = exports.workflow = exports.isProd = exports.isTest = exports.isDev = exports.cwd = exports.env = exports.tasks = exports.json = undefined; + +var _fs = require('fs'); + +var _fs2 = _interopRequireDefault(_fs); + +var _yargs = require('yargs'); + +var _yargs2 = _interopRequireDefault(_yargs); + +var _path = require('path'); + +var _gulpUtil = require('gulp-util'); + +var _gulpUtil2 = _interopRequireDefault(_gulpUtil); + +var _defaultsDeep2 = require('lodash/defaultsDeep'); + +var _defaultsDeep3 = _interopRequireDefault(_defaultsDeep2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var json = JSON.parse(_fs2.default.readFileSync('./package.json')), + env = _yargs2.default.argv.env, + workflow = _yargs2.default.argv.workflow, + browserslist = json.browserslist; + +var tasks = [], + cwd = '', + schema = '', + isTest = false, + isProd = false, + isDev = false; + +switch (env) { + case 'test': + exports.isTest = isTest = true; + break; + case 'prod': + case 'production': + exports.isProd = isProd = true; + break; + default: + exports.isDev = isDev = true; +} + +if (undefined !== workflow && undefined !== json.workflows[workflow]) { + exports.tasks = tasks = json.workflows[workflow]; +} +if (undefined !== tasks.cwd) { + exports.cwd = cwd = tasks.cwd; + delete tasks.cwd; +} + +function getSchema(slug) { + var file = (0, _path.resolve)(__dirname, '../schemas/' + slug + '.json'); + + if (!_fs2.default.existsSync(file)) { + _gulpUtil2.default.log(_gulpUtil2.default.colors.yellow('Schema \'' + slug + '\' not found, ignoring...')); + return {}; + } + + return JSON.parse(_fs2.default.readFileSync(file)); +} +if (undefined !== tasks.schema) { + schema = getSchema(tasks.schema); + delete tasks.schema; + exports.tasks = tasks = (0, _defaultsDeep3.default)(tasks, schema); +} + +exports.json = json; +exports.tasks = tasks; +exports.env = env; +exports.cwd = cwd; +exports.isDev = isDev; +exports.isTest = isTest; +exports.isProd = isProd; +exports.workflow = workflow; +exports.browserslist = browserslist; +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.getTasks = undefined; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpUtil = require('gulp-util'); + +var _gulpUtil2 = _interopRequireDefault(_gulpUtil); + +var _requireDir = require('require-dir'); + +var _requireDir2 = _interopRequireDefault(_requireDir); + +var _getConfig = require('./get-config'); + +var _sortTasks = require('./sort-tasks'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var getTasks = exports.getTasks = function getTasks() { + var tasksList = void 0, + gulpTasks = void 0; + + // Load all Gulp tasks from `tasks` dir. + (0, _requireDir2.default)('../tasks'); + + // Filter the list to only contain existing Gulp tasks. + tasksList = Object.keys(_getConfig.tasks).filter(function (task) { + if (undefined === _gulp2.default.task(task)) { + _gulpUtil2.default.log('Task \'' + _gulpUtil2.default.colors.red(task) + '\' is not defined, ignoring!'); + return false; + } + + return true; + }); + + // Sort tasks into `before`, `after` and `tasks` lists. + tasksList = (0, _sortTasks.sortTasks)(tasksList, ['js-lint']); + gulpTasks = []; + + if (0 < tasksList.before.length) { + gulpTasks.push(_gulp2.default.parallel(tasksList.before)); + } + if (0 < tasksList.tasks.length) { + gulpTasks.push(_gulp2.default.parallel(tasksList.tasks)); + } + if (0 < tasksList.after.length) { + gulpTasks.push(_gulp2.default.parallel(tasksList.after)); + } + + return gulpTasks; +}; +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.preCheck = undefined; + +var _gulpUtil = require('gulp-util'); + +var _gulpUtil2 = _interopRequireDefault(_gulpUtil); + +var _validateNodeVersion = require('validate-node-version'); + +var _validateNodeVersion2 = _interopRequireDefault(_validateNodeVersion); + +var _getConfig = require('./get-config'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var preCheck = exports.preCheck = function preCheck() { + var nodeTest = (0, _validateNodeVersion2.default)(), + exitCode = 1; + + if (!nodeTest.satisfies) { + _gulpUtil2.default.log(_gulpUtil2.default.colors.red(nodeTest.message)); + process.exit(exitCode); + } + + if (undefined === _getConfig.workflow) { + _gulpUtil2.default.log(_gulpUtil2.default.colors.red('No workflow provided, aborting!')); + process.exit(exitCode); + } else { + _gulpUtil2.default.log('Using \'' + _gulpUtil2.default.colors.yellow(_getConfig.workflow) + '\' workflow...'); + } + + if (undefined !== _getConfig.env) { + _gulpUtil2.default.log('Using \'' + _gulpUtil2.default.colors.yellow(_getConfig.env) + '\' environment...'); + } +}; +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +/** + * Split tasks into 3 categories: main tasks, before and after. + * + * @param {Array} allTasks Set of all tasks + * @param {Array} ignoredTasks Tasks to ignore + * @return {{before: Array, tasks: Array, after: Array}} Categorized tasks object + */ +var sortTasks = exports.sortTasks = function sortTasks(allTasks, ignoredTasks) { + var tasks = allTasks, + before = [], + after = []; + + if (undefined !== ignoredTasks) { + tasks = tasks.filter(function (task) { + return !ignoredTasks.includes(task); + }); + } + + if (tasks.includes('clean')) { + before.push('clean'); + tasks = tasks.filter(function (task) { + return 'clean' !== task; + }); + } + + if (tasks.includes('watch')) { + after.push('watch'); + tasks = tasks.filter(function (task) { + return 'watch' !== task; + }); + } + + return { before: before, tasks: tasks, after: after }; +}; +'use strict'; + +var _sortTasks = require('./sort-tasks'); + +describe('sortTasks()', function () { + test('returns before and main tasks', function () { + expect((0, _sortTasks.sortTasks)(['clean', 'js', 'css'])).toEqual({ + before: ['clean'], + tasks: ['js', 'css'], + after: [] + }); + }); + + test('returns before, after and main tasks', function () { + expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'])).toEqual({ + before: ['clean'], + tasks: ['js', 'css'], + after: ['watch'] + }); + }); + + test('returns after and main tasks', function () { + expect((0, _sortTasks.sortTasks)(['watch', 'js', 'css'])).toEqual({ + before: [], + tasks: ['js', 'css'], + after: ['watch'] + }); + }); + + test('returns after tasks only', function () { + expect((0, _sortTasks.sortTasks)(['watch'])).toEqual({ + before: [], + tasks: [], + after: ['watch'] + }); + }); + + test('returns main tasks only', function () { + expect((0, _sortTasks.sortTasks)(['css'])).toEqual({ + before: [], + tasks: ['css'], + after: [] + }); + }); + + test('returns before tasks only', function () { + expect((0, _sortTasks.sortTasks)(['clean'])).toEqual({ + before: ['clean'], + tasks: [], + after: [] + }); + }); + + test('specified tasks are ignored', function () { + expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'], ['css'])).toEqual({ + before: ['clean'], + tasks: ['js'], + after: ['watch'] + }); + }); + + test('specified tasks are ignored', function () { + expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'], ['clean'])).toEqual({ + before: [], + tasks: ['js', 'css'], + after: ['watch'] + }); + }); + + test('specified tasks are ignored', function () { + expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'], ['watch'])).toEqual({ + before: ['clean'], + tasks: ['js', 'css'], + after: [] + }); + }); +}); /* eslint-env jest */ From 5187884d11240544b74e51bc8cd79d5071a78263 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Tue, 25 Jul 2017 11:25:57 +0200 Subject: [PATCH 57/60] Transpile whole directory, not single file. --- workflows/dist/gulpfile.babel.js | 17 + workflows/dist/tasks/clean.js | 31 + workflows/dist/tasks/copy.js | 35 + workflows/dist/tasks/css-lint.js | 54 ++ workflows/dist/tasks/css.js | 133 ++++ workflows/dist/tasks/images.js | 39 + workflows/dist/tasks/js-lint.js | 41 ++ workflows/dist/tasks/js.js | 87 +++ workflows/dist/tasks/watch.js | 39 + workflows/dist/utils/TaskHelper.js | 137 ++++ workflows/dist/utils/get-config.js | 84 +++ workflows/dist/utils/get-tasks.js | 58 ++ workflows/dist/utils/pre-check.js | 39 + workflows/dist/utils/sort-tasks.js | 39 + workflows/dist/utils/sort-tasks.test.js | 77 ++ workflows/gulpfile.js | 910 ------------------------ 16 files changed, 910 insertions(+), 910 deletions(-) create mode 100755 workflows/dist/gulpfile.babel.js create mode 100644 workflows/dist/tasks/clean.js create mode 100755 workflows/dist/tasks/copy.js create mode 100644 workflows/dist/tasks/css-lint.js create mode 100644 workflows/dist/tasks/css.js create mode 100755 workflows/dist/tasks/images.js create mode 100644 workflows/dist/tasks/js-lint.js create mode 100755 workflows/dist/tasks/js.js create mode 100644 workflows/dist/tasks/watch.js create mode 100644 workflows/dist/utils/TaskHelper.js create mode 100644 workflows/dist/utils/get-config.js create mode 100644 workflows/dist/utils/get-tasks.js create mode 100644 workflows/dist/utils/pre-check.js create mode 100644 workflows/dist/utils/sort-tasks.js create mode 100755 workflows/dist/utils/sort-tasks.test.js delete mode 100644 workflows/gulpfile.js diff --git a/workflows/dist/gulpfile.babel.js b/workflows/dist/gulpfile.babel.js new file mode 100755 index 0000000..5fc5757 --- /dev/null +++ b/workflows/dist/gulpfile.babel.js @@ -0,0 +1,17 @@ +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _preCheck = require('./utils/pre-check'); + +var _getTasks = require('./utils/get-tasks'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +// Check Node version and workflow setup. +(0, _preCheck.preCheck)(); + +// Define default task. +_gulp2.default.task('default', _gulp2.default.series((0, _getTasks.getTasks)())); \ No newline at end of file diff --git a/workflows/dist/tasks/clean.js b/workflows/dist/tasks/clean.js new file mode 100644 index 0000000..29d75e6 --- /dev/null +++ b/workflows/dist/tasks/clean.js @@ -0,0 +1,31 @@ +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _getConfig = require('../utils/get-config'); + +var _del = require('del'); + +var _del2 = _interopRequireDefault(_del); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'clean', + requiredPaths: ['src'], + config: _getConfig.tasks +}); + +_gulp2.default.task(task.name, function (done) { + if (task.isValid()) { + (0, _del2.default)(task.src).then(function () { + return done(); + }); + } +}); \ No newline at end of file diff --git a/workflows/dist/tasks/copy.js b/workflows/dist/tasks/copy.js new file mode 100755 index 0000000..c0552df --- /dev/null +++ b/workflows/dist/tasks/copy.js @@ -0,0 +1,35 @@ +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpIf = require('gulp-if'); + +var _gulpIf2 = _interopRequireDefault(_gulpIf); + +var _gulpCached = require('gulp-cached'); + +var _gulpCached2 = _interopRequireDefault(_gulpCached); + +var _getConfig = require('../utils/get-config'); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'copy', + requiredPaths: ['src', 'dest'], + config: _getConfig.tasks +}); + +_gulp2.default.task(task.name, function () { + if (!task.isValid()) { + return null; + } + + return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName, { optimizeMemory: false }))).pipe(task.end()); +}); \ No newline at end of file diff --git a/workflows/dist/tasks/css-lint.js b/workflows/dist/tasks/css-lint.js new file mode 100644 index 0000000..25823d7 --- /dev/null +++ b/workflows/dist/tasks/css-lint.js @@ -0,0 +1,54 @@ +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpCached = require('gulp-cached'); + +var _gulpCached2 = _interopRequireDefault(_gulpCached); + +var _getConfig = require('../utils/get-config'); + +var _gulpIf = require('gulp-if'); + +var _gulpIf2 = _interopRequireDefault(_gulpIf); + +var _gulpPostcss = require('gulp-postcss'); + +var _gulpPostcss2 = _interopRequireDefault(_gulpPostcss); + +var _postcssReporter = require('postcss-reporter'); + +var _postcssReporter2 = _interopRequireDefault(_postcssReporter); + +var _postcssScss = require('postcss-scss'); + +var _postcssScss2 = _interopRequireDefault(_postcssScss); + +var _stylelint = require('stylelint'); + +var _stylelint2 = _interopRequireDefault(_stylelint); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'css-lint', + requiredPaths: ['src'], + config: _getConfig.tasks, + configSlug: 'css' +}); + +if (undefined !== task.config) { + _gulp2.default.task(task.name, function () { + if (!task.isValid()) { + return null; + } + + return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName))).pipe((0, _gulpPostcss2.default)([(0, _stylelint2.default)(), (0, _postcssReporter2.default)({ clearAllMessages: true })], { syntax: _postcssScss2.default })); + }); +} \ No newline at end of file diff --git a/workflows/dist/tasks/css.js b/workflows/dist/tasks/css.js new file mode 100644 index 0000000..47e84ba --- /dev/null +++ b/workflows/dist/tasks/css.js @@ -0,0 +1,133 @@ +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpCached = require('gulp-cached'); + +var _gulpCached2 = _interopRequireDefault(_gulpCached); + +var _gulpProgeny = require('gulp-progeny'); + +var _gulpProgeny2 = _interopRequireDefault(_gulpProgeny); + +var _getConfig = require('../utils/get-config'); + +var _gulpSass = require('gulp-sass'); + +var _gulpSass2 = _interopRequireDefault(_gulpSass); + +var _gulpSourcemaps = require('gulp-sourcemaps'); + +var _gulpSourcemaps2 = _interopRequireDefault(_gulpSourcemaps); + +var _gulpIf = require('gulp-if'); + +var _gulpIf2 = _interopRequireDefault(_gulpIf); + +var _gulpPostcss = require('gulp-postcss'); + +var _gulpPostcss2 = _interopRequireDefault(_gulpPostcss); + +var _postcssCssnext = require('postcss-cssnext'); + +var _postcssCssnext2 = _interopRequireDefault(_postcssCssnext); + +var _postcssPxtorem = require('postcss-pxtorem'); + +var _postcssPxtorem2 = _interopRequireDefault(_postcssPxtorem); + +var _autoprefixer = require('autoprefixer'); + +var _autoprefixer2 = _interopRequireDefault(_autoprefixer); + +var _postcssAssets = require('postcss-assets'); + +var _postcssAssets2 = _interopRequireDefault(_postcssAssets); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'css', + requiredPaths: ['src', 'dest'], + config: _getConfig.tasks +}); + +if (undefined !== task.config) { + var fn = function fn() { + if (!task.isValid()) { + return null; + } + + return task.start() + + // Caching and incremental building (progeny) in Gulp. + .pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName))).pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpProgeny2.default)())) + + // Actual SASS compilation. + .pipe((0, _gulpIf2.default)(_getConfig.isDev, _gulpSourcemaps2.default.init())).pipe((0, _gulpSass2.default)({ + includePaths: undefined !== task.config.includePaths ? task.config.includePaths : [], + outputStyle: _getConfig.isDev ? 'expanded' : 'compressed' + }).on('error', _gulpSass2.default.logError)).pipe((0, _gulpPostcss2.default)(getProcessors(task.config.postcssProcessors))).pipe((0, _gulpIf2.default)(_getConfig.isDev, _gulpSourcemaps2.default.write(''))).pipe(task.end()); + }; + + fn.displayName = 'css-compile'; + + if (undefined !== task.config.enableLinter && true === task.config.enableLinter) { + _gulp2.default.task('css', _gulp2.default.series('css-lint', fn)); + } else { + _gulp2.default.task('css', fn); + } +} + +function getProcessors(settings) { + var processors = [], + defaults = void 0, + s = void 0; + + defaults = { + cssnext: { + warnForDuplicates: false + }, + autoprefixer: {}, + pxtorem: { + rootValue: 16, + unitPrecision: 5, + propList: ['*'], + selectorBlackList: [], + replace: true, + mediaQuery: true, + minPixelValue: 2 + }, + assets: { + relative: true + } + }; + + if (false !== settings.cssnext) { + s = true === settings.cssnext ? {} : settings.cssnext; + processors.push((0, _postcssCssnext2.default)(Object.assign(defaults.cssnext, s))); + } + + if (false !== settings.autoprefixer) { + s = true === settings.autoprefixer ? {} : settings.autoprefixer; + processors.push((0, _autoprefixer2.default)(Object.assign(defaults.autoprefixer, s))); + } + + if (false !== settings.pxtorem) { + s = true === settings.pxtorem ? {} : settings.pxtorem; + processors.push((0, _postcssPxtorem2.default)(Object.assign(defaults.pxtorem, s))); + } + + if (false !== settings.assets) { + s = true === settings.assets ? {} : settings.assets; + processors.push((0, _postcssAssets2.default)(Object.assign(defaults.assets, s))); + } + + return processors; +} \ No newline at end of file diff --git a/workflows/dist/tasks/images.js b/workflows/dist/tasks/images.js new file mode 100755 index 0000000..651d809 --- /dev/null +++ b/workflows/dist/tasks/images.js @@ -0,0 +1,39 @@ +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpIf = require('gulp-if'); + +var _gulpIf2 = _interopRequireDefault(_gulpIf); + +var _gulpCached = require('gulp-cached'); + +var _gulpCached2 = _interopRequireDefault(_gulpCached); + +var _gulpImagemin = require('gulp-imagemin'); + +var _gulpImagemin2 = _interopRequireDefault(_gulpImagemin); + +var _getConfig = require('../utils/get-config'); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'images', + requiredPaths: ['src', 'dest'], + config: _getConfig.tasks +}); + +_gulp2.default.task(task.name, function () { + if (!task.isValid()) { + return null; + } + + return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName, { optimizeMemory: false }))).pipe((0, _gulpImagemin2.default)()).pipe(task.end()); +}); \ No newline at end of file diff --git a/workflows/dist/tasks/js-lint.js b/workflows/dist/tasks/js-lint.js new file mode 100644 index 0000000..f2b8972 --- /dev/null +++ b/workflows/dist/tasks/js-lint.js @@ -0,0 +1,41 @@ +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpCached = require('gulp-cached'); + +var _gulpCached2 = _interopRequireDefault(_gulpCached); + +var _getConfig = require('../utils/get-config'); + +var _gulpEslint = require('gulp-eslint'); + +var _gulpEslint2 = _interopRequireDefault(_gulpEslint); + +var _gulpIf = require('gulp-if'); + +var _gulpIf2 = _interopRequireDefault(_gulpIf); + +var _TaskHelper = require('../utils/TaskHelper'); + +var _TaskHelper2 = _interopRequireDefault(_TaskHelper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var task = new _TaskHelper2.default({ + name: 'js-lint', + requiredPaths: ['src'], + config: _getConfig.tasks +}); + +if (undefined !== task.config) { + _gulp2.default.task(task.name, function () { + if (!task.isValid()) { + return null; + } + + return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName))).pipe((0, _gulpEslint2.default)()).pipe((0, _gulpIf2.default)(_getConfig.isProd, _gulpEslint2.default.format())).pipe((0, _gulpIf2.default)(_getConfig.isProd, _gulpEslint2.default.failAfterError())); + }); +} \ No newline at end of file diff --git a/workflows/dist/tasks/js.js b/workflows/dist/tasks/js.js new file mode 100755 index 0000000..ec4d842 --- /dev/null +++ b/workflows/dist/tasks/js.js @@ -0,0 +1,87 @@ +'use strict'; + +var _getConfig = require('../utils/get-config'); + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _path = require('path'); + +var _webpack = require('webpack'); + +var _webpack2 = _interopRequireDefault(_webpack); + +var _webpackStream = require('webpack-stream'); + +var _webpackStream2 = _interopRequireDefault(_webpackStream); + +var _progressBarWebpackPlugin = require('progress-bar-webpack-plugin'); + +var _progressBarWebpackPlugin2 = _interopRequireDefault(_progressBarWebpackPlugin); + +var _webpackConfigUtils = require('webpack-config-utils'); + +var _gulpPlumber = require('gulp-plumber'); + +var _gulpPlumber2 = _interopRequireDefault(_gulpPlumber); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +if (undefined !== _getConfig.tasks.js) { + var fn = function fn() { + var babelifyOptions = void 0, + webpackConfig = void 0, + esLintOptions = {}; + var paths = _getConfig.tasks.js; + + babelifyOptions = { + presets: [['env', { + targets: { + browsers: _getConfig.browserslist + } + }]] + }; + + // Avoid linting for the test environment + if (_getConfig.isDev || _getConfig.isProd) { + esLintOptions = { + test: /\.js$/, + loader: 'eslint-loader', + exclude: /(node_modules)/ + }; + } + + webpackConfig = { + context: (0, _path.resolve)(_getConfig.cwd, paths.base), + entry: paths.entry, + output: { + filename: '[name].js', + pathinfo: _getConfig.isDev + }, + devtool: _getConfig.isProd ? 'source-map' : 'eval', + module: { + rules: [esLintOptions], + loaders: [{ + test: /\.js$/, + loader: 'babel-loader', + options: babelifyOptions, + exclude: /node_modules/ + }] + }, + plugins: (0, _webpackConfigUtils.removeEmpty)([new _progressBarWebpackPlugin2.default(), _getConfig.isProd ? new _webpack2.default.optimize.UglifyJsPlugin() : undefined]), + watch: true, + cache: true + }; + + return _gulp2.default.src((0, _path.resolve)(_getConfig.cwd, paths.base)).pipe((0, _gulpPlumber2.default)()).pipe((0, _webpackStream2.default)(webpackConfig, _webpack2.default)).pipe(_gulpPlumber2.default.stop()).pipe(_gulp2.default.dest((0, _path.resolve)(_getConfig.cwd, paths.dest))); + }; + + fn.displayName = 'js-compile'; + + if (undefined !== _getConfig.tasks['js-lint']) { + _gulp2.default.task('js', _gulp2.default.series('js-lint', fn)); + } else { + _gulp2.default.task('js', fn); + } +} \ No newline at end of file diff --git a/workflows/dist/tasks/watch.js b/workflows/dist/tasks/watch.js new file mode 100644 index 0000000..0c25a20 --- /dev/null +++ b/workflows/dist/tasks/watch.js @@ -0,0 +1,39 @@ +'use strict'; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _getConfig = require('../utils/get-config'); + +var _gulpWatch = require('gulp-watch'); + +var _gulpWatch2 = _interopRequireDefault(_gulpWatch); + +var _path = require('path'); + +var _without2 = require('lodash/without'); + +var _without3 = _interopRequireDefault(_without2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +if (undefined !== _getConfig.tasks.watch && undefined !== _getConfig.tasks.watch.tasks) { + _gulp2.default.task('watch', function () { + + // Omit some tasks, e.g. `js` is already watched by Webpack. + var filteredTasks = (0, _without3.default)(_getConfig.tasks.watch.tasks, 'js', 'js-lint', 'clean'); + + filteredTasks.forEach(function (taskSlug) { + var task = _getConfig.tasks[taskSlug]; + + if (undefined === task.src) { + return; + } + + (0, _gulpWatch2.default)((0, _path.join)(_getConfig.cwd, task.src), function () { + return _gulp2.default.start(taskSlug); + }); + }); + }); +} \ No newline at end of file diff --git a/workflows/dist/utils/TaskHelper.js b/workflows/dist/utils/TaskHelper.js new file mode 100644 index 0000000..0dda51e --- /dev/null +++ b/workflows/dist/utils/TaskHelper.js @@ -0,0 +1,137 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpUtil = require('gulp-util'); + +var _gulpUtil2 = _interopRequireDefault(_gulpUtil); + +var _path = require('path'); + +var _getConfig = require('./get-config'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +var TaskHelper = function () { + function TaskHelper(_ref) { + var _ref$name = _ref.name, + name = _ref$name === undefined ? '' : _ref$name, + _ref$requiredPaths = _ref.requiredPaths, + requiredPaths = _ref$requiredPaths === undefined ? [] : _ref$requiredPaths, + _ref$config = _ref.config, + config = _ref$config === undefined ? null : _ref$config, + _ref$configSlug = _ref.configSlug, + configSlug = _ref$configSlug === undefined ? '' : _ref$configSlug; + + _classCallCheck(this, TaskHelper); + + if (null === config) { + _gulpUtil2.default.log(_gulpUtil2.default.colors.red('The task template is missing a configuration.')); + return; + } + + this._name = name; + this._requiredPaths = requiredPaths; + this._config = config; + this._configSlug = '' === configSlug ? name : configSlug; + } + + _createClass(TaskHelper, [{ + key: 'isValid', + value: function isValid() { + if (!this.hasPathsDefined) { + _gulpUtil2.default.log('Missing paths in \'' + _gulpUtil2.default.colors.red(this.name) + '\' task, aborting!'); + return false; + } + return true; + } + }, { + key: 'start', + value: function start() { + return _gulp2.default.src(this.src, { base: this.base }); + } + }, { + key: 'end', + value: function end() { + return _gulp2.default.dest(this.dest, { cwd: _getConfig.cwd }); + } + }, { + key: 'config', + get: function get() { + return '' === this.configSlug ? this._config : this._config[this.configSlug]; + } + }, { + key: 'name', + get: function get() { + return this._name; + } + }, { + key: 'configSlug', + get: function get() { + return this._configSlug; + } + }, { + key: 'requiredPaths', + get: function get() { + return this._requiredPaths; + } + }, { + key: 'hasPathsDefined', + get: function get() { + var _this = this; + + return this.requiredPaths.every(function (path) { + return undefined !== _this.config[path]; + }); + } + }, { + key: 'src', + get: function get() { + var srcList = Array.isArray(this.config.src) ? this.config.src : [this.config.src], + src = srcList.map(function (path) { + return (0, _path.join)(_getConfig.cwd, path); + }); + + return src; + } + }, { + key: 'entries', + get: function get() { + var entriesList = Array.isArray(this.config.entries) ? this.config.entries : [this.config.entries], + entries = entriesList.map(function (path) { + return (0, _path.join)(_getConfig.cwd, path); + }); + + return entries; + } + }, { + key: 'base', + get: function get() { + return undefined === this.config.base ? '' : (0, _path.join)(_getConfig.cwd, this.config.base); + } + }, { + key: 'dest', + get: function get() { + return this.config.dest; + } + }, { + key: 'cacheName', + get: function get() { + return this.name + '-task-cache'; + } + }]); + + return TaskHelper; +}(); + +exports.default = TaskHelper; \ No newline at end of file diff --git a/workflows/dist/utils/get-config.js b/workflows/dist/utils/get-config.js new file mode 100644 index 0000000..aa52c81 --- /dev/null +++ b/workflows/dist/utils/get-config.js @@ -0,0 +1,84 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.browserslist = exports.workflow = exports.isProd = exports.isTest = exports.isDev = exports.cwd = exports.env = exports.tasks = exports.json = undefined; + +var _fs = require('fs'); + +var _fs2 = _interopRequireDefault(_fs); + +var _yargs = require('yargs'); + +var _yargs2 = _interopRequireDefault(_yargs); + +var _path = require('path'); + +var _gulpUtil = require('gulp-util'); + +var _gulpUtil2 = _interopRequireDefault(_gulpUtil); + +var _defaultsDeep2 = require('lodash/defaultsDeep'); + +var _defaultsDeep3 = _interopRequireDefault(_defaultsDeep2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var json = JSON.parse(_fs2.default.readFileSync('./package.json')), + env = _yargs2.default.argv.env, + workflow = _yargs2.default.argv.workflow, + browserslist = json.browserslist; + +var tasks = [], + cwd = '', + schema = '', + isTest = false, + isProd = false, + isDev = false; + +switch (env) { + case 'test': + exports.isTest = isTest = true; + break; + case 'prod': + case 'production': + exports.isProd = isProd = true; + break; + default: + exports.isDev = isDev = true; +} + +if (undefined !== workflow && undefined !== json.workflows[workflow]) { + exports.tasks = tasks = json.workflows[workflow]; +} +if (undefined !== tasks.cwd) { + exports.cwd = cwd = tasks.cwd; + delete tasks.cwd; +} + +function getSchema(slug) { + var file = (0, _path.resolve)(__dirname, '../schemas/' + slug + '.json'); + + if (!_fs2.default.existsSync(file)) { + _gulpUtil2.default.log(_gulpUtil2.default.colors.yellow('Schema \'' + slug + '\' not found, ignoring...')); + return {}; + } + + return JSON.parse(_fs2.default.readFileSync(file)); +} +if (undefined !== tasks.schema) { + schema = getSchema(tasks.schema); + delete tasks.schema; + exports.tasks = tasks = (0, _defaultsDeep3.default)(tasks, schema); +} + +exports.json = json; +exports.tasks = tasks; +exports.env = env; +exports.cwd = cwd; +exports.isDev = isDev; +exports.isTest = isTest; +exports.isProd = isProd; +exports.workflow = workflow; +exports.browserslist = browserslist; \ No newline at end of file diff --git a/workflows/dist/utils/get-tasks.js b/workflows/dist/utils/get-tasks.js new file mode 100644 index 0000000..208fb24 --- /dev/null +++ b/workflows/dist/utils/get-tasks.js @@ -0,0 +1,58 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.getTasks = undefined; + +var _gulp = require('gulp'); + +var _gulp2 = _interopRequireDefault(_gulp); + +var _gulpUtil = require('gulp-util'); + +var _gulpUtil2 = _interopRequireDefault(_gulpUtil); + +var _requireDir = require('require-dir'); + +var _requireDir2 = _interopRequireDefault(_requireDir); + +var _getConfig = require('./get-config'); + +var _sortTasks = require('./sort-tasks'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var getTasks = exports.getTasks = function getTasks() { + var tasksList = void 0, + gulpTasks = void 0; + + // Load all Gulp tasks from `tasks` dir. + (0, _requireDir2.default)('../tasks'); + + // Filter the list to only contain existing Gulp tasks. + tasksList = Object.keys(_getConfig.tasks).filter(function (task) { + if (undefined === _gulp2.default.task(task)) { + _gulpUtil2.default.log('Task \'' + _gulpUtil2.default.colors.red(task) + '\' is not defined, ignoring!'); + return false; + } + + return true; + }); + + // Sort tasks into `before`, `after` and `tasks` lists. + tasksList = (0, _sortTasks.sortTasks)(tasksList, ['js-lint']); + gulpTasks = []; + + if (0 < tasksList.before.length) { + gulpTasks.push(_gulp2.default.parallel(tasksList.before)); + } + if (0 < tasksList.tasks.length) { + gulpTasks.push(_gulp2.default.parallel(tasksList.tasks)); + } + if (0 < tasksList.after.length) { + gulpTasks.push(_gulp2.default.parallel(tasksList.after)); + } + + return gulpTasks; +}; \ No newline at end of file diff --git a/workflows/dist/utils/pre-check.js b/workflows/dist/utils/pre-check.js new file mode 100644 index 0000000..fc953e6 --- /dev/null +++ b/workflows/dist/utils/pre-check.js @@ -0,0 +1,39 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.preCheck = undefined; + +var _gulpUtil = require('gulp-util'); + +var _gulpUtil2 = _interopRequireDefault(_gulpUtil); + +var _validateNodeVersion = require('validate-node-version'); + +var _validateNodeVersion2 = _interopRequireDefault(_validateNodeVersion); + +var _getConfig = require('./get-config'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var preCheck = exports.preCheck = function preCheck() { + var nodeTest = (0, _validateNodeVersion2.default)(), + exitCode = 1; + + if (!nodeTest.satisfies) { + _gulpUtil2.default.log(_gulpUtil2.default.colors.red(nodeTest.message)); + process.exit(exitCode); + } + + if (undefined === _getConfig.workflow) { + _gulpUtil2.default.log(_gulpUtil2.default.colors.red('No workflow provided, aborting!')); + process.exit(exitCode); + } else { + _gulpUtil2.default.log('Using \'' + _gulpUtil2.default.colors.yellow(_getConfig.workflow) + '\' workflow...'); + } + + if (undefined !== _getConfig.env) { + _gulpUtil2.default.log('Using \'' + _gulpUtil2.default.colors.yellow(_getConfig.env) + '\' environment...'); + } +}; \ No newline at end of file diff --git a/workflows/dist/utils/sort-tasks.js b/workflows/dist/utils/sort-tasks.js new file mode 100644 index 0000000..e380a51 --- /dev/null +++ b/workflows/dist/utils/sort-tasks.js @@ -0,0 +1,39 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +/** + * Split tasks into 3 categories: main tasks, before and after. + * + * @param {Array} allTasks Set of all tasks + * @param {Array} ignoredTasks Tasks to ignore + * @return {{before: Array, tasks: Array, after: Array}} Categorized tasks object + */ +var sortTasks = exports.sortTasks = function sortTasks(allTasks, ignoredTasks) { + var tasks = allTasks, + before = [], + after = []; + + if (undefined !== ignoredTasks) { + tasks = tasks.filter(function (task) { + return !ignoredTasks.includes(task); + }); + } + + if (tasks.includes('clean')) { + before.push('clean'); + tasks = tasks.filter(function (task) { + return 'clean' !== task; + }); + } + + if (tasks.includes('watch')) { + after.push('watch'); + tasks = tasks.filter(function (task) { + return 'watch' !== task; + }); + } + + return { before: before, tasks: tasks, after: after }; +}; \ No newline at end of file diff --git a/workflows/dist/utils/sort-tasks.test.js b/workflows/dist/utils/sort-tasks.test.js new file mode 100755 index 0000000..2c64754 --- /dev/null +++ b/workflows/dist/utils/sort-tasks.test.js @@ -0,0 +1,77 @@ +'use strict'; + +var _sortTasks = require('./sort-tasks'); + +describe('sortTasks()', function () { + test('returns before and main tasks', function () { + expect((0, _sortTasks.sortTasks)(['clean', 'js', 'css'])).toEqual({ + before: ['clean'], + tasks: ['js', 'css'], + after: [] + }); + }); + + test('returns before, after and main tasks', function () { + expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'])).toEqual({ + before: ['clean'], + tasks: ['js', 'css'], + after: ['watch'] + }); + }); + + test('returns after and main tasks', function () { + expect((0, _sortTasks.sortTasks)(['watch', 'js', 'css'])).toEqual({ + before: [], + tasks: ['js', 'css'], + after: ['watch'] + }); + }); + + test('returns after tasks only', function () { + expect((0, _sortTasks.sortTasks)(['watch'])).toEqual({ + before: [], + tasks: [], + after: ['watch'] + }); + }); + + test('returns main tasks only', function () { + expect((0, _sortTasks.sortTasks)(['css'])).toEqual({ + before: [], + tasks: ['css'], + after: [] + }); + }); + + test('returns before tasks only', function () { + expect((0, _sortTasks.sortTasks)(['clean'])).toEqual({ + before: ['clean'], + tasks: [], + after: [] + }); + }); + + test('specified tasks are ignored', function () { + expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'], ['css'])).toEqual({ + before: ['clean'], + tasks: ['js'], + after: ['watch'] + }); + }); + + test('specified tasks are ignored', function () { + expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'], ['clean'])).toEqual({ + before: [], + tasks: ['js', 'css'], + after: ['watch'] + }); + }); + + test('specified tasks are ignored', function () { + expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'], ['watch'])).toEqual({ + before: ['clean'], + tasks: ['js', 'css'], + after: [] + }); + }); +}); /* eslint-env jest */ \ No newline at end of file diff --git a/workflows/gulpfile.js b/workflows/gulpfile.js deleted file mode 100644 index 52f12d1..0000000 --- a/workflows/gulpfile.js +++ /dev/null @@ -1,910 +0,0 @@ -'use strict'; - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _preCheck = require('./utils/pre-check'); - -var _getTasks = require('./utils/get-tasks'); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -// Check Node version and workflow setup. -(0, _preCheck.preCheck)(); - -// Define default task. -_gulp2.default.task('default', _gulp2.default.series((0, _getTasks.getTasks)())); -'use strict'; - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _getConfig = require('../utils/get-config'); - -var _del = require('del'); - -var _del2 = _interopRequireDefault(_del); - -var _TaskHelper = require('../utils/TaskHelper'); - -var _TaskHelper2 = _interopRequireDefault(_TaskHelper); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var task = new _TaskHelper2.default({ - name: 'clean', - requiredPaths: ['src'], - config: _getConfig.tasks -}); - -_gulp2.default.task(task.name, function (done) { - if (task.isValid()) { - (0, _del2.default)(task.src).then(function () { - return done(); - }); - } -}); -'use strict'; - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _gulpIf = require('gulp-if'); - -var _gulpIf2 = _interopRequireDefault(_gulpIf); - -var _gulpCached = require('gulp-cached'); - -var _gulpCached2 = _interopRequireDefault(_gulpCached); - -var _getConfig = require('../utils/get-config'); - -var _TaskHelper = require('../utils/TaskHelper'); - -var _TaskHelper2 = _interopRequireDefault(_TaskHelper); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var task = new _TaskHelper2.default({ - name: 'copy', - requiredPaths: ['src', 'dest'], - config: _getConfig.tasks -}); - -_gulp2.default.task(task.name, function () { - if (!task.isValid()) { - return null; - } - - return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName, { optimizeMemory: false }))).pipe(task.end()); -}); -'use strict'; - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _gulpCached = require('gulp-cached'); - -var _gulpCached2 = _interopRequireDefault(_gulpCached); - -var _getConfig = require('../utils/get-config'); - -var _gulpIf = require('gulp-if'); - -var _gulpIf2 = _interopRequireDefault(_gulpIf); - -var _gulpPostcss = require('gulp-postcss'); - -var _gulpPostcss2 = _interopRequireDefault(_gulpPostcss); - -var _postcssReporter = require('postcss-reporter'); - -var _postcssReporter2 = _interopRequireDefault(_postcssReporter); - -var _postcssScss = require('postcss-scss'); - -var _postcssScss2 = _interopRequireDefault(_postcssScss); - -var _stylelint = require('stylelint'); - -var _stylelint2 = _interopRequireDefault(_stylelint); - -var _TaskHelper = require('../utils/TaskHelper'); - -var _TaskHelper2 = _interopRequireDefault(_TaskHelper); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var task = new _TaskHelper2.default({ - name: 'css-lint', - requiredPaths: ['src'], - config: _getConfig.tasks, - configSlug: 'css' -}); - -if (undefined !== task.config) { - _gulp2.default.task(task.name, function () { - if (!task.isValid()) { - return null; - } - - return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName))).pipe((0, _gulpPostcss2.default)([(0, _stylelint2.default)(), (0, _postcssReporter2.default)({ clearAllMessages: true })], { syntax: _postcssScss2.default })); - }); -} -'use strict'; - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _gulpCached = require('gulp-cached'); - -var _gulpCached2 = _interopRequireDefault(_gulpCached); - -var _gulpProgeny = require('gulp-progeny'); - -var _gulpProgeny2 = _interopRequireDefault(_gulpProgeny); - -var _getConfig = require('../utils/get-config'); - -var _gulpSass = require('gulp-sass'); - -var _gulpSass2 = _interopRequireDefault(_gulpSass); - -var _gulpSourcemaps = require('gulp-sourcemaps'); - -var _gulpSourcemaps2 = _interopRequireDefault(_gulpSourcemaps); - -var _gulpIf = require('gulp-if'); - -var _gulpIf2 = _interopRequireDefault(_gulpIf); - -var _gulpPostcss = require('gulp-postcss'); - -var _gulpPostcss2 = _interopRequireDefault(_gulpPostcss); - -var _postcssCssnext = require('postcss-cssnext'); - -var _postcssCssnext2 = _interopRequireDefault(_postcssCssnext); - -var _postcssPxtorem = require('postcss-pxtorem'); - -var _postcssPxtorem2 = _interopRequireDefault(_postcssPxtorem); - -var _autoprefixer = require('autoprefixer'); - -var _autoprefixer2 = _interopRequireDefault(_autoprefixer); - -var _postcssAssets = require('postcss-assets'); - -var _postcssAssets2 = _interopRequireDefault(_postcssAssets); - -var _TaskHelper = require('../utils/TaskHelper'); - -var _TaskHelper2 = _interopRequireDefault(_TaskHelper); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var task = new _TaskHelper2.default({ - name: 'css', - requiredPaths: ['src', 'dest'], - config: _getConfig.tasks -}); - -if (undefined !== task.config) { - var fn = function fn() { - if (!task.isValid()) { - return null; - } - - return task.start() - - // Caching and incremental building (progeny) in Gulp. - .pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName))).pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpProgeny2.default)())) - - // Actual SASS compilation. - .pipe((0, _gulpIf2.default)(_getConfig.isDev, _gulpSourcemaps2.default.init())).pipe((0, _gulpSass2.default)({ - includePaths: undefined !== task.config.includePaths ? task.config.includePaths : [], - outputStyle: _getConfig.isDev ? 'expanded' : 'compressed' - }).on('error', _gulpSass2.default.logError)).pipe((0, _gulpPostcss2.default)(getProcessors(task.config.postcssProcessors))).pipe((0, _gulpIf2.default)(_getConfig.isDev, _gulpSourcemaps2.default.write(''))).pipe(task.end()); - }; - - fn.displayName = 'css-compile'; - - if (undefined !== task.config.enableLinter && true === task.config.enableLinter) { - _gulp2.default.task('css', _gulp2.default.series('css-lint', fn)); - } else { - _gulp2.default.task('css', fn); - } -} - -function getProcessors(settings) { - var processors = [], - defaults = void 0, - s = void 0; - - defaults = { - cssnext: { - warnForDuplicates: false - }, - autoprefixer: {}, - pxtorem: { - rootValue: 16, - unitPrecision: 5, - propList: ['*'], - selectorBlackList: [], - replace: true, - mediaQuery: true, - minPixelValue: 2 - }, - assets: { - relative: true - } - }; - - if (false !== settings.cssnext) { - s = true === settings.cssnext ? {} : settings.cssnext; - processors.push((0, _postcssCssnext2.default)(Object.assign(defaults.cssnext, s))); - } - - if (false !== settings.autoprefixer) { - s = true === settings.autoprefixer ? {} : settings.autoprefixer; - processors.push((0, _autoprefixer2.default)(Object.assign(defaults.autoprefixer, s))); - } - - if (false !== settings.pxtorem) { - s = true === settings.pxtorem ? {} : settings.pxtorem; - processors.push((0, _postcssPxtorem2.default)(Object.assign(defaults.pxtorem, s))); - } - - if (false !== settings.assets) { - s = true === settings.assets ? {} : settings.assets; - processors.push((0, _postcssAssets2.default)(Object.assign(defaults.assets, s))); - } - - return processors; -} -'use strict'; - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _gulpIf = require('gulp-if'); - -var _gulpIf2 = _interopRequireDefault(_gulpIf); - -var _gulpCached = require('gulp-cached'); - -var _gulpCached2 = _interopRequireDefault(_gulpCached); - -var _gulpImagemin = require('gulp-imagemin'); - -var _gulpImagemin2 = _interopRequireDefault(_gulpImagemin); - -var _getConfig = require('../utils/get-config'); - -var _TaskHelper = require('../utils/TaskHelper'); - -var _TaskHelper2 = _interopRequireDefault(_TaskHelper); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var task = new _TaskHelper2.default({ - name: 'images', - requiredPaths: ['src', 'dest'], - config: _getConfig.tasks -}); - -_gulp2.default.task(task.name, function () { - if (!task.isValid()) { - return null; - } - - return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName, { optimizeMemory: false }))).pipe((0, _gulpImagemin2.default)()).pipe(task.end()); -}); -'use strict'; - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _gulpCached = require('gulp-cached'); - -var _gulpCached2 = _interopRequireDefault(_gulpCached); - -var _getConfig = require('../utils/get-config'); - -var _gulpEslint = require('gulp-eslint'); - -var _gulpEslint2 = _interopRequireDefault(_gulpEslint); - -var _gulpIf = require('gulp-if'); - -var _gulpIf2 = _interopRequireDefault(_gulpIf); - -var _TaskHelper = require('../utils/TaskHelper'); - -var _TaskHelper2 = _interopRequireDefault(_TaskHelper); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var task = new _TaskHelper2.default({ - name: 'js-lint', - requiredPaths: ['src'], - config: _getConfig.tasks -}); - -if (undefined !== task.config) { - _gulp2.default.task(task.name, function () { - if (!task.isValid()) { - return null; - } - - return task.start().pipe((0, _gulpIf2.default)(_getConfig.isDev, (0, _gulpCached2.default)(task.cacheName))).pipe((0, _gulpEslint2.default)()).pipe((0, _gulpIf2.default)(_getConfig.isProd, _gulpEslint2.default.format())).pipe((0, _gulpIf2.default)(_getConfig.isProd, _gulpEslint2.default.failAfterError())); - }); -} -'use strict'; - -var _getConfig = require('../utils/get-config'); - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _path = require('path'); - -var _webpack = require('webpack'); - -var _webpack2 = _interopRequireDefault(_webpack); - -var _webpackStream = require('webpack-stream'); - -var _webpackStream2 = _interopRequireDefault(_webpackStream); - -var _progressBarWebpackPlugin = require('progress-bar-webpack-plugin'); - -var _progressBarWebpackPlugin2 = _interopRequireDefault(_progressBarWebpackPlugin); - -var _webpackConfigUtils = require('webpack-config-utils'); - -var _gulpPlumber = require('gulp-plumber'); - -var _gulpPlumber2 = _interopRequireDefault(_gulpPlumber); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -if (undefined !== _getConfig.tasks.js) { - var fn = function fn() { - var babelifyOptions = void 0, - webpackConfig = void 0, - esLintOptions = {}; - var paths = _getConfig.tasks.js; - - babelifyOptions = { - presets: [['env', { - targets: { - browsers: _getConfig.browserslist - } - }]] - }; - - // Avoid linting for the test environment - if (_getConfig.isDev || _getConfig.isProd) { - esLintOptions = { - test: /\.js$/, - loader: 'eslint-loader', - exclude: /(node_modules)/ - }; - } - - webpackConfig = { - context: (0, _path.resolve)(_getConfig.cwd, paths.base), - entry: paths.entry, - output: { - filename: '[name].js', - pathinfo: _getConfig.isDev - }, - devtool: _getConfig.isProd ? 'source-map' : 'eval', - module: { - rules: [esLintOptions], - loaders: [{ - test: /\.js$/, - loader: 'babel-loader', - options: babelifyOptions, - exclude: /node_modules/ - }] - }, - plugins: (0, _webpackConfigUtils.removeEmpty)([new _progressBarWebpackPlugin2.default(), _getConfig.isProd ? new _webpack2.default.optimize.UglifyJsPlugin() : undefined]), - watch: true, - cache: true - }; - - return _gulp2.default.src((0, _path.resolve)(_getConfig.cwd, paths.base)).pipe((0, _gulpPlumber2.default)()).pipe((0, _webpackStream2.default)(webpackConfig, _webpack2.default)).pipe(_gulpPlumber2.default.stop()).pipe(_gulp2.default.dest((0, _path.resolve)(_getConfig.cwd, paths.dest))); - }; - - fn.displayName = 'js-compile'; - - if (undefined !== _getConfig.tasks['js-lint']) { - _gulp2.default.task('js', _gulp2.default.series('js-lint', fn)); - } else { - _gulp2.default.task('js', fn); - } -} -'use strict'; - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _getConfig = require('../utils/get-config'); - -var _gulpWatch = require('gulp-watch'); - -var _gulpWatch2 = _interopRequireDefault(_gulpWatch); - -var _path = require('path'); - -var _without2 = require('lodash/without'); - -var _without3 = _interopRequireDefault(_without2); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -if (undefined !== _getConfig.tasks.watch && undefined !== _getConfig.tasks.watch.tasks) { - _gulp2.default.task('watch', function () { - - // Omit some tasks, e.g. `js` is already watched by Webpack. - var filteredTasks = (0, _without3.default)(_getConfig.tasks.watch.tasks, 'js', 'js-lint', 'clean'); - - filteredTasks.forEach(function (taskSlug) { - var task = _getConfig.tasks[taskSlug]; - - if (undefined === task.src) { - return; - } - - (0, _gulpWatch2.default)((0, _path.join)(_getConfig.cwd, task.src), function () { - return _gulp2.default.start(taskSlug); - }); - }); - }); -} -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _gulpUtil = require('gulp-util'); - -var _gulpUtil2 = _interopRequireDefault(_gulpUtil); - -var _path = require('path'); - -var _getConfig = require('./get-config'); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -var TaskHelper = function () { - function TaskHelper(_ref) { - var _ref$name = _ref.name, - name = _ref$name === undefined ? '' : _ref$name, - _ref$requiredPaths = _ref.requiredPaths, - requiredPaths = _ref$requiredPaths === undefined ? [] : _ref$requiredPaths, - _ref$config = _ref.config, - config = _ref$config === undefined ? null : _ref$config, - _ref$configSlug = _ref.configSlug, - configSlug = _ref$configSlug === undefined ? '' : _ref$configSlug; - - _classCallCheck(this, TaskHelper); - - if (null === config) { - _gulpUtil2.default.log(_gulpUtil2.default.colors.red('The task template is missing a configuration.')); - return; - } - - this._name = name; - this._requiredPaths = requiredPaths; - this._config = config; - this._configSlug = '' === configSlug ? name : configSlug; - } - - _createClass(TaskHelper, [{ - key: 'isValid', - value: function isValid() { - if (!this.hasPathsDefined) { - _gulpUtil2.default.log('Missing paths in \'' + _gulpUtil2.default.colors.red(this.name) + '\' task, aborting!'); - return false; - } - return true; - } - }, { - key: 'start', - value: function start() { - return _gulp2.default.src(this.src, { base: this.base }); - } - }, { - key: 'end', - value: function end() { - return _gulp2.default.dest(this.dest, { cwd: _getConfig.cwd }); - } - }, { - key: 'config', - get: function get() { - return '' === this.configSlug ? this._config : this._config[this.configSlug]; - } - }, { - key: 'name', - get: function get() { - return this._name; - } - }, { - key: 'configSlug', - get: function get() { - return this._configSlug; - } - }, { - key: 'requiredPaths', - get: function get() { - return this._requiredPaths; - } - }, { - key: 'hasPathsDefined', - get: function get() { - var _this = this; - - return this.requiredPaths.every(function (path) { - return undefined !== _this.config[path]; - }); - } - }, { - key: 'src', - get: function get() { - var srcList = Array.isArray(this.config.src) ? this.config.src : [this.config.src], - src = srcList.map(function (path) { - return (0, _path.join)(_getConfig.cwd, path); - }); - - return src; - } - }, { - key: 'entries', - get: function get() { - var entriesList = Array.isArray(this.config.entries) ? this.config.entries : [this.config.entries], - entries = entriesList.map(function (path) { - return (0, _path.join)(_getConfig.cwd, path); - }); - - return entries; - } - }, { - key: 'base', - get: function get() { - return undefined === this.config.base ? '' : (0, _path.join)(_getConfig.cwd, this.config.base); - } - }, { - key: 'dest', - get: function get() { - return this.config.dest; - } - }, { - key: 'cacheName', - get: function get() { - return this.name + '-task-cache'; - } - }]); - - return TaskHelper; -}(); - -exports.default = TaskHelper; -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.browserslist = exports.workflow = exports.isProd = exports.isTest = exports.isDev = exports.cwd = exports.env = exports.tasks = exports.json = undefined; - -var _fs = require('fs'); - -var _fs2 = _interopRequireDefault(_fs); - -var _yargs = require('yargs'); - -var _yargs2 = _interopRequireDefault(_yargs); - -var _path = require('path'); - -var _gulpUtil = require('gulp-util'); - -var _gulpUtil2 = _interopRequireDefault(_gulpUtil); - -var _defaultsDeep2 = require('lodash/defaultsDeep'); - -var _defaultsDeep3 = _interopRequireDefault(_defaultsDeep2); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var json = JSON.parse(_fs2.default.readFileSync('./package.json')), - env = _yargs2.default.argv.env, - workflow = _yargs2.default.argv.workflow, - browserslist = json.browserslist; - -var tasks = [], - cwd = '', - schema = '', - isTest = false, - isProd = false, - isDev = false; - -switch (env) { - case 'test': - exports.isTest = isTest = true; - break; - case 'prod': - case 'production': - exports.isProd = isProd = true; - break; - default: - exports.isDev = isDev = true; -} - -if (undefined !== workflow && undefined !== json.workflows[workflow]) { - exports.tasks = tasks = json.workflows[workflow]; -} -if (undefined !== tasks.cwd) { - exports.cwd = cwd = tasks.cwd; - delete tasks.cwd; -} - -function getSchema(slug) { - var file = (0, _path.resolve)(__dirname, '../schemas/' + slug + '.json'); - - if (!_fs2.default.existsSync(file)) { - _gulpUtil2.default.log(_gulpUtil2.default.colors.yellow('Schema \'' + slug + '\' not found, ignoring...')); - return {}; - } - - return JSON.parse(_fs2.default.readFileSync(file)); -} -if (undefined !== tasks.schema) { - schema = getSchema(tasks.schema); - delete tasks.schema; - exports.tasks = tasks = (0, _defaultsDeep3.default)(tasks, schema); -} - -exports.json = json; -exports.tasks = tasks; -exports.env = env; -exports.cwd = cwd; -exports.isDev = isDev; -exports.isTest = isTest; -exports.isProd = isProd; -exports.workflow = workflow; -exports.browserslist = browserslist; -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.getTasks = undefined; - -var _gulp = require('gulp'); - -var _gulp2 = _interopRequireDefault(_gulp); - -var _gulpUtil = require('gulp-util'); - -var _gulpUtil2 = _interopRequireDefault(_gulpUtil); - -var _requireDir = require('require-dir'); - -var _requireDir2 = _interopRequireDefault(_requireDir); - -var _getConfig = require('./get-config'); - -var _sortTasks = require('./sort-tasks'); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var getTasks = exports.getTasks = function getTasks() { - var tasksList = void 0, - gulpTasks = void 0; - - // Load all Gulp tasks from `tasks` dir. - (0, _requireDir2.default)('../tasks'); - - // Filter the list to only contain existing Gulp tasks. - tasksList = Object.keys(_getConfig.tasks).filter(function (task) { - if (undefined === _gulp2.default.task(task)) { - _gulpUtil2.default.log('Task \'' + _gulpUtil2.default.colors.red(task) + '\' is not defined, ignoring!'); - return false; - } - - return true; - }); - - // Sort tasks into `before`, `after` and `tasks` lists. - tasksList = (0, _sortTasks.sortTasks)(tasksList, ['js-lint']); - gulpTasks = []; - - if (0 < tasksList.before.length) { - gulpTasks.push(_gulp2.default.parallel(tasksList.before)); - } - if (0 < tasksList.tasks.length) { - gulpTasks.push(_gulp2.default.parallel(tasksList.tasks)); - } - if (0 < tasksList.after.length) { - gulpTasks.push(_gulp2.default.parallel(tasksList.after)); - } - - return gulpTasks; -}; -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.preCheck = undefined; - -var _gulpUtil = require('gulp-util'); - -var _gulpUtil2 = _interopRequireDefault(_gulpUtil); - -var _validateNodeVersion = require('validate-node-version'); - -var _validateNodeVersion2 = _interopRequireDefault(_validateNodeVersion); - -var _getConfig = require('./get-config'); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var preCheck = exports.preCheck = function preCheck() { - var nodeTest = (0, _validateNodeVersion2.default)(), - exitCode = 1; - - if (!nodeTest.satisfies) { - _gulpUtil2.default.log(_gulpUtil2.default.colors.red(nodeTest.message)); - process.exit(exitCode); - } - - if (undefined === _getConfig.workflow) { - _gulpUtil2.default.log(_gulpUtil2.default.colors.red('No workflow provided, aborting!')); - process.exit(exitCode); - } else { - _gulpUtil2.default.log('Using \'' + _gulpUtil2.default.colors.yellow(_getConfig.workflow) + '\' workflow...'); - } - - if (undefined !== _getConfig.env) { - _gulpUtil2.default.log('Using \'' + _gulpUtil2.default.colors.yellow(_getConfig.env) + '\' environment...'); - } -}; -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -/** - * Split tasks into 3 categories: main tasks, before and after. - * - * @param {Array} allTasks Set of all tasks - * @param {Array} ignoredTasks Tasks to ignore - * @return {{before: Array, tasks: Array, after: Array}} Categorized tasks object - */ -var sortTasks = exports.sortTasks = function sortTasks(allTasks, ignoredTasks) { - var tasks = allTasks, - before = [], - after = []; - - if (undefined !== ignoredTasks) { - tasks = tasks.filter(function (task) { - return !ignoredTasks.includes(task); - }); - } - - if (tasks.includes('clean')) { - before.push('clean'); - tasks = tasks.filter(function (task) { - return 'clean' !== task; - }); - } - - if (tasks.includes('watch')) { - after.push('watch'); - tasks = tasks.filter(function (task) { - return 'watch' !== task; - }); - } - - return { before: before, tasks: tasks, after: after }; -}; -'use strict'; - -var _sortTasks = require('./sort-tasks'); - -describe('sortTasks()', function () { - test('returns before and main tasks', function () { - expect((0, _sortTasks.sortTasks)(['clean', 'js', 'css'])).toEqual({ - before: ['clean'], - tasks: ['js', 'css'], - after: [] - }); - }); - - test('returns before, after and main tasks', function () { - expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'])).toEqual({ - before: ['clean'], - tasks: ['js', 'css'], - after: ['watch'] - }); - }); - - test('returns after and main tasks', function () { - expect((0, _sortTasks.sortTasks)(['watch', 'js', 'css'])).toEqual({ - before: [], - tasks: ['js', 'css'], - after: ['watch'] - }); - }); - - test('returns after tasks only', function () { - expect((0, _sortTasks.sortTasks)(['watch'])).toEqual({ - before: [], - tasks: [], - after: ['watch'] - }); - }); - - test('returns main tasks only', function () { - expect((0, _sortTasks.sortTasks)(['css'])).toEqual({ - before: [], - tasks: ['css'], - after: [] - }); - }); - - test('returns before tasks only', function () { - expect((0, _sortTasks.sortTasks)(['clean'])).toEqual({ - before: ['clean'], - tasks: [], - after: [] - }); - }); - - test('specified tasks are ignored', function () { - expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'], ['css'])).toEqual({ - before: ['clean'], - tasks: ['js'], - after: ['watch'] - }); - }); - - test('specified tasks are ignored', function () { - expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'], ['clean'])).toEqual({ - before: [], - tasks: ['js', 'css'], - after: ['watch'] - }); - }); - - test('specified tasks are ignored', function () { - expect((0, _sortTasks.sortTasks)(['watch', 'clean', 'js', 'css'], ['watch'])).toEqual({ - before: ['clean'], - tasks: ['js', 'css'], - after: [] - }); - }); -}); /* eslint-env jest */ From 04317318d0c79acc808192b9a34b023a76c288e4 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Tue, 25 Jul 2017 14:11:02 +0200 Subject: [PATCH 58/60] Split Workflows into `src` and `dist` folders. Clean up `package.json`. --- build-workflows.sh | 7 +++++ package.json | 30 +------------------ .../dist/{gulpfile.babel.js => gulpfile.js} | 0 workflows/dist/utils/get-config.js | 2 +- workflows/{ => src}/gulpfile.babel.js | 0 workflows/{ => src}/tasks/clean.js | 0 workflows/{ => src}/tasks/copy.js | 0 workflows/{ => src}/tasks/css-lint.js | 0 workflows/{ => src}/tasks/css.js | 0 workflows/{ => src}/tasks/images.js | 0 workflows/{ => src}/tasks/js-lint.js | 0 workflows/{ => src}/tasks/js.js | 0 workflows/{ => src}/tasks/watch.js | 0 workflows/{ => src}/utils/TaskHelper.js | 0 workflows/{ => src}/utils/get-config.js | 2 +- workflows/{ => src}/utils/get-tasks.js | 0 workflows/{ => src}/utils/pre-check.js | 0 workflows/{ => src}/utils/sort-tasks.js | 0 workflows/{ => src}/utils/sort-tasks.test.js | 0 19 files changed, 10 insertions(+), 31 deletions(-) create mode 100755 build-workflows.sh rename workflows/dist/{gulpfile.babel.js => gulpfile.js} (100%) rename workflows/{ => src}/gulpfile.babel.js (100%) rename workflows/{ => src}/tasks/clean.js (100%) rename workflows/{ => src}/tasks/copy.js (100%) rename workflows/{ => src}/tasks/css-lint.js (100%) rename workflows/{ => src}/tasks/css.js (100%) rename workflows/{ => src}/tasks/images.js (100%) rename workflows/{ => src}/tasks/js-lint.js (100%) rename workflows/{ => src}/tasks/js.js (100%) rename workflows/{ => src}/tasks/watch.js (100%) rename workflows/{ => src}/utils/TaskHelper.js (100%) rename workflows/{ => src}/utils/get-config.js (94%) rename workflows/{ => src}/utils/get-tasks.js (100%) rename workflows/{ => src}/utils/pre-check.js (100%) rename workflows/{ => src}/utils/sort-tasks.js (100%) rename workflows/{ => src}/utils/sort-tasks.test.js (100%) diff --git a/build-workflows.sh b/build-workflows.sh new file mode 100755 index 0000000..0de1f98 --- /dev/null +++ b/build-workflows.sh @@ -0,0 +1,7 @@ +#!/bin/bash + +set -e + +rm -rf ./workflows/dist +./node_modules/.bin/babel ./workflows/src --out-dir ./workflows/dist +mv ./workflows/dist/gulpfile.babel.js ./workflows/dist/gulpfile.js diff --git a/package.json b/package.json index b0c732b..9346de4 100644 --- a/package.json +++ b/package.json @@ -36,37 +36,9 @@ "license": "MIT", "homepage": "https://github.com/xwp/wp-dev-lib#readme", "scripts": { - "theme:dev": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --env=dev --workflow=theme", - "theme:prod": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --env=prod --workflow=theme", - "plugin": "gulp --gulpfile ./dev-lib/workflows/gulpfile.babel.js --cwd ./ --workflow=plugin", - "prod": "npm run theme:prod && npm run plugin", - "dev": "npm run theme:dev && npm run plugin", + "build:self": "./build-workflows.sh", "test": "echo \"Error: no test specified\" && exit 1" }, - "workflows": { - "theme": { - "schema": "theme", - "cwd": "wp-content/themes/test-theme/assets", - "js": { - "entry": { - "vendor": "./vendors.js" - } - } - }, - "plugin": { - "cwd": "wp-content/plugins/test-plugin", - "clean": { - "src": "dist" - }, - "js": { - "entries": [ - "src/js/test.js" - ], - "bundle": "bundle.js", - "dest": "dist/js" - } - } - }, "browserslist": [ "last 2 Chrome versions", "last 2 Firefox versions", diff --git a/workflows/dist/gulpfile.babel.js b/workflows/dist/gulpfile.js similarity index 100% rename from workflows/dist/gulpfile.babel.js rename to workflows/dist/gulpfile.js diff --git a/workflows/dist/utils/get-config.js b/workflows/dist/utils/get-config.js index aa52c81..bf18115 100644 --- a/workflows/dist/utils/get-config.js +++ b/workflows/dist/utils/get-config.js @@ -58,7 +58,7 @@ if (undefined !== tasks.cwd) { } function getSchema(slug) { - var file = (0, _path.resolve)(__dirname, '../schemas/' + slug + '.json'); + var file = (0, _path.resolve)(__dirname, '../../schemas/' + slug + '.json'); if (!_fs2.default.existsSync(file)) { _gulpUtil2.default.log(_gulpUtil2.default.colors.yellow('Schema \'' + slug + '\' not found, ignoring...')); diff --git a/workflows/gulpfile.babel.js b/workflows/src/gulpfile.babel.js similarity index 100% rename from workflows/gulpfile.babel.js rename to workflows/src/gulpfile.babel.js diff --git a/workflows/tasks/clean.js b/workflows/src/tasks/clean.js similarity index 100% rename from workflows/tasks/clean.js rename to workflows/src/tasks/clean.js diff --git a/workflows/tasks/copy.js b/workflows/src/tasks/copy.js similarity index 100% rename from workflows/tasks/copy.js rename to workflows/src/tasks/copy.js diff --git a/workflows/tasks/css-lint.js b/workflows/src/tasks/css-lint.js similarity index 100% rename from workflows/tasks/css-lint.js rename to workflows/src/tasks/css-lint.js diff --git a/workflows/tasks/css.js b/workflows/src/tasks/css.js similarity index 100% rename from workflows/tasks/css.js rename to workflows/src/tasks/css.js diff --git a/workflows/tasks/images.js b/workflows/src/tasks/images.js similarity index 100% rename from workflows/tasks/images.js rename to workflows/src/tasks/images.js diff --git a/workflows/tasks/js-lint.js b/workflows/src/tasks/js-lint.js similarity index 100% rename from workflows/tasks/js-lint.js rename to workflows/src/tasks/js-lint.js diff --git a/workflows/tasks/js.js b/workflows/src/tasks/js.js similarity index 100% rename from workflows/tasks/js.js rename to workflows/src/tasks/js.js diff --git a/workflows/tasks/watch.js b/workflows/src/tasks/watch.js similarity index 100% rename from workflows/tasks/watch.js rename to workflows/src/tasks/watch.js diff --git a/workflows/utils/TaskHelper.js b/workflows/src/utils/TaskHelper.js similarity index 100% rename from workflows/utils/TaskHelper.js rename to workflows/src/utils/TaskHelper.js diff --git a/workflows/utils/get-config.js b/workflows/src/utils/get-config.js similarity index 94% rename from workflows/utils/get-config.js rename to workflows/src/utils/get-config.js index f4e6e9d..ace7f55 100644 --- a/workflows/utils/get-config.js +++ b/workflows/src/utils/get-config.js @@ -37,7 +37,7 @@ if ( undefined !== tasks.cwd ) { } function getSchema( slug ) { - const file = resolve( __dirname, `../schemas/${ slug }.json` ); + const file = resolve( __dirname, `../../schemas/${ slug }.json` ); if ( ! fs.existsSync( file ) ) { gutil.log( gutil.colors.yellow( `Schema '${ slug }' not found, ignoring...` ) ); diff --git a/workflows/utils/get-tasks.js b/workflows/src/utils/get-tasks.js similarity index 100% rename from workflows/utils/get-tasks.js rename to workflows/src/utils/get-tasks.js diff --git a/workflows/utils/pre-check.js b/workflows/src/utils/pre-check.js similarity index 100% rename from workflows/utils/pre-check.js rename to workflows/src/utils/pre-check.js diff --git a/workflows/utils/sort-tasks.js b/workflows/src/utils/sort-tasks.js similarity index 100% rename from workflows/utils/sort-tasks.js rename to workflows/src/utils/sort-tasks.js diff --git a/workflows/utils/sort-tasks.test.js b/workflows/src/utils/sort-tasks.test.js similarity index 100% rename from workflows/utils/sort-tasks.test.js rename to workflows/src/utils/sort-tasks.test.js From 53023b1ac7eb2e3f2d5c9232de7fbb87488b9b93 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Wed, 26 Jul 2017 15:01:42 +0200 Subject: [PATCH 59/60] Update `package.json`. --- package.json | 38 ++------------------------------------ 1 file changed, 2 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index 9346de4..4952d9a 100644 --- a/package.json +++ b/package.json @@ -59,40 +59,7 @@ ] }, "stylelint": { - "extends": "stylelint-config-wordpress/scss", - "plugins": [ - "stylelint-no-unsupported-browser-features" - ], - "rules": { - "string-quotes": "single", - "color-hex-length": null, - "function-parentheses-space-inside": null, - "function-url-quotes": "always", - "at-rule-empty-line-before": [ - "always", - { - "except": [ - "first-nested", - "blockless-after-same-name-blockless" - ], - "ignore": [ - "after-comment" - ], - "ignoreAtRules": [ - "else", - "elseif" - ] - } - ], - "plugin/no-unsupported-browser-features": [ - true, - { - "severity": "warning" - } - ], - "selector-pseudo-element-colon-notation": "double", - "value-keyword-case": null - } + "extends": "stylelint-config-wordpress/scss" }, "dependencies": { "autoprefixer": "^7.1.2", @@ -125,9 +92,8 @@ "postcss-scss": "^1.0.2", "progress-bar-webpack-plugin": "^1.10.0", "require-dir": "^0.3.2", - "stylelint": "^7.13.0", + "stylelint": "^8.0.0", "stylelint-config-wordpress": "^12.0.0", - "stylelint-no-unsupported-browser-features": "^1.0.0", "validate-node-version": "^1.1.1", "webpack": "^3.3.0", "webpack-config-utils": "^2.3.0", From 7083b04aeb51fa396979bbfbd189e7a1777248e1 Mon Sep 17 00:00:00 2001 From: Piotr Delawski Date: Wed, 26 Jul 2017 15:01:55 +0200 Subject: [PATCH 60/60] Ignore `npm-debug.log`. --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index a121d1d..7b2de3f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ codecept.phar node_modules +npm-debug.log