autofront 3.1.1 → 3.1.3

package/README.md

@@ -84,7 +84,7 @@ autofront.property2.subproperty4 = value3;
 
 Defining with:
 
-| Property | Subprop. | | Type | Details | Default |
+| Property | Subprop. | <!-- 〃 --> | Type | Details | Default |
 | --- | --- | --- | --- | --- | --- |
 | `html` | `pug` | | Boolean | [Pug](https://pugjs.org) activated? | `false` |
 | `css` | `folder` | | String | Directory that contains CSS files. | `'styles/'` |
@@ -100,4 +100,27 @@ Defining with:
 | <!-- 〃 --> | <!-- 〃 --> | `template` | Boolean | Templates loaded by [`$templateCache`](https://docs.angularjs.org/api/ng/service/$templateCache)? | `true` |
 | <!-- 〃 --> | `envs` | | Object | Environment variables list, with names as keys and data (whatever can be JSON parsed) as values. | `{}` |
 
-[^3]: It can be disabled assigning a falsy value.
+[^3]: It can be disabled assigning a falsy value.
+
+## Pending
+
+Fixes and improvements to do:
+
+- Achieve detection of unnamed files (like `.gitkeep`, `.nomedia`...).
+- Implement new settings, such as:
+  - `js`:
+    - Folder (`scripts/`) where to locate source code from Bower (`.tmp`), to avoid conflicts with own files in `src`.
+    - Indication about when Babel compilation (during serve or build?).
+    - List of CDNs to load.
+  - Exclusion folder(s) (whose any files will be forcely treated as "others").
+- Settings changes (major releases):
+  - All "extra" (not HTML, CSS or JS) languages/libraries defaultly disabled?
+  - No CSS preprocessors configured? To activate one, pass info: extension file, Gulp plugin...
+- Use [Gulp If](https://www.npmjs.com/package/gulp-if), [Gulp Plumber](https://www.npmjs.com/package/gulp-plumber), [Gulp Newer](https://www.npmjs.com/package/gulp-newer), [Gulp Changed](https://www.npmjs.com/package/gulp-changed), [Gulp Count](https://www.npmjs.com/package/gulp-count)...?
+- Support:
+  - Markdown (compilation to HTML).
+  - [React](https://reactjs.org) (JSX), [Vue](https://vuejs.org)...?
+  - [Stylus](https://stylus-lang.com) and other CSS preprocessors?
+- Avoid to build distributable CSS if no content?
+- Create Gulp task to add new folder with files of template, AngularJS controller and styles in directory `app/`?
+- Use [Typrod](https://github.com/mvicens/typrod) as Bower dependency in demo.

package/index.js

@@ -49,8 +49,8 @@ const allFiles = getGlob(),
 	cssComment = '<!-- autofrontcss -->',
 	endCssComment = '<!-- endautofrontcss -->',
 	jsComment = '<!-- autofrontjs -->',
-	html5ModeJsFile = scriptsDir + 'html5-mode.js',
-	jsTemplatesFile = scriptsDir + 'templates.js',
+	html5ModeFile = scriptsDir + 'html5-mode.js',
+	templatesFile = scriptsDir + 'templates.js',
 	endJsComment = '<!-- endautofrontjs -->',
 	cssFile = 'index.css',
 	jsFile = 'index.js';
@@ -64,12 +64,15 @@ const globs = {
 	dist: 'dist/'
 };
 globs.hiddenDist = '.' + globs.dist;
+globs.srcStyles = globs.src;
 globs.srcIndex = globs.src + indexFile;
-globs.srcJs = globs.src + jsFiles;
+globs.srcJss = globs.src + jsFiles;
 globs.srcOthers = [globs.src + allFiles];
-globs.tmpAllFiles = globs.tmp + allFiles;
-globs.distIndexFile = globs.dist + indexFile;
-globs.distTmpls = [globs.dist + getGlob('html'), '!' + globs.distIndexFile];
+globs.tmpAll = globs.tmp + allFiles;
+globs.tmpStyles = globs.tmp;
+globs.distIndex = globs.dist + indexFile;
+globs.distTmpls = [globs.dist + getGlob('html'), '!' + globs.distIndex];
+globs.distCss = globs.dist + cssFile;
 
 const nl = '\r\n',
 	tab = '	';
@@ -83,6 +86,8 @@ setDefaultEnv.displayName = 'set-default-env';
 function setVariables(cb) {
 	stylesDir = getSetting('cssFolder');
 	stylesFilename = getSetting('filename');
+	for (const prop of ['srcStyles', 'tmpStyles'])
+		globs[prop] += stylesDir;
 
 	for (const cssExt of [
 		{
@@ -98,8 +103,8 @@ function setVariables(cb) {
 			name: 'scss',
 			process: $.sass(require('sass')),
 			getExtraCode: () => {
-				const file = globs.src + stylesDir + getSetting('variables') + '.scss';
-				return fileExists(file) ? `@import "${file}";` : '';
+				const file = globs.srcStyles + getSetting('variables') + '.scss';
+				return fileExists(file) ? `@import "./${file}";` : '';
 			},
 			isPreprocessor: true
 		}
@@ -110,13 +115,13 @@ function setVariables(cb) {
 	}
 	cssExtensions = cssExtensions.sort((a, b) => a.order - b.order);
 
-	const srcStyles = [];
+	const srcStylesFiles = [];
 	for (const cssExt of cssExtensions) {
 		const glob = globs.src + getGlob(cssExt.name);
-		srcStyles.push(glob);
+		srcStylesFiles.push(glob);
 		cssExt.glob = glob;
 	}
-	globs.srcOthers.push(...[globs.srcIndex, globs.srcJs, ...srcStyles].map(glob => '!' + glob));
+	globs.srcOthers.push(...[globs.srcIndex, globs.srcJss, ...srcStylesFiles].map(glob => '!' + glob));
 
 	cb();
 }
@@ -171,11 +176,11 @@ function index() {
 	);
 	if (getSetting('html5Mode')) {
 		strs.unshift('<base href="/">');
-		strs.push(getScriptTag(html5ModeJsFile));
+		strs.push(getScriptTag(html5ModeFile));
 	}
 	strs.push(endJsComment);
 
-	let stream = gulp.src(globs.srcJs);
+	let stream = gulp.src(globs.srcJss);
 	if (getSetting('ng'))
 		stream = stream.pipe($.angularFilesort());
 
@@ -188,7 +193,7 @@ function index() {
 }
 
 function js() {
-	return gulp.src(globs.srcJs)
+	return gulp.src(globs.srcJss)
 		.pipe(replace('AUTOFRONT_ENV', JSON.stringify(envValue, undefined, tab)))
 		.pipe(gulp.dest(globs.tmp));
 }
@@ -206,9 +211,10 @@ const styles = gulp.parallel(css, less, scss);
 function html5Mode(cb) {
 	if (getSetting('html5Mode'))
 		return $.addFiles([{
-			name: html5ModeJsFile,
+			name: html5ModeFile,
 			content: `(function () {
-	angular.module('${getSetting('module')}')
+	angular
+		.module('${getSetting('module')}')
 		.config(config);
 
 	function config($locationProvider) {
@@ -264,7 +270,7 @@ function reload(cb) {
 
 function watch() {
 	gulp.watch(globs.srcIndex, index);
-	gulp.watch(globs.srcJs)
+	gulp.watch(globs.srcJss)
 		.on('add', indexAndJs)
 		.on('change', gulp.series(js))
 		.on('unlink', gulp.series(index))
@@ -278,7 +284,7 @@ function watch() {
 		.on('change', gulp.series(others))
 		.on('unlink', path => { delFile(path, replaceExt); });
 
-	gulp.watch([globs.tmpAllFiles, '!' + globs.tmp + stylesDir + getGlob('css')], reload).on('unlink', () => { deleteEmpty(globs.tmp); });
+	gulp.watch([globs.tmpAll, '!' + globs.tmpStyles + getGlob('css')], reload).on('unlink', () => { deleteEmpty(globs.tmp); });
 
 	function delFile(path, fn) {
 		path = path.replaceAll('\\', '/').replace(globs.src, globs.tmp);
@@ -295,7 +301,7 @@ function watch() {
 	}
 }
 
-gulp.task('serve', gulp.series(
+defineTask('serve', gulp.series(
 	gulp.parallel(setDefaultEnv, setVariables),
 	buildTmp, browser, watch
 ));
@@ -306,7 +312,7 @@ function removeFolderDist() {
 removeFolderDist.displayName = 'remove-folder:dist';
 
 function copy() {
-	return gulp.src(globs.tmpAllFiles)
+	return gulp.src(globs.tmpAll)
 		.pipe($.size())
 		.pipe(gulp.dest(globs.dist));
 }
@@ -315,7 +321,7 @@ function templates() {
 	let stream = gulp.src(globs.distTmpls)
 		.pipe(gulpHtmlmin());
 	if (getSetting('template'))
-		stream = stream.pipe($.angularTemplatecache(jsTemplatesFile, { module: getSetting('module'), transformUrl: url => url.slice(1) }));
+		stream = stream.pipe($.angularTemplatecache(templatesFile, { module: getSetting('module'), transformUrl: url => url.slice(1) }));
 	return stream.pipe(gulp.dest(globs.dist));
 }
 
@@ -326,9 +332,9 @@ function indexDist() {
 		[jsComment]: `<!-- build:js ${jsFile} defer -->`,
 		[endJsComment]: '<!-- endbuild -->'
 	});
-	let stream = gulp.src(globs.distIndexFile);
-	if (getSetting('template') && fileExists(globs.dist + jsTemplatesFile))
-		stream = stream.pipe($.injectString.before(endJsComment, getScriptTag(jsTemplatesFile) + nl + tab));
+	let stream = gulp.src(globs.distIndex);
+	if (getSetting('template') && fileExists(globs.dist + templatesFile))
+		stream = stream.pipe($.injectString.before(endJsComment, getScriptTag(templatesFile) + nl + tab));
 	for (const [search, str] of replaces)
 		stream = stream.pipe($.injectString.replace(search, str));
 	return stream
@@ -338,7 +344,7 @@ function indexDist() {
 indexDist.displayName = 'index:dist';
 
 function purgeCss() {
-	return gulp.src(globs.dist + cssFile)
+	return gulp.src(globs.distCss)
 		.pipe($.purgecss({ content: [globs.dist + getGlob('html')] }))
 		.pipe(gulp.dest(globs.dist));
 }
@@ -347,7 +353,7 @@ purgeCss.displayName = 'purge-css';
 function rebase() {
 	const str = 'url(',
 		quotes = ["'", '"'];
-	let stream = gulp.src(globs.dist + cssFile)
+	let stream = gulp.src(globs.distCss)
 		.pipe(replace(str + '\\s*', str));
 	for (char of ['', ...quotes])
 		for (str2 of ['http://', 'https://', '//', '/', 'data:', '#'])
@@ -363,7 +369,7 @@ function rebase() {
 function cleanFiles() {
 	return gulp.src([
 		...(getSetting('template') ? globs.distTmpls : []),
-		globs.dist + getGlob('css'), '!' + globs.dist + cssFile,
+		globs.dist + getGlob('css'), '!' + globs.distCss,
 		globs.dist + jsFiles, '!' + globs.dist + jsFile
 	], { read: false })
 		.pipe($.clean());
@@ -406,11 +412,11 @@ function finishBuild() {
 }
 finishBuild.displayName = 'finish-build';
 
-gulp.task('build', gulp.series(
+defineTask('build', gulp.series(
 	setVariables,
 	gulp.parallel(buildTmp, removeFolderDist),
 	copy, templates, indexDist, purgeCss, rebaseAndClean, compatible, minify, finishBuild
-));
+), 'Build the project.');
 
 function hideFolderDist(cb) {
 	hideDir(globs.dist);
@@ -424,9 +430,9 @@ function browserDist(cb) {
 }
 browserDist.displayName = 'browser:dist';
 
-gulp.task('serve:dist', gulp.series(setDefaultEnv, 'build', hideFolderDist, browserDist));
+defineTask('serve:dist', gulp.series(setDefaultEnv, 'build', hideFolderDist, browserDist), 'Serve the built project.');
 
-gulp.task('default', gulp.series('serve'));
+defineTask('default', gulp.series('serve'));
 
 function getGlob(ext = '*') {
 	const glob = '**/*.';
@@ -507,7 +513,7 @@ function getStylesTask(ext) {
 		const cssExt = cssExtensions.find(({ name }) => name == ext);
 		if (cssExt) {
 			const stylesFile = stylesFilename + '.' + ext,
-				srcStylesFile = globs.src + stylesDir + stylesFile,
+				srcStylesFile = globs.srcStyles + stylesFile,
 				isPreprocessor = cssExt.isPreprocessor,
 				extraCode = cssExt.getExtraCode(),
 				sep = nl + nl,
@@ -527,7 +533,7 @@ function getStylesTask(ext) {
 			if (isPreprocessor)
 				stream = stream.pipe($.rename({ suffix: '.' + ext }));
 			return stream
-				.pipe(gulp.dest(globs.tmp + stylesDir))
+				.pipe(gulp.dest(globs.tmpStyles))
 				.pipe(browserSync.stream());
 		}
 
@@ -541,6 +547,12 @@ function browserSyncInit(path) {
 	browserSync.init({ server: path });
 }
 
+function defineTask(name, composing, description) {
+	composing.description = description || 'Serve the project.';
+	composing.flags = { '--env': 'Environment name' };
+	gulp.task(name, composing);
+}
+
 function getCompatibleTask(ext, getProcessedStream) {
 	return getProcessingTask('compatible', ext, getProcessedStream);
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "autofront",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "Automation of front-end by Gulp and Bower.",
   "main": "index.js",
   "scripts": {
     "serve": "gulp",
-    "serve:dist": "gulp serve:dist --env=preproduction",
-    "build": "gulp build"
+    "build": "gulp build",
+    "serve:dist": "gulp serve:dist --env=preproduction"
   },
   "repository": {
     "type": "git",