{"id":24490360,"url":"https://github.com/armandphilippot/wordpress-theme-gulp","last_synced_at":"2025-04-13T23:07:59.094Z","repository":{"id":40270135,"uuid":"394778791","full_name":"ArmandPhilippot/wordpress-theme-gulp","owner":"ArmandPhilippot","description":"A WordPress boilerplate to develop themes with gulp.","archived":false,"fork":false,"pushed_at":"2024-11-19T10:15:09.000Z","size":3116,"stargazers_count":4,"open_issues_count":2,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-13T23:07:41.109Z","etag":null,"topics":["boilerplate","gulp","npm-scripts","rollup","wordpress","wordpress-theme"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArmandPhilippot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-10T20:53:40.000Z","updated_at":"2024-11-19T10:14:06.000Z","dependencies_parsed_at":"2024-11-19T23:16:13.647Z","dependency_job_id":null,"html_url":"https://github.com/ArmandPhilippot/wordpress-theme-gulp","commit_stats":null,"previous_names":["armandphilippot/wordpress-theme-gulp"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArmandPhilippot%2Fwordpress-theme-gulp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArmandPhilippot%2Fwordpress-theme-gulp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArmandPhilippot%2Fwordpress-theme-gulp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArmandPhilippot%2Fwordpress-theme-gulp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArmandPhilippot","download_url":"https://codeload.github.com/ArmandPhilippot/wordpress-theme-gulp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248794571,"owners_count":21162614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","gulp","npm-scripts","rollup","wordpress","wordpress-theme"],"created_at":"2025-01-21T17:17:57.018Z","updated_at":"2025-04-13T23:07:59.056Z","avatar_url":"https://github.com/ArmandPhilippot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WordPress Theme Gulp\n\n![License](https://img.shields.io/github/license/boilerplates-collection/wordpress-theme-gulp?color=blue\u0026colorA=4c4f56\u0026label=License\u0026style=flat-square) ![Version](https://img.shields.io/github/package-json/v/boilerplates-collection/wordpress-theme-gulp?color=blue\u0026colorA=4c4f56\u0026label=Version\u0026style=flat-square)\n\nA WordPress boilerplate designed to facilitate WordPress theme development by using Gulp.\n\n## Introduction\n\nThis boilerplate helps you to quickly start a new WordPress theme. It comes with some configuration files to comply with [WordPress Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/) (adapted to use BEM). It also includes Gulp, linters/fixers, Git hooks, dotenv and some npm scripts.\n\n## Requirements\n\n- You need [npm](https://www.npmjs.com/) and [Composer](https://getcomposer.org/) in order to install dependencies.\n\n- This boilerplate uses Standard version to generate a changelog and Husky to validate commits, so you need to follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).\n\n- In order to avoid the warnings related to the local use of `https`, you will need a valid certificate. You can achieve this with [mkcert](https://github.com/FiloSottile/mkcert).\n\n## Features\n\n### What is included?\n\n* [BrowserSync](https://browsersync.io/)\n* [Dotenv](https://github.com/motdotla/dotenv)\n* [ESlint](https://github.com/eslint/eslint)\n* [Gulp](https://gulpjs.com/) with some plugins.\n* [Husky](https://github.com/typicode/husky)\n* [Lint-staged](https://github.com/okonet/lint-staged)\n* [Modern-normalize](https://github.com/sindresorhus/modern-normalize)\n* [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer)\n* [Playwright](https://github.com/microsoft/playwright)\n* [Rollup](https://github.com/rollup/rollup)\n* [Standard version](https://github.com/conventional-changelog/standard-version)\n* [Stylelint](https://github.com/stylelint/stylelint)\n* [WordPress Coding Standards](https://github.com/WordPress/WordPress-Coding-Standards)\n\n### Gulpfile\n\nThe gulpfile handle different tasks:\n\n* Init your theme with the information obtained from dotenv,\n* Compile SCSS to CSS with Dart Sass and PostCSS (autoprefixer included),\n* Transpile and bundle your JS scripts with Rollup and Babel,\n* Compress your images (JPG, PNG, GIF and SVG),\n* Copy your fonts,\n* Generate a `.pot` file for translation,\n* Create an archive of your theme without development files,\n* Watch for file changes,\n* Minify CSS and JS in production / Generate sourcemaps in development.\n\n### npm scripts\n\nWith `npm`, you can use some scripts:\n\n* `npm run build`: write assets in `assets` folder and generate `.pot` file.\n* `npm run watch`: launch BrowserSync, open your website in the desired browser and refresh it on changes.\n* `npm run lint`: check if all files respects your coding standards.\n* `npm run fix`: fix all files to comply with your coding standards.\n* `npm run translate`: generate a `.pot` file in `./languages`.\n* `npm run screenshot`: take a screenshot (`1200x900`) of your homepage and save `screenshot.png` in your theme root.\n* `npm run release`:\n    * bump `package.json`, `readme.txt`, `functions.php` and `src/scss/abstracts/_variables.scss`,\n    * recompile CSS to update version in `style.css`,\n    * create a new commit with a new tag for your release.\n* `npm run zip`: create a compressed file of your theme, excluding files needed only in development mode.\n\nTo lint/fix a specific type of files, you can also use a \"sub\" script:\n* `npm lint:js` / `npm fix:js` for JS files,\n* `npm lint:php` / `npm fix:php` for PHP files,\n* `npm lint:scss` / `npm fix:scss` for SCSS files.\n\n## How to use it\n\n### First steps\n\nClone this repo, copy `wordpress-theme` in your WordPress installation ( `wp-content/themes/` ) and rename it. Then, in your theme directory:\n\n1. Init Git (otherwise Husky will not install hooks)\n2. Launch `npm install` and `composer update`\n3. Execute `npx husky install` to install Git hooks\n4. Copy `.env.example` and rename it `.env`\n5. Edit your `.env` file to suit your project.\n6. Launch `npm run init`\n7. You may want to relaunch `npm install` so that your `package-lock.json` contains the correct information.\n\nThat's it! You can now start developing your theme.\n\n### Complete the configuration\n\nIf you need to complete the boilerplate:\n\n* `tools/` contains files required by Gulp/npm scripts,\n* `tools/gulp/config/data.js` contains data from `.env` used in other Gulp files,\n* `tools/gulp/config/error-handler.js` handle Gulp error messages,\n* `tools/gulp/config/options.js` contains plugins options,\n* `tools/gulp/config/paths.js` contains paths used by Gulp,\n* `tools/gulp/tasks/` contains Gulp tasks imported in `gulpfile.js`.\n\n## Tips\n\n### Formatting JS files in VS Code with Prettier and ESlint\n\nIf you are using Prettier extension to auto-fix your files, you may want to disable it for Javascript. Prettier doesn't work well with ESlint rules (in particular space rules). So, I recommend you to set these settings in your workspace:\n\n```json\n{\n    \"editor.codeActionsOnSave\": {\n        \"source.fixAll\": true,\n    },\n    \"editor.formatOnSave\": true,\n    \"[javascript]\": {\n        \"editor.formatOnSave\": false,\n    }\n}\n```\nThis way, only the ESlint extension will be used to format your JS files.\n\n## Additional Notes\n\nIf you plan to publish your theme on [WordPress Theme directory](https://wordpress.org/themes/), you may want to edit `readme.txt` manually to provides all necessary information. I'm not sure this is required for themes (it is for plugins), but it is at least recommended. See [a revised readme](https://make.wordpress.org/themes/2015/04/29/a-revised-readme/) for an example.\n\n## License\n\nThis project is open-source and it is licensed under [GPL v2-or-later](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farmandphilippot%2Fwordpress-theme-gulp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farmandphilippot%2Fwordpress-theme-gulp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farmandphilippot%2Fwordpress-theme-gulp/lists"}