Note

We've archived this repository because, starting on Aug 8, 2025, we'll run gulp and front-end packages directly inside the theme. Internal tickets: DEV-83, DEV-127.

Modern web development workflow

Used by Digitoimisto Dude Oy.

This repository includes Gulp and npm related files for starting a new project. These files are specifically meant for development on dudestack, modern-html5-boilerplate and air-light starter theme.

These tools are compatible with VSCode and Sublime Text.

Table of contents

1. Features
2. Usage
3. Debuggers
4. Contributing

Features

1. BrowserSync - Time-saving synchronised browser testing.
2. gulp - Automate and enhance your workflow
3. stylefmt (gulp-stylefmt) - Stylefmt is a tool that automatically formats stylesheets, extending stylelint functionality.
4. stylelint (gulp-stylelint) - Configurable tool for writing clean and consistent SCSS
5. eslint (gulp-eslint) - Find and fix problems in your JavaScript code.
6. PHP_CodeSniffer (gulp-phpcs) - Detects violations of a defined set of coding standards.

Usage

Make sure linters are installed for Gulp tutorial below. Best way to install phpcs and phpcbf is to clone them to ~/Projects, link them to /usr/local/bin/ and set paths with phpcs/phpcbf --config-set installed_paths path-to-wpcs,path-to-phpcompatibility.

Please note: Currently this repo is bundled with WordPress starter theme air and dudestack with automated scripts, but you can use devpackages as stand-alone as well like this:

1. Clone this repo and add files to your project folder, edit them according to your project
2. Update packages: npm-check-updates -u (if you don't have npm-check-updates installed, run sudo npm install -g npm-check-updates)
3. Proceed with the updates: npm update
4. Run gulp watch and have fun!

Debuggers

Devpackages comes with PHP_CodeSniffer for PHP files, stylelint for SCSS/CSS files and eslint for JS files built inside gulpfile.js. Please note, you need to configure global versions of these separately! Here's how:

For gulp

PHP_CodeSniffer needs to be installed under /usr/local/bin/phpcs with WordPress-Coding-Standards for php-debuggers to work properly in gulp. If you don't want to use phpcs with gulp, you can disable it by commenting out or deleting line gulp.watch(phpSrc, ['phpcs']);.

The golden rule here is to make sure the commands stylelint, eslint and phpcs work from command line.

How to install for Gulp

1. mkdir -p ~/Projects && cd ~/Projects && git clone -b master --depth 1 https://github.com/squizlabs/PHP_CodeSniffer.git phpcs
2. git clone -b master https://github.com/PHPCompatibility/PHPCompatibility
3. git clone -b master --depth 1 https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs
4. Please note: Replace yourusername name with your actual user name! sudo ln -s /Users/yourusername/Projects/phpcs/bin/phpcs /usr/local/bin/phpcs
5. sudo chmod +x /usr/local/bin/phpcs
6. Please note: Replace yourusername name with your actual user name! phpcs --config-set installed_paths "/Users/yourusername/Projects/wpcs","/Users/yourusername/Projects/PHPCompatibility"
7. Test your standards with phpcs -i, it should display something like this:

The installed coding standards are PEAR, Zend, PSR2, MySource, Squiz, PSR1, PSR12, PHPCompatibility, WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core

8. npm i stylelint eslint -g
9. Check that other linters work: stylelint -v, eslint -v

For your editor

It's also best to have all stylelint, eslint, phpcs, jscs, jshint living inside your editor. We think Visual Studio Code is best for this, check out the plugins inside vscode-settings repository to make sure everything is installed.

After this you can run gulp a-okay!

Variables declared as Map are forcely inlined

See this issue. Solve by using up to date fork of vscode-stylefmt.

Contributing

If you'd like to contribute to this repository or test out the packages, please follow these steps:

1. Fork this repository
2. Clone your fork
3. Get the test data and unpack it to your devpackages folder
4. Run npm install and gulp

Unit tests for stylelint packages

cd path/to/repo
mkdir -p content
mkdir -p content/themes
content/themes/THEMENAME
content/themes/THEMENAME/sass
echo "@charset 'utf-8';

body {
  background: #f00;
  color: red !important;
  font-size: 2rem;

  @media (max-width: 600px) {
    border: 2px solid red;
  }
}
" > content/themes/THEMENAME/sass/global.scss
npm i
gulp stylelint