How can I use scss for style in gulp-wordpress-boilerplate?

I performed npm run install:wordpress followed by npm run dev and got stuck with the local host http://localhost:3000/wp-admin/setup-config.php, How do I find details for this?

Have I missed something? Does this not include the required stack?

When I get to the WordPress installation, e.g. npm run install:wordpress, the script fails and I receive the following message:

Failed at the [email protected] install:wordpress script 'gulp cleanup && gulp download-wordpress && gulp setup && gulp disable-cron'.

Let's say you installed Wordpress with Wordpressify.
How do you maintain the plugins?
It would be cool if there is a command to install a plugin at a certain version. That way you can make a deployment script that will create a new instance of a WP environment

Seems like multisite functions not working properly. .htaccess functions not working on dev server. I'm on Windows machine.
Is there any way to work with multisite setup?

`⠙ 1. Creating 🎈 WordPressify files inside → test /Users/cloud/.npm/_npx/1fa8d2c0f0f6a259/node_modules/wordpressify/installer/index.js:59
throw err;
^

GotError [RequestError]: self signed certificate
at ClientRequest. (/Users/cloud/.npm/_npx/1fa8d2c0f0f6a259/node_modules/got/index.js:182:22)
`

Hi there

I would like to translate this repository into my native language, is there a problem with that?

I forked the repository and it is at that address

@luangjokaj

i need for plugin JWT Authentication for WP REST API
https://it.wordpress.org/plugins/jwt-authentication-for-wp-rest-api/
change .htaccess but wordpressify not have .htaccess
What is your solution?

https://nodejs.org/api/process.html#process_process_getuid
@ribaricplusplus

Hello,

Thank you for creating this project, it's very helpful.

I think it would be cool if we added Docker as a solution for the database, rather than needing to install a local database separately. I've already done this in my fork. Feel free to check it out here. If you want, I can clean up the code and create a pull request that adds docker to this main repo. If you want to try it out, be sure that you have docker and docker-compose installed, then follow the instructions that I added in the README under "Install wordpressify from repository".

Additionally, it might be beneficial to use Docker even as the server in the future. There is a Wordpress image in Docker hub which makes sure that PHP is setup properly. I am planning to add that functionality as well when I get some time.

What do you think?

Via https://wordpressfoundation.org/trademark-policy/

"Please do not use WordPress or WordCamp as part of a domain name"

You'll need to change the domain of this project I'm afraid.

had to modify this line

.pipe(sass().on("error", sass.logError))
to this
.pipe(sass({includePaths: 'node_modules'}).on("error", sass.logError))

to be able easy import bootstrap

@import 'bootstrap/scss/bootstrap';

might want to add it to your tutorial how to switch to sass

Apologies if this isn't the correct place to ask, but I'm just curious as to how the plugins directory works? Can we not install and use plugins without placing their files into that directory?

• Add support for optional style pre-processors
• [ x] PostCSS
• Scss

My computer crashed yesterday and my marina DB was corrupted.

A lot of my work depends on creating wordpress websites for customers, not just the theme but also the content.

Please add a DB backup to npm run backup.

Hi!

Cleanup of the default theme by npm run fresh-start seems to be bugged.
After running it,npm run dev throws ELIFECYCLE error as below:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `gulp dev`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Im on node v12.16.1 and npm 6.13.4

What I did

• npm install wordpressify -g
• wordpressify

After this, it created the wordpressify files and downloaded the npm packages but installing Wordpress is not getting over. I waited for 2 hours, still no change.

I also tried installing via github, but when I used the command npm run install:wordpress, it ran till it finished the setup after downloading Wordpress. Then nothing happened for an hour, it didn't finish.

This may or may not be intentional, but should line 4 of the theme/content-single.php be:

<?php if (!is_single()) : ?>

instead of:
<?php if (!is_product()) : ?>

Let me know if I'm wrong on this, as I couldn't get posts to be picked up with the WooCommerce product alternative

Similar compared to other more popular solutions.

• Roots/Sage,
• WP Odin,
• WPGulp ...
  ...They mostly do a good workflow.

I really enjoyed your very modern and current approach. I do not want to take your credit. It's very cool.

I would like to risk a suggestion, which can add a good differential to your project, which would be the possibility of a more complete Deploy - in other words: a continuous delivery - including migration from the local database to the production version or Stage .

A good way would be to make use of WP-CLI and/or Deployer.

I have not seen any projects yet, for the purpose of bringing a modern and agile workflow, including a full Continuous Delivery solution.

It can be an incredible way to stand out! Consider this possibility.

This WP starter / workflow is among the most impressive I've seen. I'm curious if it has been used on any commercial projects? Thanks.

i dont use docker for wordpress project or mariadb on docker i use localy mariadb plz add optional use docker and database
and add port 443 and use https in nginx docker

Hello,
I can put docker for the dev env, what do you think ?

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Sorry if this has been asked before. But which files can we safely remove to strip down the styling in the default demo page?

I assume it's going to be a necessary step to remove these files from our own theme. If u need help updating the docs, i would gladly help.

Hello. I'd try install Wordpressify by npx/clone repo and gets errors like below. Node v12.18.2 Docker is running.

`| 3. Installing WordPress and building Docker images...C:\Users\dell\AppData\Roaming\npm-cache_npx\20404\node_modules\wordpressify\installer\index.js:59
throw err;
^

Error: Command failed with exit code 1: npm run env:build
[11:53:59] 'setupEnvironment' errored after 3.98 ms
[11:53:59] TypeError: process.getuid is not a function
at setupEnvironment (C:\Users\dell\desktop\wordpressify\gulpfile.js:94:55)
at bound (domain.js:426:14)
at runBound (domain.js:439:12)
at asyncRunner (C:\Users\dell\desktop\wordpressify\node_modules\async-done\index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:79:11)
[11:53:59] 'env:build' errored after 8.22 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] env:build: gulp env:build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] env:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\dell\AppData\Roaming\npm-cache_logs\2020-12-09T10_53_59_761Z-debug.log

[email protected] env:build C:\Users\dell\desktop\wordpressify
gulp env:build

[11:53:59] Using gulpfile ~\desktop\wordpressify\gulpfile.js
[11:53:59] Starting 'env:build'...
[11:53:59] Starting 'setupEnvironment'...
at makeError (C:\Users\dell\AppData\Roaming\npm-cache_npx\20404\node_modules\wordpressify\node_modules\execa\lib\error.js:59:11)
at handlePromise (C:\Users\dell\AppData\Roaming\npm-cache_npx\20404\node_modules\wordpressify\node_modules\execa\index.js:114:26)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async C:\Users\dell\AppData\Roaming\npm-cache_npx\20404\node_modules\wordpressify\installer\modules\run.js:215:4 {
shortMessage: 'Command failed with exit code 1: npm run env:build',
command: 'npm run env:build',
exitCode: 1,
signal: undefined,
signalDescription: undefined,
stdout: '\n' +
'> [email protected] env:build C:\Users\dell\desktop\wordpressify\n' +
'> gulp env:build\n' +
'\n' +
'[\u001b[90m11:53:59\u001b[39m] Using gulpfile ~\desktop\wordpressify\gulpfile.js\n' +
"[\u001b[90m11:53:59\u001b[39m] Starting 'env:build'...\n" +
"[\u001b[90m11:53:59\u001b[39m] Starting 'setupEnvironment'...",
stderr: "[\u001b[90m11:53:59\u001b[39m] 'setupEnvironment' errored after 3.98 ms\n" +
'[\u001b[90m11:53:59\u001b[39m] TypeError: process.getuid is not a function\n' +
' at setupEnvironment (C:\Users\dell\desktop\wordpressify\gulpfile.js:94:55)\n' +
' at bound (domain.js:426:14)\n' +
' at runBound (domain.js:439:12)\n' +
' at asyncRunner (C:\Users\dell\desktop\wordpressify\node_modules\async-done\index.js:55:18)\n' +
' at processTicksAndRejections (internal/process/task_queues.js:79:11)\n' +
"[\u001b[90m11:53:59\u001b[39m] 'env:build' errored after 8.22 ms\n" +
'npm ERR! code ELIFECYCLE\n' +
'npm ERR! errno 1\n' +
'npm ERR! [email protected] env:build: gulp env:build\n' +
'npm ERR! Exit status 1\n' +
'npm ERR! \n' +
'npm ERR! Failed at the [email protected] env:build script.\n' +
'npm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n' +
'\n' +
'npm ERR! A complete log of this run can be found in:\n' +
'npm ERR! C:\Users\dell\AppData\Roaming\npm-cache\_logs\2020-12-09T10_53_59_761Z-debug.log',
failed: true,
timedOut: false,
isCanceled: false,
killed: false
}`

Hi,
I just followed the installation instructions and got this error at npm run dev:

[Thu Apr 2 14:47:32 2020] 127.0.0.1:60483 [200]: / - parse error, expecting '&'' or "variable (T_VARIABLE)"' in .../build/wordpress/wp-includes/functions.php on line 1081

What could this be?
Thank you

Hi

The build is not compiling. I am using latest version of node and npm. Any pointers please.

[17:27:08] Using gulpfile D:\MW\lex_mini\gulpfile.js
[17:27:08] Starting 'dev'...
[17:27:08] Starting 'setupEnvironment'...
[17:27:08] 'setupEnvironment' errored after 2.7 ms
[17:27:08] TypeError: process.getuid is not a function
at setupEnvironment (D:\MW\lex_mini\gulpfile.js:94:55)
at bound (domain.js:430:14)
at runBound (domain.js:443:12)
at asyncRunner (D:\MW\lex_mini\node_modules\async-done\index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:75:11)
[17:27:08] 'dev' errored after 7.74 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: gulp dev
npm ERR! Exit status 1

I'm curious why the starter files include the following Analytics script:

	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110577987-1"></script>
	<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());

	gtag('config', 'UA-110577987-1');
	</script>

As far as I know, that code is active on every download.

First, thank you for this wonderful contribution! Having a simple, unbranded starting point for something like this is a breath of fresh air.

I should preface these requests by noting that this is not a request for support and there's nothing here that can't be figured out already. This is merely a request for some clarification in a few areas, preferably feedback that might make it into documentation for others to benefit from.

Installation

For starters, when following the docs, step 2 says to change the "template name" by opening gulpfile.js and updating the line below "theme name". Let's say I choose "amazeballs" as the value for the themeName const.

Once saved, WordPressify creates:

• /src/theme
• /src/style/style.css with Theme Name: WordPressify
• /build/wordpress/wp-content/themes/amazeballs
• /build/wordpress/wp-content/themes/amazeballs/style.css with Theme Name: WordPressify
• Function names and hooks prefixed with **wordpressify_**hook_name

You see the disparity between those naming conventions and where I'm going with this, right?

What was not created, however, is a custom plugin folder with boilerplate code similar to the theme it creates.

So, going back to the docs, I begin to wonder if "Template Name" hints at this possibly being a starting point that currently only accommodates theme development (hence the themeName const in gulpfile.js), and if maybe plugin development is planned for future release.

Naming Conventions

I'm a bit confused about the logic surrounding the /src/plugins|theme directories versus /build/wordpress/wp-content/plugins|themes. I understand why /src exists, how to use it, etc. but perhaps it's the naming conventions that causes me confusion.

For instance, if the /src directory is to be used a place for custom theme and plugin development for a single site, and if plugins placed in /src/plugins/ get symlinked to /build/wordpress/wp-content/plugins/, and if a custom-named theme folder is placed in /build/wordpress/wp-content/themes/, then:

• Why isn't /src treated as a custom directory modeled after wp-content with a directory for multiple themes, multiple plugins, and an mu-plugins directory?
• Why just "theme" instead of "themes" in /src?

To keep consistency with WordPress' directory logic, I think /src/js and /src/style should be moved up and into a "shared" or "common" directory, able to be used as a set of consistent front-end build tools for multiple themes and multiple plugins.

Under da Hood

Understanding what's providing the runtime for PHP would be really good to know. Many developers will already have a PHP binary somewhere in their path, and once WordPressify is set up, running which php may say /usr/bin/php or /usr/local/bin/php. The version being run may be 5.4, 5.6, even 7.3. There could also be a legitimate need to know if APCu is available, or Memcached, or Redis. So, where is WordPressify's PHP binary and how can its configuration be modified?

With regard to database needs, why are MySQL/MariaDB required? This is local development, and WordPress has long supported SQLite. It'd be great if the memory-intensive and frustratingly confusing installation process for MySql/MariaDB became a thing of the past. SQLite can be used with PHP's PDO extension and PDO's driver for SQLite. I mean, this is local development for one-off site edits, simple theme editing, plugin modifications... SQLite can be used as a throw-away option and its memory footprint is almost nonexistent.

WP-CLI, SSL, and extra helpers...

There's an awesome package on NPM for WP-CLI. A sample wp-cli.yml file which points its path to build/wordpress would be very very helpful!

SSL support would be great. I've found mkcert to be invaluable for that purpose.

The docs could benefit from a note to export a PATH var that points to node_modules/.bin when first starting.

Forking and PR

That's about it. I've made the above changes to a forked version already if interested or if any clarification is needed. Can send a PR.

Howdy. Is anyone else experiencing issues lately with the custom font size variables preset in the Wordpressify build?

Here is an example of the variables (in variables.css):

--size-hero1-mobile: 52px;
--lineheight-hero1-mobile: 1.35;
--size-hero1-desktop: 62px;
--lineheight-hero1-desktop: 1.15;

For some reason the mixins in mixins.css only pick up the mobile sizes and do not load the media query versions as they should. Here is an example:

@define-mixin h1 {
font-size: var(--size-h1-mobile);
line-height: var(--lineheight-h1-mobile);

@media (--screen-lg) {
	font-size: var(--size-h1-desktop);
	line-height: var(--lineheight-h1-desktop);
}

}

Anything in @media is not registering. Is anyone else experiencing this? I've tried everything I can to solve it and the only way I got it to work was to configure it differently... but I love this setup from @luangjokaj so I'd rather use THAT!

Use underscores for the default theme https://underscores.me/

I think we should remove src folder from git, so when we start modifying contents inside src folder, it doesn't tracked by git.

Perhaps we could move default theme to tools folder. Like the Fresh theme.

Maybe something like this,

gulp.task('default-theme', () => {
	del(['src/**']).then(() => {
		gulp.src('tools/default-theme/**').pipe(gulp.dest('src'));
	});
});

Then, we could add that Gulp task into Setup task,

gulp.task('setup', ['unzip-wordpress', 'copy-config', 'default-theme']);

What do you think @luangjokaj ? Should I make a pull request on this?

On a fresh install, went through the fresh theme and stripped it down and still getting the html boilerplate stuff "A build system designed to automate your WordPress development workflow." and can't seem to locate where this content is coming from. Obviously missing something pretty fundamental here. Thanks for your hard work on this project. Pretty cool.

I have followed the installation, is there any additional step that I should do?

Hey everyone,

I'm having a bit of trouble getting this to run on Windows 7 64-bit. I've got this working without any issues on my Mac, but the server always times-out on windows.

Please assist, thank you!

Docker.
docker/roadmap#142

The build process for WordPressify is quite impressive and boasts a wide array of functionality. It minifies the JavaScript and CSS when a production build is created, but it leaves both bitmaps and vectors unoptimised.

This isn't a drastic issue for most small sites, but some sites use SVGs heavily. Including gulp plugins, such as [gulp-svgmin](https://www.npmjs.com/package/gulp-svgmin) and [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin), would help reduce the filesize of the prod theme greatly.

I have a very simple code in main.js that is bundled in footer-bundle.js, howaver, it dont load in page in dev mode. I tried to clean cache of browser once and it work, but I think that I should not must to do this every time a write a line of code in main.js. And, bisede all of this, other times that I tried to clean cache didnt work any more. Its some thing with gulpfile.js?

ps.: Isn't clear that const themeName need to be the folder name. Is it right? I wast putting the display name, than when a take a look in gulpfile I realized that make more sense the folder name.

How do I change the access to the TinyMCE builder (for Divi Theme Admin) using port 3010? I'm getting the error that it's being accessed at 3020. I understand this is the proxy built in, and most everything else is loading.

Hey, great work here ! I'm impressed and very likely to use it in the future, thanks for sharing that.

I'm just wondering if there would be a way to use that with a preexisting local server (in my case, Local by Flywheel, but the question remains for any other brand of dockerized environment). That would minimize the need for an external MySQL database, and we'd just have to adjust the proxy setting in the gulpfile.

The starter theme looks really nice though. Good job guys.

Hi,

I have followed the install steps:

mkdir wordpressify-test
cd wordpressify-test
npx wordpressify

I am using:

node v15.0.1
npm 7.0.3

Right after the install begins, I am getting the following error:

✔ 1. Creating 🎈 WordPressify files inside →  wordpressifu-test 
⠋ 2. Installing npm packages.../Users/nicalmei/.npm/_npx/1fa8d2c0f0f6a259/node_modules/wordpressify/installer/index.js:59
			throw err;
			^

Error: Command failed with exit code 1: npm install
npm WARN npm npm does not support Node.js v15.0.1
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! cb.apply is not a function

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nicalmei/.npm/_logs/2020-12-18T20_55_45_780Z-debug.log
    at makeError (/Users/nicalmei/.npm/_npx/1fa8d2c0f0f6a259/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/Users/nicalmei/.npm/_npx/1fa8d2c0f0f6a259/node_modules/execa/index.js:114:26)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async /Users/nicalmei/.npm/_npx/1fa8d2c0f0f6a259/node_modules/wordpressify/installer/modules/run.js:211:4 {
  shortMessage: 'Command failed with exit code 1: npm install',
  command: 'npm install',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: '',
  stderr: 'npm WARN npm npm does not support Node.js v15.0.1\n' +
    'npm WARN npm You should probably upgrade to a newer version of node as we\n' +
    "npm WARN npm can't make any promises that npm will work with this version.\n" +
    'npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.\n' +
    'npm WARN npm You can find the latest version at https://nodejs.org/\n' +
    'npm ERR! cb.apply is not a function\n' +
    '\n' +
    'npm ERR! A complete log of this run can be found in:\n' +
    'npm ERR!     /Users/nicalmei/.npm/_logs/2020-12-18T20_55_45_780Z-debug.log',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}

I build a WooCommerce theme but when I was building cart page very decrease reload speed.
I checked the console.
I think this slowdown is due to making WooCommerce JavaScript files.
It would be great if we could exclude some of the plugins.

As I see, your docs are pointing on using npm run scripts. Therefore by doing that gulp is no more required to be global.

Or am I missing something?

Hey,

I noticed that the footer-bundle.js is not enqueued with a type of "module". Is it possible to add this, or an option, to allow import and export when working with ES modules.

Thanks!

How can this be done?
Can phpMyAdmin be added?

It would be nice to have postcss-nested plugin supported in build process. Configuration is quite easy.

After last "IMPROVE: Rename production task" the gulpfile.js has an error on line 204:

exports.prod = series(
copyThemeDev,
copyImagesDev,
copyFontsDev,
stylesDev,
headerScriptsDev,
footerScriptsDev,
pluginsDev,
devServer,
);

It supposed to be:
exports.dev = series(

Can you fix it, plz?

PS: I was surprised and honored when I saw that my Medium article is used on official documentation to help windows users to install and configure this amazing project. Thank you! =)

Hello, I'm new to the world of Wordpress, and I'm a beginner so I don't know the best practices.

I'm currently developing a theme, and I'm adding some gutenberg plugins to it, I use the following commands:

npm install @wordpress/scripts --save-dev
npm start 

this generates me a index.js file inside a build folder that I added by means of

wp_register_script('custom-blocks', get_template_directory_uri().'/build/index.js',array('wp-blocks','wp-editor','wp-data'),microtime(),true);

is there any way to generate and import this file without continually compiling that file? (or should I add it to the gulp process?) or could it be imported directly my jsx type files? by placing it in the assess/js/index.js folder ?

//index.js
import './blocks/quote';

//blocks/quote.js
const {registerBlockType} = wp.blocks;
const {InnerBlocks, RichText} = wp.editor;
registerBlockType("ak/quote", {
  title: "Custom Block",
  description: "this is a description",
  icon: "smiley",
  category: "layout",
  //custom attributes
  attributes: {
    title: {
      type: "string",
      source: "html",
      selector: "h2"
    },
    body: {
      type: "string",
      source: "html",
      selector: "p"
    }
  },
  edit ({attributes, setAttributes}) {
  ...

Given I have previously setup wordpressify, when I run npm run dev and I navigate to http://localhost:3010/wp-admin then I am redirected here http://localhost:3010/wp-login.php?redirect_to=http%3A%2F%2F127.0.0.1%3A3020%2Fwp-admin%2F&reauth=1 and see the wordpressify setup loading screen

Running npm run env:rebuild seems to work as a temporary solution, but the issue keeps coming back. AFIK it's because the system is rebooted.