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 hopper starter theme.
These tools are compatible with VSCode and Sublime Text.
- 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.
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-updatesinstalled, runsudo npm install -g npm-check-updates) - Proceed with the updates:
npm update - Run
gulp watchand have fun!
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:
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.
mkdir -p ~/Projects && cd ~/Projects && git clone -b master --depth 1 https://github.com/squizlabs/PHP_CodeSniffer.git phpcsgit clone -b master https://github.com/PHPCompatibility/PHPCompatibilitygit 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-Corenpm i stylelint eslint -g- Check that other linters work:
stylelint -v,eslint -v
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!
See this issue. Solve by using up to date fork of vscode-stylefmt.
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 installandgulp
cd path/to/repo
mkdir -p content
mkdir -p content/themes
content/themes/hopper
content/themes/hopper/sass
echo "@charset 'utf-8';
body {
background: #f00;
color: red !important;
font-size: 2rem;
@media (max-width: 600px) {
border: 2px solid red;
}
}
" > content/themes/hopper/sass/global.scss
npm i
gulp stylelint