autofront 3.0.1 → 3.1.1

package/README.md

@@ -49,7 +49,7 @@ The Gulp ones are:
 | Name | Details | Processes |
 | --- | --- | --- |
 | `serve` (default) | Source code runs in a server with live reload. | <ul><li>Bower entry-point files catching.</li><li>Notification and injection of [environment](#environment-variables).</li><li>Compilation (Less, SCSS and Pug)[^1].</li><li>Set up[^2] of HTML5 mode.[^1]</li><li>Insertion of file with app info (`about.json`).</li></ul> |
-| `build` | Production code is built (in folder `dist`). | The above and: <ul><li>Templates caching.[^1]</li><li>Concatenation to one hashed file (CSS and JS).</li><li>Minification (HTML, CSS, JS, images and JSON).</li><li>Console display of files size.</li></ul> |
+| `build` | Production code is built (in folder `dist`). | The above and: <ul><li>Templates caching.[^1]</li><li>Concatenation to one hashed file (CSS and JS).</li><li>CSS purging.</li><li>Transform to compatible CSS (Autoprefixer) and JS (Babel).</li><li>Minification (HTML, CSS, JS, images and JSON).</li><li>Console display of files size.</li></ul> |
 | `serve:dist` | This distributable application is served but without the refreshing. | The same with the folder hidden. |
 
 [^1]: [If it is on](#settings).

package/index.js

@@ -34,6 +34,7 @@ const gulp = require('gulp'),
 	browserSync = require('browser-sync').create(),
 	deleteEmpty = require('delete-empty'),
 	gulpHtmlmin = () => $.htmlmin({ collapseWhitespace: true, conservativeCollapse: true }),
+	gulpPostcss = name => $.postcss([require(name)()]),
 	fs = require('fs'),
 	hidefile = require('hidefile');
 
@@ -336,6 +337,13 @@ function indexDist() {
 }
 indexDist.displayName = 'index:dist';
 
+function purgeCss() {
+	return gulp.src(globs.dist + cssFile)
+		.pipe($.purgecss({ content: [globs.dist + getGlob('html')] }))
+		.pipe(gulp.dest(globs.dist));
+}
+purgeCss.displayName = 'purge-css';
+
 function rebase() {
 	const str = 'url(',
 		quotes = ["'", '"'];
@@ -371,9 +379,14 @@ const clean = gulp.series(cleanFiles, cleanFolders);
 
 const rebaseAndClean = gulp.parallel(rebase, clean);
 
+const compatible = gulp.parallel(
+	getCompatibleTask('css', stream => stream.pipe(gulpPostcss('autoprefixer'))),
+	getCompatibleTask('js', stream => stream.pipe($.babel({ presets: ['@babel/preset-env'], compact: false })))
+);
+
 const minify = gulp.parallel(
 	getMinifyTask('html', stream => stream.pipe(gulpHtmlmin())),
-	getMinifyTask('css', stream => stream.pipe($.postcss([require('cssnano')()]))),
+	getMinifyTask('css', stream => stream.pipe(gulpPostcss('cssnano'))),
 	getMinifyTask('js', stream => {
 		if (getSetting('ng'))
 			stream = stream.pipe($.ngAnnotate());
@@ -396,7 +409,7 @@ finishBuild.displayName = 'finish-build';
 gulp.task('build', gulp.series(
 	setVariables,
 	gulp.parallel(buildTmp, removeFolderDist),
-	copy, templates, indexDist, rebaseAndClean, minify, finishBuild
+	copy, templates, indexDist, purgeCss, rebaseAndClean, compatible, minify, finishBuild
 ));
 
 function hideFolderDist(cb) {
@@ -528,9 +541,17 @@ function browserSyncInit(path) {
 	browserSync.init({ server: path });
 }
 
+function getCompatibleTask(ext, getProcessedStream) {
+	return getProcessingTask('compatible', ext, getProcessedStream);
+}
+
 function getMinifyTask(ext, getProcessedStream, str) {
+	return getProcessingTask('minify', ext, getProcessedStream, str);
+}
+
+function getProcessingTask(prefix, ext, getProcessedStream, str) {
 	const fn = () => getProcessedStream(gulp.src(globs.dist + getGlob(ext)))
 		.pipe(gulp.dest(globs.dist));
-	fn.displayName = 'minify-' + (str || ext);
+	fn.displayName = prefix + '-' + (str || ext);
 	return fn;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autofront",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "description": "Automation of front-end by Gulp and Bower.",
   "main": "index.js",
   "scripts": {
@@ -28,6 +28,9 @@
   },
   "homepage": "https://github.com/mvicens/autofront#readme",
   "dependencies": {
+    "@babel/core": "7.20.5",
+    "@babel/preset-env": "7.20.2",
+    "autoprefixer": "10.4.13",
     "browser-sync": "2.27.10",
     "cssnano": "5.1.14",
     "delete-empty": "2.0.0",
@@ -37,6 +40,7 @@
     "gulp-add-files": "1.0.0",
     "gulp-angular-filesort": "1.2.1",
     "gulp-angular-templatecache": "3.0.1",
+    "gulp-babel": "8.0.0",
     "gulp-clean": "0.4.0",
     "gulp-cssimport": "7.0.0",
     "gulp-filter": "7.0.0",
@@ -51,6 +55,7 @@
     "gulp-notify": "4.0.0",
     "gulp-postcss": "9.0.1",
     "gulp-pug": "5.0.0",
+    "gulp-purgecss": "5.0.0",
     "gulp-rename": "2.0.0",
     "gulp-rev": "9.0.0",
     "gulp-rev-delete-original": "0.2.3",