Gulp Basic Workflow

• Basic gulp workflow boilerplate.
• ⚠️ Only Node.js < 8

Installation

npm install

NPM Scripts

1. Dev task & run dev server + Hot Reload - npm run start ✔️
2. Linting CSS - npm run lint:css ✔️
3. Linting JS - npm run lint:js ✔️
4. Build task - npm run build ✔️
5. Test - npm test ✔️
6. Clean dev folder - npm run clean:dev ✔️
7. Clean build folder - npm run clean:build ✔️
8. Autofix linting issues - npm run lint:fix ️✔️
9. Deploy Project - npm run deploy ❌

---

Changelog

• Redo Gulp Tasks
• Correctly set up gulp watch
• Add comments to the gulp file

• Set up stylelint for SCSS/CSS
• Set up HUSKY Git Hook (Enforcing linting)

• Set up browser-sync in dev task
• Add initial build task
• Add dev clean task
• Fix paths variable
• Set up autoprefixer in build task

• Set up JS linting
• Set up image optimization in build
• Set up minification CSS/JS in build
• Copy fonts task in build
• Set up linting with --fix option, to fix all linting issues

• Add files size to output - which will log out the full size gulp-size
• Add gulp notify - add notification output to .pipe() stream in gulp tasks gulp-notify Removed

• Set up surge.sh deployment script needs more work
• Set up HUSKY for surge.sh deployment script (Deploy build on pre-push hook) needs more work

• Set up babel for compiling basic ES6 features
• Set up source maps in build

• Update source-maps output, remove gulp-notify

• Nightwatch.js E2E Testing
• Set up CSS regression testing tool
  • backstop.js
  • backstop.js on WP
  • backstop.js config file

• Add prettier
• Add gulp-plumber to prevent pipe breaking from gulp errors

Major Update

• Restructure project folder
  • Create sub folder tools - gulp, nightwatch, backstop etc.
  • Create sub folder for gulp tasks, divide main file to separte task files
  • Create individual gulp tasks

• Add lint-staged
• Update pre-commit hook
• Add commitizen

Future Update

• Inline critical css in build inline-critical
• Set up SCSS unit testing? Read Here

---

MIT License