Autofront

Automation of front-end by Gulp and Bower.

Get started

Gulp

Install its CLI (following the official manual but skipping the local package and the next steps).

And put gulpfile.js simply with:

require('autofront');

Bower

Install it, initialize it and save dependencies.

Installation

npm install --save-dev autofront

Source code

Place inside directory src; at least including the main page (index.html), without embedding tags (<link>s and <script>s).

Run

Finally, initiate the project, commanding:

gulp

A browser tab is opened. Now you are ready to develop!

To reach further, see below.

Usage

Tasks

The Gulp ones are:

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

[^1]: If it is on. [^2]: Invocation of $locationProvider and a <base> injected.

Environment variables

They can be used in this way:

1. Define them. Look at the next section.
2. Put AUTOFRONT_ENV in your JS source code where it would be injected.
3. On executing Gulp command, indicate the name of the current one to the flag argument env. Defaults to "development" with server tasks and to "production" with build.

Settings

You can configure it typing into Gulp file like this:

const autofront = require('autofront');

autofront.property = {
	subproperty: value,
	subproperty2: {
		subproperty3: value2,
		// ...
	},
	// ...
};
autofront.property2.subproperty4 = value3;
// ...

Defining with:

| Property | Subprop. | | Type | Details | Default | | --- | --- | --- | --- | --- | --- | | html | pug | | Boolean | Pug activated? | false | | css | folder | | String | Directory that contains CSS files. | 'styles/' | | | filename | | String | Filename of root files. | 'index' | | | order | | Number | Index of order to include content in stylesheet. | 0 | | | less[^3] | order | Number | Idem for Less. | 1 | | | scss[^3] | order | Number | Idem for SCSS (Sass). | 2 | | | | variables | String | Filename of variables file. | _variables | | | fonts | folder | String | Location (folder path) of font files from Bower. | 'fonts/' | | | | extensions | String or array of strings | File extensions to catch. | ['eot', 'otf', 'svg', 'ttf', 'woff', 'woff2'] | | js | ng[^3] | module | String | Name of AngularJS main module. | 'app' | | | | html5Mode | Boolean | HTML5 mode enabled? | false | | | | template | Boolean | Templates loaded by $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.

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, Gulp Plumber, Gulp Newer, Gulp Changed, Gulp Count...?
• Support:
  • Markdown (compilation to HTML).
  • React (JSX), Vue...?
  • Stylus 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 as Bower dependency in demo.