autofront 2.1.0 → 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 +80 -57
- package/index.js +29 -28
- 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,20 +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
|
|
52
|
+
|
|
53
|
+
Finally initiate your project development:
|
|
54
|
+
|
|
55
|
+
```sh
|
|
56
|
+
gulp
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
A browser tab will be opened. Then, try editing the HTML to view the web refresh.
|
|
71
60
|
|
|
72
|
-
|
|
61
|
+
Other command options, that appear immediately below, are available. And to use another programming languages, see [the proper section](#support).
|
|
73
62
|
|
|
74
63
|
## Usage
|
|
75
64
|
|
|
@@ -78,33 +67,67 @@ One of these should to be named "app", ideally the main one.
|
|
|
78
67
|
Mainly the Gulp ones are the following:
|
|
79
68
|
|
|
80
69
|
* `gulp` or `gulp serve` are for running a test server and develop with live reload.
|
|
81
|
-
* `gulp build` only builds the distributable
|
|
82
|
-
* 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.
|
|
83
72
|
|
|
84
73
|
### Domains
|
|
85
74
|
|
|
86
|
-
|
|
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`.
|
|
87
76
|
|
|
88
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).
|
|
89
78
|
|
|
90
|
-
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.
|
|
91
80
|
|
|
92
81
|
## Support
|
|
93
82
|
|
|
94
|
-
|
|
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
|
|
95
121
|
|
|
96
|
-
|
|
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).
|
|
122
|
+
Any asset (e.g. a PDF document) will keep the location path and, particularly at production, will take place an images optimization.
|
|
103
123
|
|
|
104
124
|
## Pending
|
|
105
125
|
|
|
106
|
-
|
|
126
|
+
Fixes and improvements to do:
|
|
107
127
|
|
|
108
|
-
*
|
|
109
|
-
*
|
|
110
|
-
*
|
|
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,19 +25,19 @@ 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
|
+
const pckg = require(path.resolve('package.json')),
|
|
38
39
|
domains = pckg.domains;
|
|
39
|
-
var domainIndex = args[0]||'local';
|
|
40
|
+
var domainIndex = args[0] || 'local';
|
|
40
41
|
if (domains) {
|
|
41
42
|
const domainAliases = pckg.domainAliases;
|
|
42
43
|
if (domainAliases) {
|
|
@@ -46,26 +47,26 @@ gulp.task('check', () => {
|
|
|
46
47
|
}
|
|
47
48
|
domain = domains[domainIndex];
|
|
48
49
|
}
|
|
49
|
-
const isMatched = domain!==undefined;
|
|
50
|
+
const isMatched = domain !== undefined;
|
|
50
51
|
return gulp.src(paths.src)
|
|
51
|
-
.pipe($.notify(isMatched?'Matching domain: "'+domainIndex+'".':'No domain matched.'));
|
|
52
|
+
.pipe($.notify(isMatched ? 'Matching domain: "' + domainIndex + '".' : 'No domain matched.'));
|
|
52
53
|
});
|
|
53
54
|
|
|
54
55
|
gulp.task('del', () => delFolder(paths.tmp));
|
|
55
|
-
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)));
|
|
56
|
-
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)));
|
|
57
58
|
gulp.task('index', gulp.series('index-build', 'index-domain'));
|
|
58
59
|
gulp.task('styles', () => {
|
|
59
60
|
return mergeStream(getCssStream('scss', gulpSass, '@import "variables";'), getCssStream('less', $.less))
|
|
60
61
|
.pipe($.concat(cssFullFilename))
|
|
61
|
-
.pipe(gulp.dest(paths.tmp+stylesFolder))
|
|
62
|
+
.pipe(gulp.dest(paths.tmp + stylesFolder))
|
|
62
63
|
.pipe(browserSync.stream());
|
|
63
64
|
|
|
64
65
|
function getCssStream(ext, process, extraCode) {
|
|
65
|
-
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);
|
|
66
67
|
}
|
|
67
68
|
});
|
|
68
|
-
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/')));
|
|
69
70
|
gulp.task('others', () => {
|
|
70
71
|
const pugFilter = filter('pug');
|
|
71
72
|
return gulp.src(paths.srcOthers)
|
|
@@ -82,33 +83,33 @@ gulp.task('serve', gulp.series('browser', () => {
|
|
|
82
83
|
gulp.watch([paths.srcIndexHtml, paths.srcJs], gulp.task('index'));
|
|
83
84
|
gulp.watch([paths.srcSass, paths.srcLess], gulp.task('styles'));
|
|
84
85
|
gulp.watch(paths.srcOthers, gulp.task('others'));
|
|
85
|
-
gulp.watch([paths.tmp+allFiles, '!'+paths.tmp+stylesFolder+cssFullFilename], function(cb) {
|
|
86
|
+
gulp.watch([paths.tmp + allFiles, '!' + paths.tmp + stylesFolder + cssFullFilename], function (cb) {
|
|
86
87
|
browserSync.reload();
|
|
87
88
|
cb();
|
|
88
89
|
});
|
|
89
90
|
}));
|
|
90
91
|
|
|
91
92
|
gulp.task('del:dist', () => delFolder(paths.dist));
|
|
92
|
-
gulp.task('copy', gulp.series('del:dist', () => gulp.src(paths.tmp+allFiles).pipe(gulp.dest(paths.dist))));
|
|
93
|
-
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)));
|
|
94
95
|
gulp.task('templates-clean', () => require('delete-empty')(paths.dist));
|
|
95
96
|
gulp.task('templates', gulp.series('templates-build', 'templates-clean'));
|
|
96
97
|
gulp.task('build', gulp.series('build:tmp', 'copy', 'templates', () => {
|
|
97
98
|
const indexHtmlFilter = filter('html'),
|
|
98
99
|
cssFilter = filter('css'),
|
|
99
100
|
jsFilter = filter('js'),
|
|
100
|
-
cssAndJsFilter = filter(['css','js']),
|
|
101
|
-
imgFilter = filter(['png','jpg','gif','svg']),
|
|
101
|
+
cssAndJsFilter = filter(['css', 'js']),
|
|
102
|
+
imgFilter = filter(['png', 'jpg', 'gif', 'svg']),
|
|
102
103
|
jsonFilter = filter('json');
|
|
103
|
-
return gulp.src(paths.dist+allFiles)
|
|
104
|
-
.pipe(indexHtmlFilter).pipe(injStr.before('</body>', '<script src="'+jsTemplatesFile+'"></script>'+nl)).pipe(minifyHtml()).pipe(indexHtmlFilter.restore)
|
|
105
|
-
.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)
|
|
106
107
|
.pipe(jsFilter).pipe($.ngAnnotate()).pipe($.terser()).pipe(jsFilter.restore)
|
|
107
108
|
.pipe(cssAndJsFilter).pipe($.rev()).pipe($.revDeleteOriginal()).pipe(cssAndJsFilter.restore)
|
|
108
109
|
.pipe($.revReplace())
|
|
109
110
|
.pipe(imgFilter).pipe($.imagemin()).pipe(imgFilter.restore)
|
|
110
111
|
.pipe(jsonFilter).pipe($.jsonmin()).pipe(jsonFilter.restore)
|
|
111
|
-
.pipe($.size({showFiles: true}))
|
|
112
|
+
.pipe($.size({ showFiles: true }))
|
|
112
113
|
.pipe(gulp.dest(paths.dist));
|
|
113
114
|
}));
|
|
114
115
|
gulp.task('serve:dist', gulp.series('build', () => browserSyncInit(paths.dist)));
|
|
@@ -124,16 +125,16 @@ function html5Mode() {
|
|
|
124
125
|
function getFiles(ext) {
|
|
125
126
|
ext = ext || '*';
|
|
126
127
|
const isArray = typeof ext != 'string';
|
|
127
|
-
return '**/*.'+(isArray?'{':'')+(isArray?ext.join():ext)+(isArray?'}':'');
|
|
128
|
+
return '**/*.' + (isArray ? '{' : '') + (isArray ? ext.join() : ext) + (isArray ? '}' : '');
|
|
128
129
|
}
|
|
129
130
|
|
|
130
131
|
function delFolder(path) {
|
|
131
|
-
return gulp.src(path, {allowEmpty: true, read: false})
|
|
132
|
+
return gulp.src(path, { allowEmpty: true, read: false })
|
|
132
133
|
.pipe($.clean());
|
|
133
134
|
}
|
|
134
135
|
|
|
135
136
|
function filter(ext, isUnrestored) {
|
|
136
|
-
return $.filter(getFiles(ext), {restore: !isUnrestored});
|
|
137
|
+
return $.filter(getFiles(ext), { restore: !isUnrestored });
|
|
137
138
|
}
|
|
138
139
|
|
|
139
140
|
function browserSyncInit(path) {
|
|
@@ -145,5 +146,5 @@ function browserSyncInit(path) {
|
|
|
145
146
|
}
|
|
146
147
|
|
|
147
148
|
function minifyHtml() {
|
|
148
|
-
return $.htmlmin({collapseWhitespace: true, conservativeCollapse: true});
|
|
149
|
+
return $.htmlmin({ collapseWhitespace: true, conservativeCollapse: true });
|
|
149
150
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "autofront",
|
|
3
|
-
"version": "2.1.
|
|
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",
|