MonsterPlay template is developer-friendly and contains source files + gulp tasks.

Make sure, that we will not help you with any troubles that you faced with source builds, so if you don’t have any experience with npm, gulp and webpack, please first learn more about these tools. These sources only for developers.

Requirements

1. Node.js and npm – https://nodejs.org/en/
2. PHP – https://www.sitepoint.com/how-to-install-php-on-windows/ (Mac and Linux users already have PHP installed)

Getting started

1. Unzip downloaded template and open /monsterplay/ folder
2. Install node modules by running the terminal command npm install
3. Start development using npm run dev
4. For build production files use npm run production (don’t forget to change the production config in package.json)

dev and production tasks will build files to /dist/ folder.

Configure Production Task

All production configurations placed in package.json. How it looks by default:

1. Google Analytics code for automatic integration
2. Protection script, that will throw alert automatically, if someone downloads your website code and try to run it on a different domain

You may also disable these configurations, so your code will look like this:

Configure HTML

Configurations for HTML files places in /src/html/data/global.json

Troubleshooting

Sometimes, when you run dev the task, you will only see a white screen in your browser preview. In most cases, this is easily resolved when you install PHP in your system. But sometimes it is not working, and you need to customize the browserSync task manually. To customize it, follow these steps:

1. Open gulpfile.babel.js file in your code/text editor
2. Find this code part:

$.connectPhp.server(gulpConfig.php, () => {
    browserSync(gulpConfig.browserSync);
});

3. And change it to this one:

browserSync.init({
    server: {
        baseDir: gulpConfig.php.base,
        open: true,
        notify: false,
    },
});