Merge pull request #10 from suthanbala/feature/refactor-codebase

Feature/refactor codebase

.env

@@ -1,7 +1,10 @@
 # The site domain
 SITE_URL=test.suthanbala.com
 
+# Wordpress Version | For all versions available visit https://hub.docker.com/_/wordpress?tab=tags&page=1
+WP_VERSION=latest
+
 # Database for MYSQL
 DB_USER=root
-MYSQL_DATABASE=suthanbala
+MYSQL_DATABASE=my_wordpress
 MYSQL_ROOT_PASSWORD=mydbP@$$word

.gitignore

@@ -0,0 +1 @@
+/src/node_modules

Dockerfile

@@ -1,42 +1,20 @@
-FROM php:5.6-apache
-
-RUN a2enmod rewrite
-
-# install the PHP extensions we need
-RUN apt-get update && apt-get install -y libpng-dev libjpeg-dev && rm -rf /var/lib/apt/lists/* \
-	&& docker-php-ext-configure gd --with-png-dir=/usr --with-jpeg-dir=/usr \
-	&& docker-php-ext-install gd
-RUN docker-php-ext-install mysqli
-
-# Installing rsync for copying files
-RUN apt-get update && apt-get install -y rsync
-
-# upstream tarballs include ./wordpress/ so this gives us /usr/src/wordpress
-RUN curl -o wordpress.tar.gz -SL https://wordpress.org/latest.tar.gz \
-	&& tar -xzf wordpress.tar.gz --strip-components=1 -C /var/www/html/ \
-	&& rm wordpress.tar.gz \
-	&& chown -R www-data:www-data /var/www/html/
-
-# Install the Node
-RUN curl -sL https://deb.nodesource.com/setup_8.x | bash
-RUN apt-get install -y nodejs
-
+FROM node:latest
 WORKDIR /var/www/html
 
-# Installing Gulp, BrowserSync and other Necessary packages
+# Copying our package.json containing all the necessary dependencies
 COPY package.json /var/www/html/package.json
-RUN npm install -g browser-sync gulp --save-dev
-RUN npm install gulp-sass gulp-concat gulp-rename gulp-uglify gulp-sourcemaps --save-dev
 
-# Links the global packages
-RUN npm link gulp
-RUN npm link browser-sync
+# Installing Gulp, BrowserSync and other necessary packages
+RUN npm i
+
+# Copy all the Gulp related files
+COPY gulp ./gulp
+COPY ./gulpfile.js ./gulpfile.js
 
-COPY docker-entrypoint.sh /entrypoint.sh
-COPY gulpfile.js /var/www/html/gulpfile.js
+# Exposing port 3000 for the page to be served via BrowserSync
+EXPOSE 3000
 
-# grr, ENTRYPOINT resets CMD now
-ENTRYPOINT ["/entrypoint.sh"]
+# Exposing port 3001 for the admin console for BrowserSync
+EXPOSE 3001
 
-# CMD ["apache2-foreground && gulp"]
-CMD ["apache2-foreground"]
+CMD ["npm run watch"]

README.md

@@ -4,25 +4,29 @@
 ![Gulp and SASS](./readme-assets/gulp-sass-logo.png)
 
 # WordPress Docker Gulp
-> If you are one of those people who has to configure Gulp to compile SASS assets, concat and minify JS files, and Hot Reload for every single one of your WordPress projects, then this project is for you. On this project, we've utilized Docker to setup a container with latest version of WordPress and setup Gulp. All you need to do is, run `docker-compose up wordpress` on your terminal and it will fire up the docker running Apache webserver to serve the WordPress and BrowserSync to hot reload. You can then access your site at the domain you've set in the `.env` file, e.g. yourdomain.com (this would be a normal WordPress site without the hot reloading enabled), you can access the hot reloading enabled version of the site at http://yourdomain.com/:3000.
+If you are one of those people who has to configure Gulp to compile SASS assets, concat and minify JS files, and Hot Reload for every single one of your WordPress projects, then this project is for you. On this project, we've utilized Docker to setup a container with latest version of WordPress and setup Gulp. All you need to do is, run `docker-compose up` on your terminal and it will fire up the docker running **Webserver to serve the WordPress** and **Node Server** to compile **SASS to CSS**, minify and concatenate JavaScript and to hot reload.
+
+You can then access your site at the domain you've set in the `.env` file. For example, if you site the `SITE_URL` to be yourdomain.com, then accessin this URL on your browser will bring up the normal WordPress site without the hot reloading enabled. You can access the hot reloading enabled version of the site at http://yourdomain.com/:3000.
 
 ## Features
-- Just worry about the things you are actually modifying for development (`themes` and `plugins` folders from `wp-content`)
+- Just worry about the things you are actually working with (`themes` and `plugins` folders from `wp-content`)
 - Less configuration
 - Comes with the PHPMyAdmin built-in, so you can manage the database
 - You can benefit from what [BrowserSync](https://www.browsersync.io/) has to offer:
-  - Hot reloading
+  - Hot reloading for JavaScripts and Style Injection for CSS changes
   - Mobile Debugging
-  - Your scroll, click, refresh and form actions are mirrored between browsers while you test.
+  - Your scrolls, clicks, refresh and form actions are mirrored between different devices and browsersers
   - ..these are just a few to list, visit [BrowserSync](https://www.browsersync.io/) for more details
 
 ## Installing / Getting started
 
-You may start by cloning the directory to your machine. Naming the project as the domain name is a good practice. If you are working on an existing site, then copy the themes in to `src/themes/`, plugins into `src/plugins/` and the uploads into `src/uploads`. Also, if you have the Database SQL file, then place it inside the `src/initial-db` directory.
+You may start by **cloning** this repo your machine. If you are working on an existing site, then copy the themes in to `src/themes/`, plugins into `src/plugins/` and the uploads into `src/uploads`. Also, if you have the Database SQL file, then place it inside the `src/initial-db` directory.
 
 ```shell
 git clone https://github.com/suthanbala/wordpress-docker-gulp.git dev.yourdomain.com
+git remote rm origin
 ```
+The command above clones the repo to your machine, then disassociate the repo. You can then commit to your own repo.
 
 You should now have the following structure:
 
@@ -32,79 +36,98 @@ dev.yourdomain.com
 └───src
 │   └───themes
 │   └───plugins
+│   └───uploads
+│   └───initial-db
+│   └───...
+└───scripts
+│   └───...
 │   .env
 │   docker-compose.yml
-│   docker-entrypoint.sh
 │   Dockerfile
-│   gulpfile.js
-│   package.json
-│   README.md
+│   ...
 ```
 
-The only location you will need to work are inside the **src** directory
-
-## Configuration
-
-`SITE_URL` in the .env file reflects the domain that you'll be working on. Make sure you add that domain to your host file.
-
-Default Database configuration:
+The work directory will be **src**.
 
-- Username: `root`
-- Password: `example`
-
-## Developing
+## Development
 
 ### Built With
 - [Docker](https://www.docker.com/)
 - [WordPress](https://wordpress.org/)
 - [BrowserSync](http://browsersync.io)
 - [NodeJS](https://nodejs.org/)
+- [SASS](https://sass-lang.com/)
 
-### Prerequisites
+### Pre-requisites
 You must have [Docker](https://www.docker.com/) installed on your machine. Everything outlined in this project gets run within the Docker container. Docker will download them and install them into the container during the build process.
 
+### Setup
 
-### Setting up Dev
-
-You may want to add a `host` entry to your machine, possibly with a prefix to avoid any conflicts may arise when going production. Run `sudo nano /etc/hosts`  in your terminal if you're on Unix/MacOS, or, open NotePad as administrator, then open `C:\Windows\System32\drivers\etc\hosts` if you're on Windows. Then  append the following line `127.0.0.1	dev.yourdomain.com` to the hosts file.
+You may want to add a `host` entry to your machine for the website you'll be creating. Run `sudo nano /etc/hosts`  in your terminal if you're on Unix/MacOS, or, open NotePad as administrator, then open `C:\Windows\System32\drivers\etc\hosts` if you're on Windows. Then  append the following line `127.0.0.1	yourdomain.com` to the hosts file. This will ensure, whenever you hit `yourdomain.com` on your machine, it points to your machine than going out to the internet.
 
 ```shell
 git clone https://github.com/suthanbala/wordpress-docker-gulp.git dev.yourdomain.com
 ```
-Go into the directory and update the `SITE_URL`  in your `.env` file to the domain you're working on. Once that's done, in your terminal, run the following to build the container:
+
+#### Setting the environment
+
+Go into the working directory and update the `SITE_URL` in your `.env`. Make sure you add that domain to your host file [Instructions here](https://support.rackspace.com/how-to/modify-your-hosts-file/). Once that's done, in your terminal, run the following command to build the containers:
 ```
 docker-compose build
 ```
-Now that you have the toolkit ready, you need a skeleton theme to start . I normally start off here, [Underscores](http://underscores.me/), it comes pre-packaged with a lot of WordPress recommended presets, and all necessary templates, HTML5 markup, and even SASS. I recommend you go to [Underscores](http://underscores.me/), expand that advanced options, set the namespaces and most importantly check that `sassify` option. Download the theme, and extract it into the `src/themes/` directory.
 
-Currently two directories are mounted into the projects:
-`src/themes/*` --> `wp-content/themes/`
-`src/plugins/*` --> `wp-content/plugins/`
+Now that you have the toolkit ready, you need a skeleton theme to start . You can create one at [Underscores](http://underscores.me/), it comes pre-packaged with a lot of WordPress recommended presets, and all necessary templates, HTML5 markup, and even SASS. To get the SASS enabled theme, click on **Advanced Options**, then check the `_sassify` option. Download the theme, and extract it into the `src/themes/` directory.
+
+Currently three directories are mounted into the projects:
+
+- `src/themes/*` --> `wp-content/themes/`
+- `src/plugins/*` --> `wp-content/plugins/`
+- `src/uploads/*` --> `wp-content/uploads/`
+
+#### Paths
+Gulp is configured to watch for any JS and SCSS files within your themes. JS is split into two categories, one being the plugins, and the second being the app.js. We separated the plugins so they can be loaded first to the page. Then the app.js can utilize that.
+
+The files must be placed like the following:
+```
+- themes
+│   └───my-theme
+    │   └───src
+        │   └───sass
+            │   └───styles.scss
+            │   └───...
+        │   └───js
+            │   └───script1.js
+            │   └───script2.js
+                │   └───plugins
+                    │   └───jquery.js
+                    │   └───flexslider.js
+    │   └───...
+```
 
 #### Working with SASS
-The project is set to watch for any changes made to any sass files located in the directory **src/themes/yourtheme/sass/** (if you are using Underscores generated theme, then all the SASS files are already in here), and re-compile the **style.scss** and output them into **src/themes/yourtheme/style.css**.
+The project is set to watch for any changes made to any sass files located in the directory **src/themes/yourtheme/src/sass/**. If you are using Underscores generated theme, then please move the `themename/sass` folder into `themename/src/sass`. Gulp watches and compiles the SASS from **src/themes/themename/src/sass/style.scss** to **src/themes/themename/style.css**.
 
-If you have multiple scss files, be sure to import them into the style.scss using `@import`.
+If you have multiple scss files, be sure to import them into the `style.scss` using `@import` directive.
 
 #### Working with JS
-Create a new folder called **src** folder in your **src/themes/yourtheme/js/**. Place all your JavaScript files in that folder (**src/themes/yourtheme/js/src/**).
+Please your Javascripts in the **src/themes/themename/src/js**. If it's a plugin, then place them in **src/themes/themename/src/js/plugins/**. Anything else can go directly in the **src/themes/themename/src/js**. 
 
-The project is set to watch for any changes made in the **src/themes/yourtheme/js/src** folder and create a combined and minified  **src/themes/yourtheme/js/main.js**.
+This ensures we combine and concat all the plugins together and load them ahead of the `app.js`. When we load the `app.js`, we can be sure that all the plugins have been loaded.
+
+Gulp is set to watch for any changes made in the **src/themes/yourtheme/src/js/*.js** folder and create a combined and minified  **src/themes/yourtheme/js/main.min.js**. Also, the **src/themes/yourtheme/src/js/plugins/*.js** folder and create a combined and minified  **src/themes/yourtheme/js/plugins.min.js**
 
 #### Managing Database
-The project comes with the PHPMyAdmin configured to manage the site admin. You can access the PHPMyAdmin at [localhost:8080](http://localhost:8080).
+The project comes with the PHPMyAdmin configured to connect to the MYSQL database without any credentials. You can access the PHPMyAdmin at [localhost:8080](http://localhost:8080).
 
 ### Deploying / Publishing
 
-While developing a WordPress theme, you are only making changes to either theme and plugins folder. Essentially, when you go live, you need to install WordPress, then copy the theme and the plugins from the src directory into the wp-content folder on the server.
-
-During this early phase in the tool, we do not have a sufficient way to do a database/assets export yet. They are coming soon though.
+While developing a WordPress theme, you are only making changes to either theme and plugins folder. However, when you are ready to deploy, you need the WordPress core files and database.
 
-## Versioning
+Not to worry, we have that covered as well. You can run the `./scripts/export_all.sh` bash command. This will copy the WordPress core files and database SQL from the Docker container and place them in the `./build` folder.
 
-We are using [SemVer](http://semver.org/) for versioning.
+You can then upload them to your server.
 
 ## Build
 - To fully export the project, run the `export_all.sh` bash script located in the `scripts` folder. This will export all the source code and the SQL file into the `build` directory.
-- If you just need the database, you can run the `/scripts/export_db.sh` Bash script. This will create a `db.sql` in the `build/sql` directory.
+- If you just need the database, you can run the `/scripts/export_db.sh` Bash script. This will create a `db.sql` in the `build` directory.
 - If you just need the source files to be exported, you can run the `/scripts/export_src.sh` Bash script. This will copy all the source code including the themes, and plugins with the proper WordPress structure in to `build/html` directory.

docker-compose.yml

@@ -1,47 +1,61 @@
-version: '3.1'
+version: "3.1"
 services:
   wordpress:
-    container_name: 'wp'
-    build: .
+    container_name: "wp"
+    image: wordpress:${WP_VERSION}
     restart: unless-stopped
-    links:
-      - mysql
+    depends_on:
+      - mysql-wordpress
     volumes:
       - ./src/themes/:/var/www/html/wp-content/themes
       - ./src/plugins/:/var/www/html/wp-content/plugins
       - ./src/uploads/:/var/www/html/wp-content/uploads
-      - ./build:/build
-      - "node-modules:/var/node_modules"
     ports:
       - 80:80
-      - 3000:3000
-      - 3001:3001
+    env_file:
+      - ./.env
     environment:
-      - WORDPRESS_DB_HOST=mysql
+      - WORDPRESS_DB_HOST=mysql-wordpress
       - WORDPRESS_DB_USER=${DB_USER}
       - WORDPRESS_DB_PASSWORD=${MYSQL_ROOT_PASSWORD}
       - WORDPRESS_DB_NAME=${MYSQL_DATABASE}
-      - SITE_URL=${SITE_URL}
-    command: /bin/bash -c "apache2-foreground & gulp"
-  mysql:
-    container_name: "wp-db"
+  browsersync:
+    container_name: 'browsersync'
+    depends_on: 
+      - wordpress
+    build:
+      context: ./src
+      dockerfile: ../Dockerfile
+    restart: unless-stopped
+    links:
+      - wordpress:${SITE_URL}
+    env_file:
+      - ./.env
+    ports:
+      - 3000:3000
+      - 3001:3001
+    volumes:
+      - ./src/themes/:/var/www/html/themes
+      - ./src/gulp/gulp-tasks:/var/www/html/gulp/gulp-tasks
+      - ./src/gulpfile.js:/var/www/html/gulpfile.js
+    command: "npm run watch"
+  mysql-wordpress:
+    container_name: "mysql-wordpress"
     image: mysql
     restart: unless-stopped
     volumes:
-       - ./build/sql:/build/sql
-       - ./src/initial-db:/docker-entrypoint-initdb.d
+      - ./src/initial-db:/docker-entrypoint-initdb.d
     env_file:
-      - .env
+      - ./.env
+    command: "--default-authentication-plugin=mysql_native_password"
   phpmyadmin:
     image: phpmyadmin/phpmyadmin
     links:
-    - mysql:db
+      - mysql-wordpress:db
     restart: always
     ports:
-     - 8080:80
+      - 8080:80
     environment:
       - PMA_ARBITRARY=1
       - PMA_USER=${DB_USER}
-      - PMA_PASSWORD=${MYSQL_ROOT_PASSWORD}
-volumes:
-  node-modules:
+      - PMA_PASSWORD=${MYSQL_ROOT_PASSWORD}