autofront 3.0.0 → 3.1.0

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');
 
@@ -55,7 +56,6 @@ const allFiles = getGlob(),
 	jsFile = 'index.js';
 let stylesDir,
 	stylesFilename,
-	stylesCssFile,
 	cssExtensions = [];
 
 const globs = {
@@ -83,7 +83,6 @@ setDefaultEnv.displayName = 'set-default-env';
 function setVariables(cb) {
 	stylesDir = getSetting('cssFolder');
 	stylesFilename = getSetting('filename');
-	stylesCssFile = stylesDir + cssFile;
 
 	for (const cssExt of [
 		{
@@ -322,7 +321,7 @@ function templates() {
 
 function indexDist() {
 	const replaces = Object.entries({
-		[cssComment]: `<!-- build:css ${stylesCssFile} -->`,
+		[cssComment]: `<!-- build:css ${cssFile} -->`,
 		[endCssComment]: '<!-- endbuild -->',
 		[jsComment]: `<!-- build:js ${jsFile} defer -->`,
 		[endJsComment]: '<!-- endbuild -->'
@@ -338,21 +337,28 @@ function indexDist() {
 }
 indexDist.displayName = 'index:dist';
 
-function rebaseCss() {
-	return gulp.src(globs.dist + stylesCssFile)
-		.pipe($.rebaseCssUrls(globs.dist))
+function purgeCss() {
+	return gulp.src(globs.dist + cssFile)
+		.pipe($.purgecss({ content: [globs.dist + getGlob('html')] }))
 		.pipe(gulp.dest(globs.dist));
 }
-rebaseCss.displayName = 'rebase-css';
-
-function rebaseHtml() {
-	return gulp.src(globs.distIndexFile)
-		.pipe($.injectString.replace(` href="${stylesCssFile}"`, ` href="${cssFile}"`))
-		.pipe(gulp.dest(globs.dist));
+purgeCss.displayName = 'purge-css';
+
+function rebase() {
+	const str = 'url(',
+		quotes = ["'", '"'];
+	let stream = gulp.src(globs.dist + cssFile)
+		.pipe(replace(str + '\\s*', str));
+	for (char of ['', ...quotes])
+		for (str2 of ['http://', 'https://', '//', '/', 'data:', '#'])
+			stream = stream.pipe(replace(str + char + str2, str + tab + char + str2));
+	stream = stream
+		.pipe(replace(str, str + stylesDir))
+		.pipe(replace(str + stylesDir + tab, str));
+	for (quote of quotes)
+		stream = stream.pipe(replace(str + stylesDir + quote, str + quote + stylesDir));
+	return stream.pipe(gulp.dest(globs.dist));
 }
-rebaseHtml.displayName = 'rebase-html';
-
-const rebase = gulp.parallel(rebaseCss, rebaseHtml);
 
 function cleanFiles() {
 	return gulp.src([
@@ -371,9 +377,16 @@ cleanFolders.displayName = 'clean-folders';
 
 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, rebase, clean, 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.0",
+  "version": "3.1.0",
   "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,7 +55,7 @@
     "gulp-notify": "4.0.0",
     "gulp-postcss": "9.0.1",
     "gulp-pug": "5.0.0",
-    "gulp-rebase-css-urls": "0.0.2",
+    "gulp-purgecss": "5.0.0",
     "gulp-rename": "2.0.0",
     "gulp-rev": "9.0.0",
     "gulp-rev-delete-original": "0.2.3",