autofront 2.2.1 → 2.2.3

package/README.md

@@ -64,11 +64,11 @@ Other command options, that appear immediately below, are available. And to use
 
 ### Tasks
 
-Mainly the Gulp ones are the following:
+The Gulp ones are the following:
 
-* `gulp` or `gulp serve` are for running a test server and develop with live reload.
-* `gulp build` only builds production code, the distributable application (`dist` folder).
-* With `gulp serve:dist`, a combination of the above is achieved: Specifically, the server runs that last version but without reload.
+- `gulp` or `gulp serve` are for running a test server and develop with live reload.
+- `gulp build` only builds production code, the distributable application (`dist` folder).
+- With `gulp serve:dist`, a combination of the above is achieved: Specifically, the server runs that last version but without reload.
 
 ### Domains
 
@@ -123,10 +123,7 @@ Any asset (e.g. a PDF document) will keep the location path and, particularly at
 
 ## Pending
 
-Fixes and improvements to do:
+Improvements to do:
 
-* Once the server watch for changes:
-  * Synchronize also the deletion of source files.
-  * Resolve overwriting bug between pure CSS and preprocessors (Less/Sass).
-* Replace Bower as dependency manager.
-* Migrate AngularJS to new [Angular](https://angular.io).
+- Replace Bower as dependency manager.
+- Migrate AngularJS to new [Angular](https://angular.io).

package/index.js

@@ -9,32 +9,39 @@ const gulp = require('gulp'),
 	injStr = $.injectString,
 	gulpSass = $.sass(require('sass')),
 	notifyError = $.notify.onError(error => error.message),
-	browserSync = require('browser-sync').create();
+	browserSync = require('browser-sync').create(),
+	deleteEmpty = require('delete-empty');
 
 let domain = undefined;
 
-const allFiles = getFiles(),
+const allFiles = getGlob(),
 	indexHtmlFile = 'index.html',
+	jsFiles = getGlob('js'),
 	cssFilename = 'index',
-	cssFullFilename = cssFilename + '.css';
-let stylesFolder = 'styles/',
+	cssFile = cssFilename + '.css';
+let stylesDir = 'styles/',
 	jsTemplatesFile = 'scripts/templates.js';
 
-const paths = {
+const globs = {
 	src: 'src/',
 	tmp: '.tmp/',
 	dist: 'dist/'
 };
-paths.srcIndexHtml = paths.src + indexHtmlFile;
-paths.srcSass = paths.src + getFiles('scss');
-paths.srcLess = paths.src + getFiles('less');
-paths.srcJs = paths.src + getFiles('js');
-paths.srcOthers = [paths.src + allFiles, '!' + paths.srcIndexHtml, '!' + paths.srcSass, '!' + paths.srcLess, '!' + paths.srcJs];
+globs.srcIndexHtml = globs.src + indexHtmlFile;
+globs.srcJs = globs.src + jsFiles;
+globs.srcIndexAndSrcJs = [globs.srcIndexHtml, globs.srcJs];
+globs.srcStyles = [globs.src + stylesDir + cssFile, globs.src + getGlob('less'), globs.src + getGlob('scss')];
+globs.srcOthers = [globs.src + allFiles, ...[...globs.srcIndexAndSrcJs, ...globs.srcStyles].map(glob => '!' + glob)];
+globs.tmpAllFiles = globs.tmp + allFiles;
 
 const nl = '\n',
 	tab = '	';
 
-gulp.task('check', () => {
+function clean() {
+	return delDir(globs.tmp);
+}
+
+function manageDomain() {
 	const pckg = require(path.resolve('package.json')),
 		domains = pckg.domains;
 	let domainIndex = args[0] || 'local';
@@ -48,60 +55,124 @@ gulp.task('check', () => {
 		domain = domains[domainIndex];
 	}
 	const isMatched = domain !== undefined;
-	return gulp.src(paths.src)
+	return gulp.src(globs.src, { read: false })
 		.pipe($.notify(isMatched ? `Matching domain: "${domainIndex}".` : 'No domain matched.'));
-});
-
-gulp.task('del', () => delFolder(paths.tmp));
-gulp.task('index-build', () => gulp.src(paths.srcIndexHtml).pipe(injStr.after('<!-- endbuild -->', nl + tab + `<link rel="stylesheet" href="${stylesFolder}${cssFullFilename}">`)).pipe($.inject(gulp.src(paths.srcJs).pipe($.angularFilesort()), { relative: true })).on('error', notifyError).pipe($.wiredep()).pipe($.useref()).pipe(gulp.dest(paths.tmp)));
-gulp.task('index-domain', () => gulp.src(paths.tmp + getFiles('js')).pipe(injStr.replace('{{AUTOFRONT_DOMAIN}}', domain)).pipe(gulp.dest(paths.tmp)));
-gulp.task('index', gulp.series('index-build', 'index-domain'));
-gulp.task('styles', () => {
-	return mergeStream(getCssStream('scss', gulpSass, '@import "variables";'), getCssStream('less', $.less))
-		.pipe($.concat(cssFullFilename))
-		.pipe(gulp.dest(paths.tmp + stylesFolder))
+}
+manageDomain.displayName = 'manage-domain';
+
+function buildIndex() {
+	return gulp.src(globs.srcIndexHtml)
+		.pipe(injStr.after('<!-- endbuild -->', nl + tab + `<link rel="stylesheet" href="${stylesDir + cssFile}">`))
+		.pipe($.inject(gulp.src(globs.srcJs).pipe($.angularFilesort()), { relative: true })).on('error', notifyError)
+		.pipe($.wiredep())
+		.pipe($.useref())
+		.pipe(gulp.dest(globs.tmp));
+}
+buildIndex.displayName = 'build-index';
+
+function injectDomain() {
+	return gulp.src(globs.tmp + jsFiles)
+		.pipe(injStr.replace('{{AUTOFRONT_DOMAIN}}', domain))
+		.pipe(gulp.dest(globs.tmp));
+}
+injectDomain.displayName = 'inject-domain';
+
+const indexAndJs = gulp.series(buildIndex, injectDomain);
+
+function styles() {
+	return mergeStream(getStream('css'), getStream('less', $.less), getStream('scss', gulpSass, '@import "variables";'))
+		.pipe($.concat(cssFile))
+		.pipe(gulp.dest(globs.tmp + stylesDir))
 		.pipe(browserSync.stream());
 
-	function getCssStream(ext, process, extraCode) {
-		return gulp.src(paths.src + stylesFolder + cssFilename + '.' + ext, { allowEmpty: true }).pipe(injStr.prepend((extraCode ? extraCode + nl : '') + '// bower:' + ext + nl + '// endbower' + nl)).pipe($.wiredep()).pipe(process()).on('error', notifyError);
+	function getStream(ext, process, extraCode) {
+		let stream = gulp.src(globs.src + stylesDir + cssFilename + '.' + ext, { allowEmpty: true });
+		if (process)
+			return stream
+				.pipe(injStr.prepend((extraCode ? extraCode + nl : '') + '// bower:' + ext + nl + '// endbower' + nl))
+				.pipe($.wiredep())
+				.pipe(process()).on('error', notifyError);
+		return stream;
 	}
-});
-gulp.task('fonts', () => gulp.src(mainBowerFiles()).pipe(filter(['eot', 'otf', 'svg', 'ttf', 'woff', 'woff2'], true)).pipe(gulp.dest(paths.tmp + 'fonts/')));
-gulp.task('others', () => {
+}
+
+function fonts() {
+	return gulp.src(mainBowerFiles())
+		.pipe(filter(['eot', 'otf', 'svg', 'ttf', 'woff', 'woff2'], true))
+		.pipe(gulp.dest(globs.tmp + 'fonts/'));
+}
+
+function others() {
 	const pugFilter = filter('pug');
-	return gulp.src(paths.srcOthers)
+	return gulp.src(globs.srcOthers)
 		.pipe(pugFilter).pipe($.pug()).on('error', notifyError).pipe(pugFilter.restore)
-		.pipe(gulp.dest(paths.tmp));
-});
-gulp.task('about', () => gulp.src('package.json').pipe($.about()).pipe(gulp.dest(paths.tmp)));
-gulp.task('build:tmp', gulp.series('del', 'check', gulp.parallel('index', 'styles', 'fonts', 'others', 'about')));
-gulp.task('browser', gulp.series('build:tmp', (cb) => {
-	browserSyncInit(paths.tmp);
+		.pipe(gulp.dest(globs.tmp));
+}
+
+function about() {
+	return gulp.src('package.json')
+		.pipe($.about())
+		.pipe(gulp.dest(globs.tmp));
+}
+
+const buildTmp = gulp.series(
+	gulp.parallel(clean, manageDomain),
+	gulp.parallel(indexAndJs, styles, fonts, others, about)
+);
+
+function browser(cb) {
+	browserSyncInit(globs.tmp);
 	cb();
-}));
-gulp.task('serve', gulp.series('browser', () => {
-	gulp.watch([paths.srcIndexHtml, paths.srcJs], gulp.task('index'));
-	gulp.watch([paths.srcSass, paths.srcLess], gulp.task('styles'));
-	gulp.watch(paths.srcOthers, gulp.task('others'));
-	gulp.watch([paths.tmp + allFiles, '!' + paths.tmp + stylesFolder + cssFullFilename], function (cb) {
+}
+
+function watch() {
+	gulp.watch(globs.srcIndexAndSrcJs, indexAndJs);
+	gulp.watch(globs.srcStyles, styles);
+	gulp.watch(globs.srcOthers, others).on('unlink', function (path) {
+		gulp.src(path.replaceAll('\\', '/').replace(globs.src, globs.tmp).replace('.pug', '.html'), { read: false })
+			.pipe($.clean());
+		deleteEmpty(globs.tmp);
+	});
+	gulp.watch([globs.tmpAllFiles, '!' + globs.tmp + stylesDir + cssFile], function (cb) {
 		browserSync.reload();
 		cb();
 	});
-}));
-
-gulp.task('del:dist', () => delFolder(paths.dist));
-gulp.task('copy', gulp.series('del:dist', () => gulp.src(paths.tmp + allFiles).pipe(gulp.dest(paths.dist))));
-gulp.task('templates-build', () => gulp.src([paths.dist + getFiles('html'), '!' + paths.dist + indexHtmlFile]).pipe($.cleanDest(paths.dist)).pipe(minifyHtml()).pipe($.angularTemplatecache(jsTemplatesFile, { module: 'app', transformUrl: function (url) { return url.slice(1); } })).pipe(gulp.dest(paths.dist)));
-gulp.task('templates-clean', () => require('delete-empty')(paths.dist));
-gulp.task('templates', gulp.series('templates-build', 'templates-clean'));
-gulp.task('build', gulp.series('build:tmp', 'copy', 'templates', () => {
+}
+
+gulp.task('serve', gulp.series(buildTmp, browser, watch));
+
+function cleanDist() {
+	return delDir(globs.dist);
+}
+cleanDist.displayName = 'clean:dist';
+
+function copy() {
+	return gulp.src(globs.tmpAllFiles)
+		.pipe(gulp.dest(globs.dist));
+}
+
+function buildTemplates() {
+	return gulp.src([globs.dist + getGlob('html'), '!' + globs.dist + indexHtmlFile])
+		.pipe($.cleanDest(globs.dist))
+		.pipe(minifyHtml())
+		.pipe($.angularTemplatecache(jsTemplatesFile, { module: 'app', transformUrl: function (url) { return url.slice(1); } }))
+		.pipe(gulp.dest(globs.dist));
+}
+buildTemplates.displayName = 'build-templates';
+
+function cleanTemplates() {
+	return deleteEmpty(globs.dist);
+}
+cleanTemplates.displayName = 'clean-templates';
+
+function finishBuild() {
 	const indexHtmlFilter = filter('html'),
 		cssFilter = filter('css'),
 		jsFilter = filter('js'),
 		cssAndJsFilter = filter(['css', 'js']),
 		imgFilter = filter(['png', 'jpg', 'gif', 'svg']),
 		jsonFilter = filter('json');
-	return gulp.src(paths.dist + allFiles)
+	return gulp.src(globs.dist + allFiles)
 		.pipe(indexHtmlFilter).pipe(injStr.before('</body>', `<script src="${jsTemplatesFile}"></script>` + nl)).pipe(minifyHtml()).pipe(indexHtmlFilter.restore)
 		.pipe(cssFilter).pipe($.cssnano({ zindex: false })).pipe(cssFilter.restore)
 		.pipe(jsFilter).pipe($.ngAnnotate()).pipe($.terser()).pipe(jsFilter.restore)
@@ -110,38 +181,46 @@ gulp.task('build', gulp.series('build:tmp', 'copy', 'templates', () => {
 		.pipe(imgFilter).pipe($.imagemin()).pipe(imgFilter.restore)
 		.pipe(jsonFilter).pipe($.jsonmin()).pipe(jsonFilter.restore)
 		.pipe($.size({ showFiles: true }))
-		.pipe(gulp.dest(paths.dist));
-}));
-gulp.task('serve:dist', gulp.series('build', () => browserSyncInit(paths.dist)));
+		.pipe(gulp.dest(globs.dist));
+}
+finishBuild.displayName = 'finish-build';
+
+gulp.task('build', gulp.series(buildTmp, cleanDist, copy, buildTemplates, cleanTemplates, finishBuild));
+
+function browserDist(cb) {
+	browserSyncInit(globs.dist);
+	cb();
+}
+browserDist.displayName = 'browser:dist';
+
+gulp.task('serve:dist', gulp.series('build', browserDist));
 
 gulp.task('default', gulp.task('serve'));
 
 function html5Mode() {
-	const pathPrefix = '/';
-	stylesFolder = pathPrefix + stylesFolder;
-	jsTemplatesFile = pathPrefix + jsTemplatesFile;
+	const prefix = '/';
+	stylesDir = prefix + stylesDir;
+	jsTemplatesFile = prefix + jsTemplatesFile;
 }
 
-function getFiles(ext = '*') {
-	const isArray = typeof ext != 'string';
-	return '**/*.' + (isArray ? '{' : '') + (isArray ? ext.join() : ext) + (isArray ? '}' : '');
+function getGlob(ext = '*') {
+	const glob = '**/*.';
+	if (typeof ext == 'string')
+		return glob + ext;
+	return glob + '{' + ext.join() + '}';
 }
 
-function delFolder(path) {
-	return gulp.src(path, { allowEmpty: true, read: false })
+function delDir(glob) {
+	return gulp.src(glob, { allowEmpty: true, read: false })
 		.pipe($.clean());
 }
 
 function filter(ext, isUnrestored) {
-	return $.filter(getFiles(ext), { restore: !isUnrestored });
+	return $.filter(getGlob(ext), { restore: !isUnrestored });
 }
 
 function browserSyncInit(path) {
-	browserSync.init({
-		server: {
-			baseDir: path
-		}
-	});
+	browserSync.init({ server: path });
 }
 
 function minifyHtml() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autofront",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "Automatisation of front-end by Gulp and Bower.",
   "main": "index.js",
   "scripts": {
@@ -62,5 +62,14 @@
     "main-bower-files": "^2.13.1",
     "merge-stream": "^1.0.1",
     "sass": "^1.38.2"
+  },
+  "domains": {
+    "local": "http://localhost:8081/",
+    "development": "http://dev.mydomain/",
+    "production": "http://mydomain/"
+  },
+  "domainAliases": {
+    "prod": "production",
+    "dev": "development"
   }
 }