autofront 2.0.7 → 2.1.1
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 +79 -60
- package/index.js +38 -33
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -1,51 +1,32 @@
|
|
|
1
1
|
# Autofront
|
|
2
2
|
|
|
3
|
-
[Gulp](https://gulpjs.com)
|
|
3
|
+
Automatisation of front-end by [Gulp](https://gulpjs.com) and [Bower](https://bower.io).
|
|
4
4
|
|
|
5
5
|
## Get started
|
|
6
6
|
|
|
7
|
-
###
|
|
8
|
-
|
|
9
|
-
```sh
|
|
10
|
-
npm install --save-dev autofront
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
### Folder structure
|
|
7
|
+
### Gulp
|
|
14
8
|
|
|
15
|
-
|
|
9
|
+
Install its CLI, following [the official manual](https://gulpjs.com/docs/en/getting-started/quick-start/) but skipping [the local package](https://gulpjs.com/docs/en/getting-started/quick-start/#install-the-gulp-package-in-your-devdependencies) and the next steps.
|
|
16
10
|
|
|
17
|
-
|
|
18
|
-
├─ src/
|
|
19
|
-
│ ├─ styles/
|
|
20
|
-
│ │ ├─ _variables.scss
|
|
21
|
-
│ │ ├─ index.less
|
|
22
|
-
│ │ └─ index.scss
|
|
23
|
-
│ └─ index.html
|
|
24
|
-
├─ bower.json
|
|
25
|
-
├─ gulpfile.js
|
|
26
|
-
└─ package.json
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
In `src`, only `index.html` is required. However, if Sass is used, both files must to exist.
|
|
30
|
-
|
|
31
|
-
### Gulp file
|
|
32
|
-
|
|
33
|
-
`gulpfile.js` simply would look like:
|
|
11
|
+
And put `gulpfile.js` simply with:
|
|
34
12
|
|
|
35
13
|
```js
|
|
36
14
|
require('autofront');
|
|
37
15
|
```
|
|
38
16
|
|
|
39
|
-
|
|
17
|
+
### Bower
|
|
40
18
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
19
|
+
[Install it](https://bower.io/#install-bower), [initialize it and save dependencies](https://bower.io/#save-packages).
|
|
20
|
+
|
|
21
|
+
### Install
|
|
22
|
+
|
|
23
|
+
```sh
|
|
24
|
+
npm install --save-dev autofront
|
|
44
25
|
```
|
|
45
26
|
|
|
46
|
-
###
|
|
27
|
+
### Main page
|
|
47
28
|
|
|
48
|
-
|
|
29
|
+
In `src` directory, place `index.html` whose content would have to look basically like:
|
|
49
30
|
|
|
50
31
|
```html
|
|
51
32
|
<!DOCTYPE html>
|
|
@@ -56,24 +37,28 @@ These ones are automatically built by [Gulp Useref](https://www.npmjs.com/packa
|
|
|
56
37
|
<!-- endbuild -->
|
|
57
38
|
</head>
|
|
58
39
|
<body>
|
|
59
|
-
<!-- build:js scripts/vendor.js -->
|
|
60
|
-
<!-- bower:js --><!-- endbower -->
|
|
61
|
-
<!-- endbuild -->
|
|
62
|
-
<!-- build:js scripts/app.js -->
|
|
63
|
-
<!-- inject:js -->
|
|
64
|
-
<!-- endinject -->
|
|
65
|
-
<!-- endbuild -->
|
|
40
|
+
<!-- build:js scripts/vendor.js -->
|
|
41
|
+
<!-- bower:js --><!-- endbower -->
|
|
42
|
+
<!-- endbuild -->
|
|
43
|
+
<!-- build:js scripts/app.js -->
|
|
44
|
+
<!-- inject:js -->
|
|
45
|
+
<!-- endinject -->
|
|
46
|
+
<!-- endbuild -->
|
|
66
47
|
</body>
|
|
67
48
|
</html>
|
|
68
49
|
```
|
|
69
50
|
|
|
70
|
-
###
|
|
51
|
+
### Run
|
|
71
52
|
|
|
72
|
-
|
|
53
|
+
Finally initiate your project development:
|
|
73
54
|
|
|
74
|
-
|
|
55
|
+
```sh
|
|
56
|
+
gulp
|
|
57
|
+
```
|
|
75
58
|
|
|
76
|
-
|
|
59
|
+
A browser tab will be opened. Then, try editing the HTML to view the web refresh.
|
|
60
|
+
|
|
61
|
+
Other command options, that appear immediately below, are available. And to use another programming languages, see [the proper section](#support).
|
|
77
62
|
|
|
78
63
|
## Usage
|
|
79
64
|
|
|
@@ -82,33 +67,67 @@ At least it should be defined the local one. See [the proper section](#domains-1
|
|
|
82
67
|
Mainly the Gulp ones are the following:
|
|
83
68
|
|
|
84
69
|
* `gulp` or `gulp serve` are for running a test server and develop with live reload.
|
|
85
|
-
* `gulp build` only builds the distributable
|
|
86
|
-
* With `gulp serve:dist`, a combination of the above is achieved: Specifically, the server runs
|
|
70
|
+
* `gulp build` only builds production code, the distributable application (`dist` folder).
|
|
71
|
+
* With `gulp serve:dist`, a combination of the above is achieved: Specifically, the server runs that last version but without reload.
|
|
87
72
|
|
|
88
73
|
### Domains
|
|
89
74
|
|
|
90
|
-
|
|
75
|
+
On executing 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`.
|
|
91
76
|
|
|
92
|
-
These domain URLs
|
|
77
|
+
These domain URLs would be searched in `package.json` listed in the property `domains` (optionally also `domainAliases`, to assign domain name for each alias).
|
|
93
78
|
|
|
94
|
-
And, to capture the selected URL, put `{{AUTOFRONT_DOMAIN}}` where it would be located in your source code.
|
|
79
|
+
And, to capture the selected URL string, put `{{AUTOFRONT_DOMAIN}}` where it would be located in your source code.
|
|
95
80
|
|
|
96
81
|
## Support
|
|
97
82
|
|
|
98
|
-
|
|
83
|
+
Positioning in source folder (`src`), you can utilize:
|
|
84
|
+
|
|
85
|
+
### HTML
|
|
86
|
+
|
|
87
|
+
Besides of required `index.html`, it is possible to add more files. In this case, they will be treated as [templates](https://docs.angularjs.org/api/ng/directive/ngInclude) and, to work properly with `dist`, AngularJS must to be [appropriately](#angularjs) on.
|
|
88
|
+
|
|
89
|
+
#### [Pug](https://pugjs.org)
|
|
90
|
+
|
|
91
|
+
Turn any hypertext file into Pug's one, except the mentioned untouchable index page.
|
|
92
|
+
|
|
93
|
+
### CSS
|
|
94
|
+
|
|
95
|
+
Collocated in `styles` directory, type over lonely `index.css`.
|
|
96
|
+
|
|
97
|
+
#### [Less](https://lesscss.org)
|
|
98
|
+
|
|
99
|
+
The same as before (but with its own file extension). The rest of optional files will be ignored if they are not [imported](https://lesscss.org/features/#import-atrules-feature).
|
|
100
|
+
|
|
101
|
+
#### [Sass](https://sass-lang.com)
|
|
102
|
+
|
|
103
|
+
Idem, but it is also obligatory an extra jointly: `_variables.scss`.
|
|
104
|
+
|
|
105
|
+
### JavaScript
|
|
106
|
+
|
|
107
|
+
Wherever you want.
|
|
108
|
+
|
|
109
|
+
#### [AngularJS](https://angularjs.org)
|
|
110
|
+
|
|
111
|
+
One of modules should to be named "app", ideally the main one.
|
|
112
|
+
|
|
113
|
+
Optionally, to work with [HTML5 mode](https://docs.angularjs.org/api/ng/provider/$locationProvider#html5Mode), invoke it:
|
|
114
|
+
|
|
115
|
+
```js
|
|
116
|
+
var autofront = require('autofront');
|
|
117
|
+
autofront.html5Mode();
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Others
|
|
99
121
|
|
|
100
|
-
|
|
101
|
-
* Preprocessors:
|
|
102
|
-
* HTML: [Pug](https://pugjs.org).
|
|
103
|
-
* CSS:
|
|
104
|
-
* [Less](https://lesscss.org).
|
|
105
|
-
* [Sass](https://sass-lang.com).
|
|
106
|
-
* [AngularJS](https://angularjs.org).
|
|
122
|
+
Any asset (e.g. a PDF document) will keep the location path and, particularly at production, will take place an images optimization.
|
|
107
123
|
|
|
108
124
|
## Pending
|
|
109
125
|
|
|
110
|
-
|
|
126
|
+
Fixes and improvements to do:
|
|
111
127
|
|
|
112
|
-
*
|
|
113
|
-
*
|
|
114
|
-
*
|
|
128
|
+
* Avoid process-breaking Sass errors, like Less rightly does.
|
|
129
|
+
* Once the server watch for changes:
|
|
130
|
+
* Synchronize also the deletion of source files.
|
|
131
|
+
* Resolve overwriting bug between pure CSS and preprocessors (Less/Sass).
|
|
132
|
+
* Replace Bower as dependency manager.
|
|
133
|
+
* Migrate AngularJS to new [Angular](https://angular.io).
|
package/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
this.html5Mode = html5Mode;
|
|
2
2
|
|
|
3
3
|
const gulp = require('gulp'),
|
|
4
|
+
path = require('path'),
|
|
4
5
|
args = require('get-gulp-args')(),
|
|
5
6
|
mergeStream = require('merge-stream'),
|
|
6
7
|
mainBowerFiles = require('main-bower-files'),
|
|
@@ -15,7 +16,7 @@ var domain = undefined;
|
|
|
15
16
|
const allFiles = getFiles(),
|
|
16
17
|
indexHtmlFile = 'index.html',
|
|
17
18
|
cssFilename = 'index',
|
|
18
|
-
cssFullFilename = cssFilename+'.css';
|
|
19
|
+
cssFullFilename = cssFilename + '.css';
|
|
19
20
|
var stylesFolder = 'styles/',
|
|
20
21
|
jsTemplatesFile = 'scripts/templates.js';
|
|
21
22
|
|
|
@@ -24,44 +25,48 @@ const paths = {
|
|
|
24
25
|
tmp: '.tmp/',
|
|
25
26
|
dist: 'dist/'
|
|
26
27
|
};
|
|
27
|
-
paths.srcIndexHtml = paths.src+indexHtmlFile;
|
|
28
|
-
paths.srcSass = paths.src+getFiles('scss');
|
|
29
|
-
paths.srcLess = paths.src+getFiles('less');
|
|
30
|
-
paths.srcJs = paths.src+getFiles('js');
|
|
31
|
-
paths.srcOthers = [paths.src+allFiles, '!'+paths.srcIndexHtml, '!'+paths.srcSass, '!'+paths.srcLess, '!'+paths.srcJs];
|
|
28
|
+
paths.srcIndexHtml = paths.src + indexHtmlFile;
|
|
29
|
+
paths.srcSass = paths.src + getFiles('scss');
|
|
30
|
+
paths.srcLess = paths.src + getFiles('less');
|
|
31
|
+
paths.srcJs = paths.src + getFiles('js');
|
|
32
|
+
paths.srcOthers = [paths.src + allFiles, '!' + paths.srcIndexHtml, '!' + paths.srcSass, '!' + paths.srcLess, '!' + paths.srcJs];
|
|
32
33
|
|
|
33
34
|
const nl = '\n',
|
|
34
35
|
tab = ' ';
|
|
35
36
|
|
|
36
37
|
gulp.task('check', () => {
|
|
37
|
-
const pckg = require('
|
|
38
|
-
|
|
39
|
-
var domainIndex = args[0]||'local';
|
|
40
|
-
if (
|
|
41
|
-
const
|
|
42
|
-
if (
|
|
43
|
-
|
|
38
|
+
const pckg = require(path.resolve('package.json')),
|
|
39
|
+
domains = pckg.domains;
|
|
40
|
+
var domainIndex = args[0] || 'local';
|
|
41
|
+
if (domains) {
|
|
42
|
+
const domainAliases = pckg.domainAliases;
|
|
43
|
+
if (domainAliases) {
|
|
44
|
+
const alias = domainAliases[domainIndex];
|
|
45
|
+
if (alias)
|
|
46
|
+
domainIndex = alias;
|
|
47
|
+
}
|
|
48
|
+
domain = domains[domainIndex];
|
|
44
49
|
}
|
|
45
|
-
|
|
50
|
+
const isMatched = domain !== undefined;
|
|
46
51
|
return gulp.src(paths.src)
|
|
47
|
-
.pipe(
|
|
52
|
+
.pipe($.notify(isMatched ? 'Matching domain: "' + domainIndex + '".' : 'No domain matched.'));
|
|
48
53
|
});
|
|
49
54
|
|
|
50
55
|
gulp.task('del', () => delFolder(paths.tmp));
|
|
51
|
-
gulp.task('index-build', () => gulp.src(paths.srcIndexHtml).pipe(injStr.after('<!-- endbuild -->', nl+tab+'<link rel="stylesheet" href="'+stylesFolder+cssFullFilename+'">')).pipe($.inject(gulp.src(paths.srcJs).pipe($.angularFilesort()), {relative: true})).on('error', notifyError).pipe($.wiredep()).pipe($.useref()).pipe(gulp.dest(paths.tmp)));
|
|
52
|
-
gulp.task('index-domain', () => gulp.src(paths.tmp+getFiles('js')).pipe(injStr.replace('{{AUTOFRONT_DOMAIN}}', domain)).pipe(gulp.dest(paths.tmp)));
|
|
56
|
+
gulp.task('index-build', () => gulp.src(paths.srcIndexHtml).pipe(injStr.after('<!-- endbuild -->', nl + tab + '<link rel="stylesheet" href="' + stylesFolder + cssFullFilename + '">')).pipe($.inject(gulp.src(paths.srcJs).pipe($.angularFilesort()), { relative: true })).on('error', notifyError).pipe($.wiredep()).pipe($.useref()).pipe(gulp.dest(paths.tmp)));
|
|
57
|
+
gulp.task('index-domain', () => gulp.src(paths.tmp + getFiles('js')).pipe(injStr.replace('{{AUTOFRONT_DOMAIN}}', domain)).pipe(gulp.dest(paths.tmp)));
|
|
53
58
|
gulp.task('index', gulp.series('index-build', 'index-domain'));
|
|
54
59
|
gulp.task('styles', () => {
|
|
55
60
|
return mergeStream(getCssStream('scss', gulpSass, '@import "variables";'), getCssStream('less', $.less))
|
|
56
61
|
.pipe($.concat(cssFullFilename))
|
|
57
|
-
.pipe(gulp.dest(paths.tmp+stylesFolder))
|
|
62
|
+
.pipe(gulp.dest(paths.tmp + stylesFolder))
|
|
58
63
|
.pipe(browserSync.stream());
|
|
59
64
|
|
|
60
65
|
function getCssStream(ext, process, extraCode) {
|
|
61
|
-
return gulp.src(paths.src+stylesFolder+cssFilename+'.'+ext, {allowEmpty: true}).pipe(injStr.prepend((extraCode?extraCode+nl:'')+'// bower:'+ext+nl+'// endbower'+nl)).pipe($.wiredep()).pipe(process()).on('error', notifyError);
|
|
66
|
+
return gulp.src(paths.src + stylesFolder + cssFilename + '.' + ext, { allowEmpty: true }).pipe(injStr.prepend((extraCode ? extraCode + nl : '') + '// bower:' + ext + nl + '// endbower' + nl)).pipe($.wiredep()).pipe(process()).on('error', notifyError);
|
|
62
67
|
}
|
|
63
68
|
});
|
|
64
|
-
gulp.task('fonts', () => gulp.src(mainBowerFiles()).pipe(filter(['eot','otf','svg','ttf','woff','woff2'], true)).pipe(gulp.dest(paths.tmp+'fonts/')));
|
|
69
|
+
gulp.task('fonts', () => gulp.src(mainBowerFiles()).pipe(filter(['eot', 'otf', 'svg', 'ttf', 'woff', 'woff2'], true)).pipe(gulp.dest(paths.tmp + 'fonts/')));
|
|
65
70
|
gulp.task('others', () => {
|
|
66
71
|
const pugFilter = filter('pug');
|
|
67
72
|
return gulp.src(paths.srcOthers)
|
|
@@ -78,33 +83,33 @@ gulp.task('serve', gulp.series('browser', () => {
|
|
|
78
83
|
gulp.watch([paths.srcIndexHtml, paths.srcJs], gulp.task('index'));
|
|
79
84
|
gulp.watch([paths.srcSass, paths.srcLess], gulp.task('styles'));
|
|
80
85
|
gulp.watch(paths.srcOthers, gulp.task('others'));
|
|
81
|
-
gulp.watch([paths.tmp+allFiles, '!'+paths.tmp+stylesFolder+cssFullFilename], function(cb) {
|
|
86
|
+
gulp.watch([paths.tmp + allFiles, '!' + paths.tmp + stylesFolder + cssFullFilename], function (cb) {
|
|
82
87
|
browserSync.reload();
|
|
83
88
|
cb();
|
|
84
89
|
});
|
|
85
90
|
}));
|
|
86
91
|
|
|
87
92
|
gulp.task('del:dist', () => delFolder(paths.dist));
|
|
88
|
-
gulp.task('copy', gulp.series('del:dist', () => gulp.src(paths.tmp+allFiles).pipe(gulp.dest(paths.dist))));
|
|
89
|
-
gulp.task('templates-build', () => gulp.src([paths.dist+getFiles('html'), '!'+paths.dist+indexHtmlFile]).pipe($.cleanDest(paths.dist)).pipe(minifyHtml()).pipe($.angularTemplatecache(jsTemplatesFile, {module: 'app', transformUrl: function(url) {return url.slice(1);}})).pipe(gulp.dest(paths.dist)));
|
|
93
|
+
gulp.task('copy', gulp.series('del:dist', () => gulp.src(paths.tmp + allFiles).pipe(gulp.dest(paths.dist))));
|
|
94
|
+
gulp.task('templates-build', () => gulp.src([paths.dist + getFiles('html'), '!' + paths.dist + indexHtmlFile]).pipe($.cleanDest(paths.dist)).pipe(minifyHtml()).pipe($.angularTemplatecache(jsTemplatesFile, { module: 'app', transformUrl: function (url) { return url.slice(1); } })).pipe(gulp.dest(paths.dist)));
|
|
90
95
|
gulp.task('templates-clean', () => require('delete-empty')(paths.dist));
|
|
91
96
|
gulp.task('templates', gulp.series('templates-build', 'templates-clean'));
|
|
92
97
|
gulp.task('build', gulp.series('build:tmp', 'copy', 'templates', () => {
|
|
93
98
|
const indexHtmlFilter = filter('html'),
|
|
94
99
|
cssFilter = filter('css'),
|
|
95
100
|
jsFilter = filter('js'),
|
|
96
|
-
cssAndJsFilter = filter(['css','js']),
|
|
97
|
-
imgFilter = filter(['png','jpg','gif','svg']),
|
|
101
|
+
cssAndJsFilter = filter(['css', 'js']),
|
|
102
|
+
imgFilter = filter(['png', 'jpg', 'gif', 'svg']),
|
|
98
103
|
jsonFilter = filter('json');
|
|
99
|
-
return gulp.src(paths.dist+allFiles)
|
|
100
|
-
.pipe(indexHtmlFilter).pipe(injStr.before('</body>', '<script src="'+jsTemplatesFile+'"></script>'+nl)).pipe(minifyHtml()).pipe(indexHtmlFilter.restore)
|
|
101
|
-
.pipe(cssFilter).pipe($.cssnano({zindex: false})).pipe(cssFilter.restore)
|
|
104
|
+
return gulp.src(paths.dist + allFiles)
|
|
105
|
+
.pipe(indexHtmlFilter).pipe(injStr.before('</body>', '<script src="' + jsTemplatesFile + '"></script>' + nl)).pipe(minifyHtml()).pipe(indexHtmlFilter.restore)
|
|
106
|
+
.pipe(cssFilter).pipe($.cssnano({ zindex: false })).pipe(cssFilter.restore)
|
|
102
107
|
.pipe(jsFilter).pipe($.ngAnnotate()).pipe($.terser()).pipe(jsFilter.restore)
|
|
103
108
|
.pipe(cssAndJsFilter).pipe($.rev()).pipe($.revDeleteOriginal()).pipe(cssAndJsFilter.restore)
|
|
104
109
|
.pipe($.revReplace())
|
|
105
110
|
.pipe(imgFilter).pipe($.imagemin()).pipe(imgFilter.restore)
|
|
106
111
|
.pipe(jsonFilter).pipe($.jsonmin()).pipe(jsonFilter.restore)
|
|
107
|
-
.pipe($.size({showFiles: true}))
|
|
112
|
+
.pipe($.size({ showFiles: true }))
|
|
108
113
|
.pipe(gulp.dest(paths.dist));
|
|
109
114
|
}));
|
|
110
115
|
gulp.task('serve:dist', gulp.series('build', () => browserSyncInit(paths.dist)));
|
|
@@ -120,16 +125,16 @@ function html5Mode() {
|
|
|
120
125
|
function getFiles(ext) {
|
|
121
126
|
ext = ext || '*';
|
|
122
127
|
const isArray = typeof ext != 'string';
|
|
123
|
-
return '**/*.'+(isArray?'{':'')+(isArray?ext.join():ext)+(isArray?'}':'');
|
|
128
|
+
return '**/*.' + (isArray ? '{' : '') + (isArray ? ext.join() : ext) + (isArray ? '}' : '');
|
|
124
129
|
}
|
|
125
130
|
|
|
126
131
|
function delFolder(path) {
|
|
127
|
-
return gulp.src(path, {allowEmpty: true, read: false})
|
|
132
|
+
return gulp.src(path, { allowEmpty: true, read: false })
|
|
128
133
|
.pipe($.clean());
|
|
129
134
|
}
|
|
130
135
|
|
|
131
136
|
function filter(ext, isUnrestored) {
|
|
132
|
-
return $.filter(getFiles(ext), {restore: !isUnrestored});
|
|
137
|
+
return $.filter(getFiles(ext), { restore: !isUnrestored });
|
|
133
138
|
}
|
|
134
139
|
|
|
135
140
|
function browserSyncInit(path) {
|
|
@@ -141,5 +146,5 @@ function browserSyncInit(path) {
|
|
|
141
146
|
}
|
|
142
147
|
|
|
143
148
|
function minifyHtml() {
|
|
144
|
-
return $.htmlmin({collapseWhitespace: true, conservativeCollapse: true});
|
|
149
|
+
return $.htmlmin({ collapseWhitespace: true, conservativeCollapse: true });
|
|
145
150
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "autofront",
|
|
3
|
-
"version": "2.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "2.1.1",
|
|
4
|
+
"description": "Automatisation of front-end by Gulp and Bower.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
@@ -11,11 +11,12 @@
|
|
|
11
11
|
"url": "git+https://github.com/mvicens/autofront.git"
|
|
12
12
|
},
|
|
13
13
|
"keywords": [
|
|
14
|
-
"
|
|
15
|
-
"bower",
|
|
14
|
+
"html",
|
|
16
15
|
"pug",
|
|
16
|
+
"css",
|
|
17
17
|
"less",
|
|
18
18
|
"sass",
|
|
19
|
+
"javascript",
|
|
19
20
|
"angularjs"
|
|
20
21
|
],
|
|
21
22
|
"author": "Miquel Alejandro Vicens Dalmau",
|