autofront 2.0.6 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -38
- package/index.js +11 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,43 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
[Gulp](https://gulpjs.com) settings for front-end projects.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Get started
|
|
6
6
|
|
|
7
|
-
###
|
|
8
|
-
|
|
9
|
-
Mainly the Gulp ones are the following:
|
|
10
|
-
|
|
11
|
-
* `gulp` or `gulp serve` are for running a test server and develop with live reload.
|
|
12
|
-
* `gulp build` only builds the distributable version.
|
|
13
|
-
* With `gulp serve:dist`, a combination of the above is achieved: Specifically, the server runs this version but without reload.
|
|
14
|
-
|
|
15
|
-
### Support
|
|
16
|
-
|
|
17
|
-
The main supported packages/languages/libraries are:
|
|
18
|
-
|
|
19
|
-
* [Bower](https://bower.io).
|
|
20
|
-
* Preprocessors:
|
|
21
|
-
* HTML: [Pug](https://pugjs.org).
|
|
22
|
-
* CSS:
|
|
23
|
-
* [Less](https://lesscss.org).
|
|
24
|
-
* [Sass](https://sass-lang.com).
|
|
25
|
-
* [AngularJS](https://angularjs.org).
|
|
7
|
+
### Install
|
|
26
8
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
### Gulp file
|
|
30
|
-
|
|
31
|
-
`gulpfile.js` simply would look like:
|
|
32
|
-
|
|
33
|
-
```js
|
|
34
|
-
require('autofront');
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
Optionally, to work with [HTML5 mode](https://docs.angularjs.org/api/ng/provider/$locationProvider#html5Mode), invoke `html5Mode` to prefix path of assets.
|
|
38
|
-
|
|
39
|
-
```js
|
|
40
|
-
var autofront = require('autofront');
|
|
41
|
-
autofront.html5Mode();
|
|
9
|
+
```sh
|
|
10
|
+
npm install --save-dev autofront
|
|
42
11
|
```
|
|
43
12
|
|
|
44
13
|
### Folder structure
|
|
@@ -47,7 +16,6 @@ Here is the essential basic organization you must to put in your project:
|
|
|
47
16
|
|
|
48
17
|
```text
|
|
49
18
|
├─ src/
|
|
50
|
-
│ ├─ fonts/
|
|
51
19
|
│ ├─ styles/
|
|
52
20
|
│ │ ├─ _variables.scss
|
|
53
21
|
│ │ ├─ index.less
|
|
@@ -60,6 +28,21 @@ Here is the essential basic organization you must to put in your project:
|
|
|
60
28
|
|
|
61
29
|
In `src`, only `index.html` is required. However, if Sass is used, both files must to exist.
|
|
62
30
|
|
|
31
|
+
### Gulp file
|
|
32
|
+
|
|
33
|
+
`gulpfile.js` simply would look like:
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
require('autofront');
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Optionally, to work with [HTML5 mode](https://docs.angularjs.org/api/ng/provider/$locationProvider#html5Mode), invoke `html5Mode` to prefix path of assets.
|
|
40
|
+
|
|
41
|
+
```js
|
|
42
|
+
var autofront = require('autofront');
|
|
43
|
+
autofront.html5Mode();
|
|
44
|
+
```
|
|
45
|
+
|
|
63
46
|
### Dependencies
|
|
64
47
|
|
|
65
48
|
These ones are automatically built by [Gulp Useref](https://www.npmjs.com/package/gulp-useref), [Wiredep](https://www.npmjs.com/package/wiredep) and [Gulp Inject](https://www.npmjs.com/package/gulp-inject). Then, to reach this, `index.html` would have to look basically like:
|
|
@@ -88,16 +71,40 @@ These ones are automatically built by [Gulp Useref](https://www.npmjs.com/packa
|
|
|
88
71
|
|
|
89
72
|
One of these should to be named "app", ideally the main one.
|
|
90
73
|
|
|
74
|
+
## Usage
|
|
75
|
+
|
|
76
|
+
### Tasks
|
|
77
|
+
|
|
78
|
+
Mainly the Gulp ones are the following:
|
|
79
|
+
|
|
80
|
+
* `gulp` or `gulp serve` are for running a test server and develop with live reload.
|
|
81
|
+
* `gulp build` only builds the distributable version.
|
|
82
|
+
* With `gulp serve:dist`, a combination of the above is achieved: Specifically, the server runs this version but without reload.
|
|
83
|
+
|
|
91
84
|
### Domains
|
|
92
85
|
|
|
93
|
-
Running Gulp command, an additional parameter can be included (e.g.: `gulp --dev`
|
|
86
|
+
Running Gulp command, an additional parameter can be included (e.g.: `gulp --dev` or `gulp build --pro`) to indicate the domain of connection path. Defaults to `--local`.
|
|
94
87
|
|
|
95
|
-
These domain URLs
|
|
88
|
+
These domain URLs would be searched in `package.json` listed in the property `domains` (optionally also `domainAliases`, to assign domain name for each alias).
|
|
96
89
|
|
|
97
90
|
And, to capture the selected URL, put `{{AUTOFRONT_DOMAIN}}` where it would be located in your source code.
|
|
98
91
|
|
|
92
|
+
## Support
|
|
93
|
+
|
|
94
|
+
The main supported packages/languages/libraries are:
|
|
95
|
+
|
|
96
|
+
* [Bower](https://bower.io).
|
|
97
|
+
* Preprocessors:
|
|
98
|
+
* HTML: [Pug](https://pugjs.org).
|
|
99
|
+
* CSS:
|
|
100
|
+
* [Less](https://lesscss.org).
|
|
101
|
+
* [Sass](https://sass-lang.com).
|
|
102
|
+
* [AngularJS](https://angularjs.org).
|
|
103
|
+
|
|
99
104
|
## Pending
|
|
100
105
|
|
|
106
|
+
Improves to do:
|
|
107
|
+
|
|
101
108
|
* Once the server waits for changes, synchronize also the deletion of files (from `src`).
|
|
102
109
|
* Sass errors must not break the Gulp process (like Less).
|
|
103
110
|
* 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
CHANGED
|
@@ -35,16 +35,20 @@ const nl = '\n',
|
|
|
35
35
|
|
|
36
36
|
gulp.task('check', () => {
|
|
37
37
|
const pckg = require('../../package.json'),
|
|
38
|
-
|
|
38
|
+
domains = pckg.domains;
|
|
39
39
|
var domainIndex = args[0]||'local';
|
|
40
|
-
if (
|
|
41
|
-
const
|
|
42
|
-
if (
|
|
43
|
-
|
|
40
|
+
if (domains) {
|
|
41
|
+
const domainAliases = pckg.domainAliases;
|
|
42
|
+
if (domainAliases) {
|
|
43
|
+
const alias = domainAliases[domainIndex];
|
|
44
|
+
if (alias)
|
|
45
|
+
domainIndex = alias;
|
|
46
|
+
}
|
|
47
|
+
domain = domains[domainIndex];
|
|
44
48
|
}
|
|
45
|
-
|
|
49
|
+
const isMatched = domain!==undefined;
|
|
46
50
|
return gulp.src(paths.src)
|
|
47
|
-
.pipe(
|
|
51
|
+
.pipe($.notify(isMatched?'Matching domain: "'+domainIndex+'".':'No domain matched.'));
|
|
48
52
|
});
|
|
49
53
|
|
|
50
54
|
gulp.task('del', () => delFolder(paths.tmp));
|