Initial commit

.env

+THEME_NAME=theme
+
+DB_NAME=wordpress
+DB_USER=wordpress
+DB_PASSWORD=wordpress

.gitignore

+dist/
+.docker/
+
+# Dependency directories
+node_modules/
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+
+# Optional npm cache directory
+.npm/
+
+# Optional REPL history
+.node_repl_history/

.gitlab-ci.yml

+stages:
+  - build
+  - deploy
+  - build:production
+  - deploy:production
+
+.cache-and-save-artifacts: &cache-and-save-artifacts
+  cache:
+    paths:
+      - node_modules/
+  artifacts:
+    paths:
+      - dist/
+
+build:testing:
+  stage: build
+  script:
+    - node -v
+    - npm -v
+    - npm run build-testing
+  tags:
+    - npm
+  <<: *cache-and-save-artifacts
+  only:
+    - branches
+  except:
+    - master
+
+build:staging:
+  stage: build
+  script:
+    - node -v
+    - npm -v
+    - npm run build-staging
+  tags:
+    - npm
+  <<: *cache-and-save-artifacts
+  only:
+    - master
+
+build:production:
+  stage: build:production
+  script:
+    - node -v
+    - npm -v
+    - npm run build
+  when: manual
+  allow_failure: false
+  tags:
+    - npm
+  <<: *cache-and-save-artifacts
+  only:
+    - master
+
+deploy:review:
+  stage: deploy
+  variables:
+    GIT_STRATEGY: none
+  script:
+    - rsync -rv --delete dist/ /test/$CI_PROJECT_NAME--$CI_COMMIT_REF_SLUG/
+  dependencies:
+    - build:testing
+  tags:
+    - gviagroup-deploy
+  environment:
+    name: review/$CI_COMMIT_REF_NAME
+    url: http://$CI_COMMIT_REF_SLUG.$CI_PROJECT_NAME.test.$DOMAIN
+    on_stop: undeploy:review
+  only:
+    - branches
+  except:
+    - master
+    - dev
+
+deploy:testing:
+  stage: deploy
+  variables:
+    GIT_STRATEGY: none
+  script:
+    - rsync -rv --delete dist/ /test/$CI_PROJECT_NAME/
+  dependencies:
+    - build:testing
+  tags:
+    - gviagroup-deploy
+  environment:
+    name: testing
+    url: http://$CI_PROJECT_NAME.test.$DOMAIN
+    on_stop: undeploy:testing
+  only:
+    - dev
+  except:
+    - tags
+
+deploy:staging:
+  stage: deploy
+  variables:
+    GIT_STRATEGY: none
+  script:
+    - rsync -rv --delete dist/ /demo/$CI_PROJECT_NAME/
+  dependencies:
+    - build:staging
+  tags:
+    - gviagroup-deploy
+  environment:
+    name: staging
+    url: http://$CI_PROJECT_NAME.demo.$DOMAIN
+    on_stop: undeploy:staging
+  only:
+    - master
+
+deploy:production:
+  stage: deploy:production
+  variables:
+    GIT_STRATEGY: none
+  script:
+    - deploy html dist/
+    - deploy --chown
+  dependencies:
+    - build:production
+  tags:
+    - gviagroup-hosting
+  environment:
+    name: production
+    url: $HOSTING_PROJECT_URL
+  only:
+    - master
+
+undeploy:review:
+  stage: deploy
+  variables:
+    GIT_STRATEGY: none
+  script:
+    - rm -rf /test/$CI_PROJECT_NAME--$CI_COMMIT_REF_SLUG
+  when: manual
+  tags:
+    - gviagroup-deploy
+  environment:
+    name: review/$CI_COMMIT_REF_NAME
+    action: stop
+  only:
+    - branches
+  except:
+    - master
+    - dev
+
+undeploy:testing:
+  stage: deploy
+  variables:
+    GIT_STRATEGY: none
+  script:
+    - rm -rf /test/$CI_PROJECT_NAME
+  when: manual
+  tags:
+    - gviagroup-deploy
+  environment:
+    name: testing
+    action: stop
+  only:
+    - dev
+  except:
+    - tags
+
+undeploy:staging:
+  stage: deploy
+  variables:
+    GIT_STRATEGY: none
+  script:
+    - rm -rf /demo/$CI_PROJECT_NAME
+  when: manual
+  tags:
+    - gviagroup-deploy
+  environment:
+    name: staging
+    action: stop
+  only:
+    - master

bs-config.js

+var proxy = require('http-proxy-middleware');
+
+var _proxy = proxy('/', {
+	target: 'http://localhost:2999',
+	changeOrigin: true
+});
+
+module.exports = {
+	files: [
+		'./dist/**/*.{css,html,htm,js,php}'
+	],
+	server: {
+		baseDir: 'dist',
+		middleware: {
+			10: _proxy
+		}
+	},
+	watchOptions: {
+		ignored: ['./**/*', '!./dist/**/*']
+	}
+};

docker-compose.yml

+version: '3'
+
+services:
+  wordpress:
+    image: wordpress
+    ports:
+      - "2999:80"
+    volumes:
+      - ./dist:/var/www/html/wp-content/themes/$THEME_NAME:ro
+      - ./.docker/html:/var/www/html
+    environment:
+      WORDPRESS_DB_NAME: $DB_NAME
+      WORDPRESS_DB_USER: $DB_USER
+      WORDPRESS_DB_PASSWORD: $DB_PASSWORD
+    links:
+      - mysql
+
+  mysql:
+    image: mysql
+    volumes:
+      - ./.docker/mysql:/var/lib/mysql
+    environment:
+      MYSQL_ALLOW_EMPTY_PASSWORD: 1
+      MYSQL_DATABASE: $DB_NAME
+      MYSQL_USER: $DB_USER
+      MYSQL_PASSWORD: $DB_PASSWORD

gulpfile.js

+var browserify = require('browserify');
+var source     = require('vinyl-source-stream');
+
+var gulp      = require('gulp');
+var nano      = require('gulp-cssnano');
+var htmlMin   = require('gulp-htmlmin');
+var inject    = require('gulp-inject-string');
+var less      = require('gulp-less');
+var pug       = require('gulp-pug');
+var rename    = require('gulp-rename');
+var streamify = require('gulp-streamify');
+var uglify    = require('gulp-uglify');
+var gutil     = require('gulp-util');
+
+var failsafe = false;
+
+function isLocal() {
+	return !gutil.env.env;
+}
+function isTesting() {
+	return gutil.env.env === 'testing';
+}
+function isStaging() {
+	return gutil.env.env === 'staging';
+}
+function isProduction() {
+	return gutil.env.env === 'production';
+}
+
+function failsafePipe(pipe, callback) {
+	return failsafe
+		? pipe.on('error', shallow(callback))
+		: pipe;
+}
+function shallow(callback) {
+	return function (error) {
+		callback(error);
+	};
+}
+
+var paths = new function() {
+	this.srcDir  = 'src';
+	this.distDir = 'dist';
+	
+	// Files to be copied to `distDir`
+	this.files = [
+		// this.srcDir + '/folder/**/*' // Copy whole folder with subfolders
+		// this.srcDir + '/file.txt'    // Copy specified file
+		this.srcDir + '/style.css'
+	];
+	
+	this.cssDir   = this.srcDir + '/css';
+	this.cssFiles = this.cssDir + '/**/*.css';
+	
+	this.htmlDir   = this.srcDir;
+	this.html      = this.htmlDir + '/**/*.html';
+	this.htmlFiles = this.html;
+	this.htmlOut   = this.distDir;
+	
+	this.imgDir   = this.srcDir + '/img';
+	this.imgFiles = this.imgDir + '/**/*';
+	this.imgOut   = this.distDir + '/img';
+	
+	this.jsDir   = this.srcDir + '/js';
+	this.js      = this.jsDir + '/index.js';
+	this.jsFiles = this.jsDir + '/**/*.js';
+	this.jsOut   = this.distDir + '/js';
+	
+	this.lessDir   = this.srcDir + '/less';
+	this.less      = this.lessDir + '/index.less';
+	this.lessFiles = this.lessDir + '/**/*.less';
+	this.lessOut   = this.distDir + '/css';
+	
+	this.phpDir   = this.srcDir;
+	this.php      = this.phpDir + '/**/*.php';
+	this.phpFiles = this.php;
+	this.phpOut   = this.distDir;
+	
+	this.pugDir   = this.srcDir + '/pug';
+	this.pug      = [
+		this.pugDir + '/**/*.pug',
+		'!' + this.pugDir + '/includes/**/*',
+		'!' + this.pugDir + '/php/**/*'
+	];
+	this.pugFiles = this.pugDir + '/**/*';
+	this.pugOut   = this.distDir;
+	
+	this.pugPhpDir   = this.srcDir + '/pug/php';
+	this.pugPhp      = this.pugPhpDir + '/**/*.pug';
+	this.pugPhpFiles = this.pugPhpDir + '/**/*';
+	this.pugPhpOut   = this.distDir;
+};
+
+// Files
+
+gulp.task('files-copy', function () {
+	return gulp.src(paths.files, {
+		base: paths.srcDir
+	})
+		.pipe(gulp.dest(paths.distDir));
+});
+gulp.task('files', ['files-copy']);
+
+// Images
+
+gulp.task('img-copy', function () {
+	return gulp.src(paths.imgFiles)
+		.pipe(gulp.dest(paths.imgOut));
+});
+gulp.task('images', ['img-copy']);
+
+// Markup
+
+gulp.task('html-min', function (callback) {
+	return gulp.src(paths.html)
+		.pipe(isLocal() || isTesting()
+			? inject.replace('<!--\\s*?weinre\\s*?-->', '<script async src="http://weinre.dev.gvia.group/target/target-script-min.js"></script>')
+			: gutil.noop())
+		.pipe(isStaging()
+			? inject.replace('<!--\\s*?weinre\\s*?-->', '<script async src="http://weinre.dev.gvia.group/target/target-script-min.js#staging"></script>')
+			: gutil.noop())
+		.pipe(isProduction()
+			? inject.replace('<!--\\s*?weinre\\s*?-->', '')
+			: gutil.noop())
+		.pipe(failsafePipe(htmlMin({
+			collapseWhitespace: true,
+			conservativeCollapse: true
+		}), callback))
+		.pipe(gulp.dest(paths.htmlOut));
+});
+gulp.task('php-min', function (callback) {
+	return gulp.src(paths.php)
+		.pipe(isLocal() || isTesting()
+			? inject.replace('<!--\\s*?weinre\\s*?-->', '<script async src="http://weinre.dev.gvia.group/target/target-script-min.js"></script>')
+			: gutil.noop())
+		.pipe(isStaging()
+			? inject.replace('<!--\\s*?weinre\\s*?-->', '<script async src="http://weinre.dev.gvia.group/target/target-script-min.js#staging"></script>')
+			: gutil.noop())
+		.pipe(isProduction()
+			? inject.replace('<!--\\s*?weinre\\s*?-->', '')
+			: gutil.noop())
+		.pipe(failsafePipe(htmlMin({
+			collapseWhitespace: true,
+			conservativeCollapse: true
+		}), callback))
+		.pipe(gulp.dest(paths.phpOut));
+});
+gulp.task('pug-compile', function (callback) {
+	return gulp.src(paths.pug)
+		.pipe(isLocal() || isTesting()
+			? inject.replace('//-?\\s*?weinre', 'script(async src="http://weinre.dev.gvia.group/target/target-script-min.js")')
+			: gutil.noop())
+		.pipe(isStaging()
+			? inject.replace('//-?\\s*?weinre', 'script(async src="http://weinre.dev.gvia.group/target/target-script-min.js#staging")')
+			: gutil.noop())
+		.pipe(isProduction()
+			? inject.replace('//-?\\s*?weinre', '')
+			: gutil.noop())
+		.pipe(failsafePipe(pug(), callback))
+		.pipe(gulp.dest(paths.pugOut));
+});
+gulp.task('pug-php-compile', function (callback) {
+	return gulp.src(paths.pugPhp)
+		.pipe(isLocal() || isTesting()
+			? inject.replace('//-?\\s*?weinre', 'script(async src="http://weinre.dev.gvia.group/target/target-script-min.js")')
+			: gutil.noop())
+		.pipe(isStaging()
+			? inject.replace('//-?\\s*?weinre', 'script(async src="http://weinre.dev.gvia.group/target/target-script-min.js#staging")')
+			: gutil.noop())
+		.pipe(isProduction()
+			? inject.replace('//-?\\s*?weinre', '')
+			: gutil.noop())
+		.pipe(failsafePipe(pug(), callback))
+		.pipe(rename({
+			extname: '.php'
+		}))
+		.pipe(gulp.dest(paths.pugPhpOut));
+});
+gulp.task('markup', ['html-min', 'php-min', 'pug-compile', 'pug-php-compile']);
+
+// Scripts
+
+gulp.task('js-browserify', function (callback) {
+	return failsafePipe(browserify(paths.js, {
+		debug: isLocal()
+	})
+		.bundle(), callback)
+		.pipe(source('script.all.min.js'))
+		.pipe(!isLocal() ? streamify(failsafePipe(uglify(), callback)) : gutil.noop())
+		.pipe(gulp.dest(paths.jsOut));
+});
+gulp.task('scripts', ['js-browserify']);
+
+// Styles
+
+gulp.task('less-compile', function (callback) {
+	return gulp.src(paths.less)
+		.pipe(failsafePipe(less(), callback))
+		.pipe(!isLocal() ? failsafePipe(nano(), callback) : gutil.noop())
+		.pipe(rename('style.all.min.css'))
+		.pipe(gulp.dest(paths.lessOut));
+});
+gulp.task('styles', ['less-compile']);
+
+// Stages
+
+gulp.task('watch', function () {
+	failsafe = true;
+	gulp.watch(paths.files, ['files']);
+	gulp.watch(paths.imgFiles, ['images']);
+	gulp.watch([paths.htmlFiles, paths.phpFiles, paths.pugFiles], ['markup']);
+	gulp.watch(paths.jsFiles, ['scripts']);
+	gulp.watch([paths.cssFiles, paths.lessFiles], ['styles']);
+});
+
+gulp.task('build', ['files', 'images', 'markup', 'scripts', 'styles']);
+
+gulp.task('default', ['build']);

package.json

+{
+	"name":    "project",
+	"version": "version",
+	
+	"scripts": {
+		"prestart": "npm install",
+		"start":    "gulp && docker-compose up -d && concurrently \"gulp watch\" \"lite-server\"",
+		
+		"build-testing": "npm install && gulp --env testing",
+		"build-staging": "npm install && gulp --env staging",
+		"build":         "npm install && gulp --env production"
+	},
+	
+	"devDependencies": {
+		"browserify":            "^14.4.0",
+		"concurrently":          "^3.4.0",
+		"lite-server":           "^2.3.0",
+		"http-proxy-middleware": "^0.17.4",
+		"gulp-streamify":        "^1.0.2",
+		"vinyl-source-stream":   "^1.1.0",
+		"gulp":                  "^3.9.1",
+		"gulp-cssnano":          "^2.1.2",
+		"gulp-htmlmin":          "^3.0.0",
+		"gulp-inject-string":    "^1.1.0",
+		"gulp-less":             "^3.3.0",
+		"gulp-pug":              "^3.3.0",
+		"gulp-rename":           "^1.2.2",
+		"gulp-uglify":           "^2.1.0",
+		"gulp-util":             "^3.0.8",
+		
+		"jquery": "^3.2.1"
+	}
+}

src/index.php

+<?php
+	define('DIR', get_template_directory_uri());
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Project</title>
+	
+	<script async src="<?php echo DIR; ?>/js/script.all.min.js"></script>
+	<link rel="stylesheet" href="<?php echo DIR; ?>/css/style.all.min.css">
+</head>
+<body>
+<!-- weinre -->
+
+<!-- Code goes here -->
+
+</body>
+</html>

src/js/functions.js

+'use strict';
+
+var $ = require('jquery');
+
+module.exports = {
+	/*
+	 * Functions to be exported go here. Format:
+	 * exportName: functionName
+	 */
+};
+
+// Code goes here

src/js/index.js

+'use strict';
+
+var $ = window.$ = window.jQuery = require('jquery');
+var functions = require('./functions');
+
+/*
+ * Exported in 'functions.js' functions can be used here:
+ * functions.exportName()
+ */
+
+$(function () {
+
+	// Code goes here
+
+});

src/less/global.less

+/*
+ * Global styles go here
+ */

src/less/index.less

+/*
+ * Imports go here
+ * http://lesscss.org/features/#import-options
+ */
+
+@import "global";
+@import "style";
+@import "media";

src/less/media.less

+/*
+ * Styles for different media types/devices go here
+ */

src/less/style.less

+/*
+ * Styles go here
+ */

src/pug/includes/mixins.pug

+mixin template(name)
+	| <?php
+	| /*
+	|  * Template Name: #{name}
+	|  */
+	| ?>
+
+mixin variables
+	| <?php
+	|	define('DIR', get_template_directory_uri());
+	| ?>
+
+mixin head(title)
+	head
+		+variables
+
+		meta(charset="UTF-8")
+		title= title
+
+		script(async src!="<?php echo DIR; ?>/js/script.all.min.js")
+		link(rel="stylesheet" href!="<?php echo DIR; ?>/css/style.all.min.css")
+
+		block

src/pug/php/index.pug

+include ../includes/mixins
+
+doctype html
+html(lang="en")
+	+head('Project')
+	body
+		//- weinre
+
+		// Code goes here

src/style.css

+/*
+Theme Name: Theme
+Author: GVIA Group
+Author URI: https://gvia.group/
+Description: Theme
+Version: 1.0
+*/