Atualizando dependências e adicionando version hash

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "ignorePatterns": ["assets/**/*.js"],
   "env": {
     "browser": true,
     "es2021": true

.stylelintrc.json

@@ -1,3 +1,6 @@
 {
-	"extends": "stylelint-config-wordpress/scss"
-}
+	"extends": "stylelint-config-wordpress/scss",
+  "ignoreFiles": [
+    "assets/**/*.css"
+  ]
+}

README.md

@@ -11,17 +11,17 @@ Tema base para projetos WordPress feitos na Din Digital.
 
 ### O que o Starter WP possui?
 
-Biblioteca | Versão | Complementares
---- | --- | ---
-Node.js | 16.13.2 | 
-Gulp | 4.0.2 | gulp-autoprefixer (7.0.1), gulp-babel (8.0.0-beta.2), gulp-better-rollup (4.0.1), gulp-clean-css (4.2.0), gulp-concat (2.6.1), gulp-penthouse (0.2.0), gulp-postcss (8.0.0), gulp-sass (4.0.2), gulp-sourcemaps (2.6.5), gulp-uglify (3.0.2)
-Babel | 7.7.2 |
-jQuery | 3.4.1 | 
-Normalize | 8.0.1 |
-Prettier | 2.5.1 | @prettier/plugin-php (0.18.3)
-ESLint | 8.10.0 | eslint-config-airbnb-base (15.0.0), eslint-config-prettier (8.5.0), eslint-plugin-import (2.25.4), eslint-plugin-prettier (4.0.0)
-StyleLint | 13.13.1 | stylelint-config-wordpress (17.0.0)
-Husky | 7.0.4 | 
+| Biblioteca | Versão  | Complementares                                                                                                                                                                                                                               |
+| ---------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Node.js    | 16.13.2 |
+| Gulp       | 4.0.2   | gulp-autoprefixer (7.0.1), gulp-babel (8.0.0-beta.2), gulp-better-rollup (4.0.1), gulp-clean-css (4.2.0), gulp-concat (2.6.1), gulp-penthouse (0.2.0), gulp-postcss (8.0.0), gulp-sass (4.0.2), gulp-sourcemaps (2.6.5), gulp-uglify (3.0.2) |
+| Babel      | 7.7.2   |
+| jQuery     | 3.4.1   |
+| Normalize  | 8.0.1   |
+| Prettier   | 2.5.1   | @prettier/plugin-php (0.18.3)                                                                                                                                                                                                                |
+| ESLint     | 8.10.0  | eslint-config-airbnb-base (15.0.0), eslint-config-prettier (8.5.0), eslint-plugin-import (2.25.4), eslint-plugin-prettier (4.0.0)                                                                                                            |
+| StyleLint  | 13.13.1 | stylelint-config-wordpress (17.0.0)                                                                                                                                                                                                          |
+| Husky      | 7.0.4   |
 
 ### Instalação
 
@@ -38,7 +38,7 @@ $ git init
 ```
 
 Atualizar versão do Node para 16.13.2, com [NVM](https://github.com/nvm-sh/nvm), e rodar `npm install` para instalar as dependências.
- 
+
 #### Instalação em projetos existentes
 
 Para projetos já existentes, o melhor a se fazer é instalar as libs de padronização, linters e tasks do Gulp para evitar conflitos com plugins e páginas.
@@ -59,6 +59,10 @@ Crie o arquivo `.stylelintrc.json` com o [conteúdo do arquivo](https://github.c
 
 Crie o arquivo `.editorconfig` com o [conteúdo do arquivo](https://github.com/dindigital/starter-wp/blob/master/.editorconfig).
 
+##### Version Hash
+
+Todos os assets adicionados ao Gulpfile recebem uma hash e os mesmos precisam ser adicionados ao arquivo `/includes/functions/scripts.php` para funcionarem no projeto.
+
 ###### Informações complementares
 
 Para mais informações, as instalações foram feitas [seguindo este tutorial](https://marioyepes.com/eslint-prettier-wordpress-config/).

assets/assets.json

@@ -0,0 +1 @@
+{"vendor.js":"vendor-b82d238d.js","main.js":"main-7fee81cf.js","main.css":"main-261750ff.css"}

gulpfile.js

@@ -3,57 +3,99 @@ const { parallel, src, dest, watch } = require('gulp');
 const concat = require('gulp-concat');
 const babel = require('gulp-babel');
 const uglify = require('gulp-uglify');
-const sass = require('gulp-sass');
+const sass = require('gulp-sass')(require('sass'));
 const sourcemaps = require('gulp-sourcemaps');
 const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
-const precss = require('precss');
 const shortColor = require('postcss-short-color');
 const cleanCSS = require('gulp-clean-css');
 const rollup = require('gulp-better-rollup');
 const resolve = require('rollup-plugin-node-resolve');
 const commonjs = require('rollup-plugin-commonjs');
+const criticalCss = require('gulp-penthouse');
+const hash = require('gulp-hash');
 
 // Folders
 const npm = 'node_modules';
 const dist = 'assets';
 
 // Vendors
 const vendors = {
-	js: [`${npm}/slick-carousel/slick/slick.min.js`],
+	js: [`${npm}/jquery/dist/jquery.min.js`],
 };
 
-function vendorJS(cb) {
-	src(vendors.js)
+const vendorJS = () => {
+	return src(vendors.js)
 		.pipe(concat('vendor.js'))
-		.pipe(dest(`${dist}/js`));
-	cb();
-}
+		.pipe(hash())
+		.pipe(dest(`${dist}/js`))
+		.pipe(
+			hash.manifest('./assets/assets.json', {
+				// Generate the manifest file
+				deleteOld: true,
+				sourceDir: `${__dirname}/${dist}/js`,
+			})
+		)
+		.pipe(dest('.'));
+};
 
 // Assets
 const assets = {
 	scss: 'src/scss/*.scss',
 	js: ['src/js/main.js'],
 };
 
-function css(cb) {
-	src(assets.scss)
-		.pipe(sourcemaps.init())
+const critical = () => {
+	return src('./assets/css/main.css')
+		.pipe(
+			criticalCss({
+				out: 'critical.php', // output file name
+				url: '', // url from where we want penthouse to extract critical styles
+				width: 1440, // max window width for critical media queries
+				height: 1080, // max window height for critical media queries
+				userAgent: 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)', // pretend to be googlebot when grabbing critical page styles.
+			})
+		)
+		.pipe(cleanCSS())
+		.pipe(dest(`${dist}/css/criticalcss.php`));
+};
+
+const css = () => {
+	return src(assets.scss)
 		.pipe(
 			sass({
 				includePaths: ['node_modules'],
 				outputStyle: 'compressed',
 			}).on('error', sass.logError)
 		)
-		.pipe(sourcemaps.write())
 		.pipe(cleanCSS())
-		.pipe(postcss([precss, autoprefixer(), shortColor]))
+		.pipe(postcss([autoprefixer(), shortColor]))
+		.pipe(hash())
+		.pipe(dest(`${dist}/css`))
+		.pipe(
+			hash.manifest('./assets/assets.json', {
+				// Generate the manifest file
+				deleteOld: true,
+				sourceDir: `${__dirname}/${dist}/css`,
+			})
+		)
+		.pipe(dest('.'));
+};
+
+const cssWatch = () => {
+	return src(assets.scss)
+		.pipe(sourcemaps.init())
+		.pipe(
+			sass({
+				includePaths: ['node_modules'],
+			}).on('error', sass.logError)
+		)
+		.pipe(sourcemaps.write())
 		.pipe(dest(`${dist}/css`));
-	cb();
-}
+};
 
-const js = cb => {
-	src(assets.js, {
+const js = () => {
+	return src(assets.js, {
 		sourcemaps: false,
 	})
 		.pipe(rollup({ plugins: [babel(), resolve(), commonjs()] }, 'umd'))
@@ -63,18 +105,34 @@ const js = cb => {
 				compress: true,
 			})
 		)
+		.pipe(hash())
+		.pipe(dest(`${dist}/js`))
+		.pipe(
+			hash.manifest('./assets/assets.json', {
+				// Generate the manifest file
+				deleteOld: true,
+				sourceDir: `${__dirname}/${dist}/js`,
+			})
+		)
+		.pipe(dest('.'));
+};
+
+const jsWatch = () => {
+	return src(assets.js, {
+		sourcemaps: true,
+	})
+		.pipe(rollup({ plugins: [babel(), resolve(), commonjs()] }, 'umd'))
 		.pipe(dest(`${dist}/js`));
-	cb();
 };
 
 // Watch
-exports.watch = cb => {
-	watch('src/scss/**/*.scss', parallel(css));
-	watch('src/js/**/*.js', js);
-	cb();
+exports.watch = () => {
+	watch('src/scss/**/*.scss', parallel(cssWatch));
+	watch('src/js/**/*.js', jsWatch);
 };
 
 exports.js = js;
+exports.critical = critical;
 exports.vendorJS = vendorJS;
 exports.vendors = parallel(vendorJS);
 exports.css = css;

includes/functions/scripts.php

@@ -4,14 +4,16 @@ function custom_js()
 {
 	global $theme_uri;
 	$post_type = get_post_type();
+	$json_versions = file_get_contents("{$theme_uri}/assets/assets.json");
+	$versions = json_decode($json_versions, true);
 
 	if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {
-		$mainJS = '/assets/js/main.js';
-		wp_register_script('main', $theme_uri . $mainJS, []);
+		$mainJS = "{$theme_uri}/assets/js/{$versions['main.js']}";
+		wp_register_script('main', $mainJS, [], null);
 		wp_enqueue_script('main');
 
-		$vendorJS = '/assets/js/vendor.js';
-		wp_register_script('vendor', $theme_uri . $vendorJS, []);
+		$vendorJS = "{$theme_uri}/assets/js/{$versions['vendor.js']}";
+		wp_register_script('vendor', $vendorJS, [], null);
 		wp_enqueue_script('vendor');
 	}
 }
@@ -21,10 +23,12 @@ function custom_css()
 {
 	global $theme_uri;
 	$post_type = get_post_type();
+	$json_versions = file_get_contents("{$theme_uri}/assets/assets.json");
+	$versions = json_decode($json_versions, true);
 
 	if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {
-		$mainCSS = '/assets/css/main.css';
-		wp_register_style('main-css', $theme_uri . $mainCSS, []);
+		$mainCSS = "{$theme_uri}/assets/css/{$versions['main.css']}";
+		wp_register_style('main-css', $mainCSS, [], null);
 		wp_enqueue_style('main-css');
 	}
 }