Autofront NPM | npm.io

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.^1Insertion of file with app info (`about.json`).
`build`	Production code is built (in folder `dist`).	The above and: Templates caching.^1Concatenation 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:

Define them. Look at the next section.
Put AUTOFRONT_ENV in your JS source code where it would be injected.
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.