Merge pull request #3 from csalmeida/rollup-bundling

Rollup Script Bundling

.gitignore

@@ -5,9 +5,6 @@ wp-content/themes/index.php
 wp-content/plugins/index.php
 wp-content/index.php
 
-### Wordpress Plugins ###
-wp-content/plugins
-
 ### Advanced Custom Fields ###
 wp-content/plugins/advanced-custom-fields
 wp-content/plugins/advanced-custom-fields-pro
@@ -191,6 +188,7 @@ wp-content/uploads/
 wp-content/mu-plugins/
 wp-content/languages/
 wp-content/wp-cache-config.php
+wp-content/plugins
 wp-content/plugins/hello.php
 
 wp-includes/

README.md

@@ -24,17 +24,22 @@ Create a database and either add the details to a `wp-config.php` file or setup
 > A webserver with php and mysql installed is required in order to follow these steps.
 
 Navigate to the theme directory and download dependencies (requires `Node`):
-```
+
+```bash
 cd wp-content/themes/hozokit
 npm install
 ```
 
 When changing scripts and styling run the following commands (might require `gulp-cli` installed globally):
-```
+
+```bash
+npm start
+# or
 npm run watch
 ```
 In order to build without watching for changes:
-```
+
+```bash
 npm run build
 ```
 > See `gulpfile.js` for all tasks.
@@ -64,7 +69,9 @@ When styling components it is important that they have their own [`class`](https
 When styling components make sure to run `npm run watch` from the terminal in order to update styles. There is no hot reloading so you still need to refresh the page in order to see the results.
 
 ## Creating scripts
-Scripts should be imported into `/scripts/index.js`, ECMAScript 2015+ (ES6) is supported as similar to the styling, [scripts are being transpiled](https://babeljs.io/) and then bundled into a single file at `assets/scripts/main.js`.
+Scripts should be imported into `/scripts/index.js`, ECMAScript 2015+ (ES6) is supported as similar to the styling, [scripts are being transpiled](https://babeljs.io/) and then bundled into a single file at `assets/scripts/bundle.js`.
+
+Scripts can be splited into multiple files and imported as needed.
 
 ### Supporting and maintaining the project
 Please feel free to ask any questions, add suggestions or point out bugs by creating an issue. Pull requests are welcome as well! Thank you 🙇🏻

wp-content/themes/hozokit/assets/scripts/bundle.js

@@ -0,0 +1 @@
+"use strict";console.info("Hozokit");

wp-content/themes/hozokit/functions.php

@@ -10,9 +10,10 @@
  // Insert styles and scripts to be used in the theme.
  // The stylesheet is compiled from SASS files in /styles, scripts from /scripts using Gulp.
  function loadStylesAndScripts() {
+ $theme_version = wp_get_theme()['Version'];
  wp_enqueue_style( 'normalize', get_template_directory_uri() . '/assets/css/normalize.css' );
  wp_enqueue_style( 'style', get_stylesheet_uri() );
- wp_register_script( 'script', get_template_directory_uri() . '/assets/scripts/main.js', "", '1.0', true );
+ wp_register_script( 'script', get_template_directory_uri() . '/assets/scripts/bundle.js', "", $theme_version, true );
  wp_enqueue_script('script');
  $translation_array = array( 'templateUrl' => get_template_directory_uri() );
  //after wp_enqueue_script

wp-content/themes/hozokit/gulpfile.js

@@ -1,25 +1,36 @@
 const gulp = require('gulp')
-const babel = require('gulp-babel')
 const concat = require('gulp-concat')
-const uglify = require('gulp-uglify')
 const sass = require('gulp-sass')
 const cleanCSS = require('gulp-clean-css')
 const rename = require('gulp-rename')
 const clean = require('gulp-clean')
+const rollup = require('rollup')
+const rollupTerser = require('rollup-plugin-terser')
+const rollupResolve = require('@rollup/plugin-node-resolve')
+const rollupBabel = require('rollup-plugin-babel')
 
 /*
- Transpiles JavaScript files,
- concatenates as needed, (this might not be necessary)
- minifies and exports them.
+ Transpiles JavaScript files using Rollup.
 */
 gulp.task('scripts', () => {
- return gulp.src("./scripts/index.js")
- .pipe(babel({
- presets: ['@babel/env']
- }))
- .pipe(concat('main.js'))
- .pipe(uglify())
- .pipe(gulp.dest('./assets/scripts'))
+ return rollup.rollup({
+ input: './scripts/index.js',
+ plugins: [
+ rollupResolve(),
+ rollupBabel({
+ exclude: 'node_modules/**' // only transpile our source code
+ }),
+ ]
+ }).then(bundle => {
+ return bundle.write({
+ file: './assets/scripts/bundle.js',
+ format: 'cjs',
+ name: 'version',
+ plugins: [
+ rollupTerser.terser(),
+ ],
+ })
+ })
 })
 
 /*
@@ -87,4 +98,4 @@ gulp.task('watch', () => {
 })
 
 /* Compiles all files. */
-gulp.task('build', gulp.series(['scripts', 'styles', 'block-styles']))
+gulp.task('build', gulp.series(['scripts', 'styles', 'block-styles']))