autofront 1.5.5 → 1.6.0

package/README.md

@@ -1,26 +1,55 @@
 # Autofront
 
-Gulp settings for front-end projects.
+[Gulp](https://gulpjs.com) settings for front-end projects.
 
-### Requirements
+## Requirements
 
 It is compatible with version [8.17.0](https://nodejs.org/dist/v8.17.0/) of [Node.js](https://nodejs.org).
 
-## Tasks
+## Behaviour
+
+### Tasks
+
+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 the distributable version.
 - With `gulp serve:dist`, a combination of the above is achieved: Specifically, the server runs this version but without reload.
 
-Additionally, a parameter can be included (e.g.: `gulp --dev` o `gulp build --pro`) to indicate the domain of connection path. Defaults to local. And these domain URLs must to appear listed in `package.json` with the property `domains` (optionally also `domainsAliases`).
+### Support
+
+The main supported packages/languages/libraries are:
+
+- [Bower](https://bower.io).
+- Preprocessors:
+  - HTML: [Pug](https://pugjs.org).
+  - CSS:
+    - [Less](https://lesscss.org).
+    - [Sass](https://sass-lang.com).
+- [AngularJS](https://angularjs.org).
+
+## Usage
+
+### Gulp file
+
+`gulpfile.js` simply would look like:
+
+```js
+require('autofront');
+```
+
+Optionally, to work with [HTML5 mode](https://docs.angularjs.org/api/ng/provider/$locationProvider#html5Mode), invoke `html5Mode` to prefix path of assets.
+
+```js
+var autofront = require('autofront');
+autofront.html5Mode();
+```
 
-## Folder structure
+### Folder structure
 
 Here is the essential basic organization you must to put in your project:
 
 ```text
-├─ bower_components/
-├─ nodes_modules/
 ├─ src/
 │  ├─ fonts/
 │  ├─ styles/
@@ -28,16 +57,23 @@ Here is the essential basic organization you must to put in your project:
 │  │  ├─ index.less
 │  │  └─ index.scss
 │  └─ index.html
-├─ .gitignore
 ├─ bower.json
 ├─ gulpfile.js
-├─ package-lock.json
 └─ package.json
 ```
 
-The disposition of the other files present in `src` is merely indicative; and its content, adjustable and optional.
+In `src`, only `index.html` is required. However, if Sass is used, both files must to exist.
+
+### Domains
+
+Running Gulp command, an additional parameter can be included (e.g.: `gulp --dev` o `gulp build --pro`) to indicate the domain of connection path. Defaults to local.
+
+These domain URLs must to appear listed in `package.json` with the property `domains` (optionally also `domainsAliases`, to assign domain name for each alias).
+
+And, to capture the selected URL, put `{{AUTOFRONT_DOMAIN}}` where it would be located in your source code.
 
 ## Pending
 
-- Once the server waits for changes, synchronize also the deletion of files (from `src`).
-- Bower should be replaced as a dependency manager. It is currently [under maintenance](https://bower.io/blog/2017/how-to-migrate-away-from-bower/) and, therefore, its use is not recommended.
+- [ ] Once the server waits for changes, synchronize also the deletion of files (from `src`).
+- [ ] Sass errors must not break the Gulp process (like Less).
+- [ ] Bower should be replaced as a dependency manager. It is currently [under maintenance](https://bower.io/blog/2017/how-to-migrate-away-from-bower/) and, therefore, its use is not recommended.

package/index.js

@@ -1,3 +1,5 @@
+this.html5Mode = html5Mode;
+
 const gulp = require('gulp'),
 	args = require('get-gulp-args')(),
 	mergeStream = require('merge-stream'),
@@ -12,9 +14,9 @@ var domain = undefined;
 
 const allFiles = getFiles(),
 	indexHtmlFile = 'index.html',
-	stylesFolder = 'styles/',
 	cssFilename = 'index',
-	cssFullFilename = cssFilename+'.css',
+	cssFullFilename = cssFilename+'.css';
+var stylesFolder = 'styles/',
 	jsTemplatesFile = 'scripts/templates.js';
 
 const paths = {
@@ -61,7 +63,6 @@ gulp.task('styles', () => {
 		return gulp.src(paths.src+stylesFolder+cssFilename+'.'+ext).pipe(injStr.prepend((extraCode?extraCode+nl:'')+'// bower:'+ext+nl+'// endbower'+nl)).pipe($.wiredep()).pipe(process()).on('error', notifyError);
 	}
 });
-
 gulp.task('fonts', () => gulp.src(mainBowerFiles()).pipe(filter(['eot','otf','svg','ttf','woff','woff2'], true)).pipe(gulp.dest(paths.tmp+'fonts/')));
 gulp.task('others', () => {
 	const pugFilter = filter('pug');
@@ -119,6 +120,12 @@ gulp.task('serve:dist', ['build'], () => browserSyncInit(paths.dist));
 
 gulp.task('default', ['serve']);
 
+function html5Mode() {
+	const pathPrefix = '/';
+	stylesFolder = pathPrefix + stylesFolder;
+	jsTemplatesFile = pathPrefix + jsTemplatesFile;
+}
+
 function getFiles(ext) {
 	ext = ext || '*';
 	const isArray = typeof ext != 'string';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autofront",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "description": "Gulp settings for front-end projects.",
   "main": "index.js",
   "scripts": {
@@ -11,7 +11,12 @@
     "url": "git+https://github.com/mvicens/autofront.git"
   },
   "keywords": [
-    "gulp"
+    "gulp",
+    "bower",
+    "pug",
+    "less",
+    "sass",
+    "angularjs"
   ],
   "author": "Miquel Alejandro Vicens Dalmau",
   "license": "ISC",