Awesome
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
Features
- BrowserSync - Time-saving synchronised browser testing.
- gulp - Automate and enhance your workflow
- stylefmt (gulp-stylefmt) - Stylefmt is a tool that automatically formats stylesheets, extending stylelint functionality.
- stylelint (gulp-stylelint) - Configurable tool for writing clean and consistent SCSS
- eslint (gulp-eslint) - Find and fix problems in your JavaScript code.
- PHP_CodeSniffer (gulp-phpcs) - Detects violations of a defined set of coding standards.
Usage
Make sure linters are installed for Gulp ((tutorial below)[#debuggers]). 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:
- Clone this repo and add files to your project folder, edit them according to your project
- Update packages:
npm-check-updates -u
(if you don't havenpm-check-updates
installed, runsudo npm install -g npm-check-updates
) - Proceed with the updates:
npm update
- 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
mkdir -p ~/Projects && cd ~/Projects && git clone -b master --depth 1 https://github.com/squizlabs/PHP_CodeSniffer.git phpcs
git clone -b master https://github.com/PHPCompatibility/PHPCompatibility
git clone -b master --depth 1 https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs
- Please note: Replace yourusername name with your actual user name!
sudo ln -s /Users/yourusername/Projects/phpcs/bin/phpcs /usr/local/bin/phpcs
sudo chmod +x /usr/local/bin/phpcs
- Please note: Replace yourusername name with your actual user name!
phpcs --config-set installed_paths "/Users/yourusername/Projects/wpcs","/Users/yourusername/Projects/PHPCompatibility"
- 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
npm i stylelint eslint -g
- 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:
- Fork this repository
- Clone your fork
- Get the test data and unpack it to your devpackages folder
- Run
npm install
andgulp
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