@videinfra/static-website-builder 2.0.0-beta.2 → 2.0.0-beta.4
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/.prettierrc +11 -0
- package/README.md +2 -2
- package/bin/builder.js +17 -11
- package/eslint.config.js +39 -0
- package/gulpfile.js +63 -0
- package/init/default/config/config.js +18 -15
- package/init/default/src/html/data/global.js +1 -1
- package/init/default/src/javascripts/_entries.js +1 -1
- package/init/index.js +44 -37
- package/init/test/config/config.js +20 -16
- package/init/test/src/html/data/global.js +1 -1
- package/lib/camelize-file-name.js +1 -1
- package/lib/generate-gulp-tasks.js +12 -10
- package/lib/get-config.js +99 -52
- package/lib/get-file-names.js +3 -3
- package/lib/get-path.js +15 -22
- package/lib/globs-helper.js +22 -47
- package/lib/gulp/dynamic-task.js +1 -1
- package/lib/gulp/resolve-dynamic-task.js +1 -1
- package/lib/gulp/task-before-dest.js +2 -2
- package/lib/gulp/task-end.js +5 -5
- package/lib/gulp/task-start.js +3 -3
- package/lib/gulp/task-watch.js +10 -10
- package/lib/init/copy-folder.js +4 -4
- package/lib/init/folder-exists.js +2 -2
- package/lib/init/get-folder-list.js +3 -3
- package/lib/init/merge-package.js +8 -8
- package/lib/init/read-package.js +2 -2
- package/lib/log-error.js +3 -3
- package/lib/merge.js +3 -3
- package/lib/run-preprocess.js +2 -2
- package/lib/task-order.js +7 -13
- package/package.json +6 -4
- package/plugins/example/preprocess-config.js +1 -1
- package/plugins/example/task.js +13 -13
- package/plugins/example.js +8 -6
- package/plugins/sass-engine/preprocess-config.js +15 -19
- package/plugins/sass.js +5 -3
- package/plugins/twig/lodash-filters/filters.js +12 -10
- package/plugins/twig/lodash-filters.js +3 -3
- package/plugins/twig/symfony-filters/filters.js +18 -14
- package/plugins/twig/symfony-filters/preposition_nbsp.js +1 -1
- package/plugins/twig/symfony-filters.js +6 -6
- package/plugins/twig/symfony-functions/functions.js +2 -2
- package/plugins/twig/symfony-functions.js +6 -6
- package/plugins/twig-engine/preprocess-config.js +8 -8
- package/plugins/twig.js +11 -6
- package/tasks/browser-sync/config.js +9 -6
- package/tasks/browser-sync/preprocess-config.js +5 -7
- package/tasks/browser-sync/task.js +5 -5
- package/tasks/clean/config.js +8 -5
- package/tasks/clean/preprocess-config.js +5 -5
- package/tasks/clean/task.js +5 -5
- package/tasks/data/config.js +11 -13
- package/tasks/data/data-loader-js.js +11 -2
- package/tasks/data/data-loader-json.js +3 -3
- package/tasks/data/get-data.js +55 -52
- package/tasks/env/config.js +2 -2
- package/tasks/env/get-env.js +34 -19
- package/tasks/fonts/config.js +9 -10
- package/tasks/fonts/task.js +27 -27
- package/tasks/global/config.js +1 -1
- package/tasks/html/config.js +13 -15
- package/tasks/html/task.js +55 -54
- package/tasks/icons/config.js +17 -22
- package/tasks/icons/preprocess-config.js +4 -4
- package/tasks/icons/task.js +34 -35
- package/tasks/images/config.js +11 -14
- package/tasks/images/task.js +26 -26
- package/tasks/javascripts/config.js +12 -14
- package/tasks/javascripts/preprocess-config.js +45 -32
- package/tasks/javascripts/task.js +40 -43
- package/tasks/sitemap/config.js +12 -13
- package/tasks/sitemap/preprocess-config.js +2 -2
- package/tasks/sitemap/task.js +44 -38
- package/tasks/sizereport/config.js +5 -3
- package/tasks/sizereport/task.js +8 -8
- package/tasks/static/config.js +12 -15
- package/tasks/static/task.js +27 -28
- package/tasks/stylesheets/config.js +16 -19
- package/tasks/stylesheets/preprocess-config.js +5 -5
- package/tasks/stylesheets/task.js +28 -28
- package/tests/build/build.test.js +23 -22
- package/tests/camelize-file-name.test.js +1 -1
- package/tests/generate-gulp-tasks.test.js +11 -5
- package/tests/glob-helper.test.js +1 -1
- package/tests/merge.test.js +1 -1
- package/tests/preposition_nbsp.test.js +7 -6
- package/tests/run-preprocess.test.js +2 -1
- package/tests/sass-stringify.test.js +1 -1
- package/tests/sitemap.test.js +7 -6
- package/vendor/gulp-rolldown/index.js +24 -56
- package/vendor/gulp-rolldown/plugin-raw.js +17 -0
- package/vendor/gulp-rolldown/plugin-virtual-entry.js +30 -0
- package/vendor/gulp-sass/README.md +10 -19
- package/vendor/gulp-sass/index.js +129 -135
- package/vendor/gulp-sass/package.json +1 -0
- package/vendor/gulp-sass/sass-stringify.js +1 -1
- package/vendor/gulp-twig/index.js +32 -27
- package/vendor/gulp-twig/package.json +1 -0
- package/.eslintrc.js +0 -35
- package/gulpfile.js/index.js +0 -32
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const fsPromises = fs.promises;
|
|
1
|
+
import path from 'path';
|
|
2
|
+
import { fileURLToPath } from 'node:url';
|
|
3
|
+
import fsPromises from 'fs/promises';
|
|
5
4
|
|
|
5
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
6
|
+
const publicPath = path.resolve(__dirname, 'public');
|
|
6
7
|
|
|
7
8
|
test('TWIG templates rendered and minified with JS and JSON data', () => {
|
|
8
|
-
return fsPromises.readFile(path.resolve(publicPath, 'index.html'), {
|
|
9
|
+
return fsPromises.readFile(path.resolve(publicPath, 'index.html'), { encoding: 'utf8' }).then((html) => {
|
|
9
10
|
expect(html).toBe('<html><body><h1>Hello World!</h1></body></html>');
|
|
10
11
|
});
|
|
11
12
|
});
|
|
@@ -16,37 +17,37 @@ test('Multiple TWIG templates rendered', () => {
|
|
|
16
17
|
});
|
|
17
18
|
|
|
18
19
|
test('SASS variable test', () => {
|
|
19
|
-
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/variable-test.css'), {
|
|
20
|
+
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/variable-test.css'), { encoding: 'utf8' }).then((css) => {
|
|
20
21
|
expect(css).toBe('main{background:#fff;color:#222}');
|
|
21
22
|
});
|
|
22
23
|
});
|
|
23
24
|
|
|
24
25
|
test('SASS import test', () => {
|
|
25
|
-
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/import-test.css'), {
|
|
26
|
+
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/import-test.css'), { encoding: 'utf8' }).then((css) => {
|
|
26
27
|
expect(css).toBe('.btn{background:#222;color:#fff}');
|
|
27
28
|
});
|
|
28
29
|
});
|
|
29
30
|
|
|
30
31
|
test('SASS sub-folder import test', () => {
|
|
31
|
-
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/sub-folder/import-test.css'), {
|
|
32
|
+
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/sub-folder/import-test.css'), { encoding: 'utf8' }).then((css) => {
|
|
32
33
|
expect(css).toBe('.btn{background:#222;color:#fff}');
|
|
33
34
|
});
|
|
34
35
|
});
|
|
35
36
|
|
|
36
37
|
test('SASS autoprefixer test', () => {
|
|
37
|
-
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/autoprefixer-test.css'), {
|
|
38
|
+
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/autoprefixer-test.css'), { encoding: 'utf8' }).then((css) => {
|
|
38
39
|
expect(css).toBe('main{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}');
|
|
39
40
|
});
|
|
40
41
|
});
|
|
41
42
|
|
|
42
43
|
test('CSS nano ignore test', () => {
|
|
43
|
-
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/ignore-test.css'), {
|
|
44
|
+
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/ignore-test.css'), { encoding: 'utf8' }).then((css) => {
|
|
44
45
|
expect(css).toBe(':root{--yes: ;--no:initial}');
|
|
45
46
|
});
|
|
46
47
|
});
|
|
47
48
|
|
|
48
49
|
test('CSS nano nested calc test', () => {
|
|
49
|
-
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/nested-calc-test.css'), {
|
|
50
|
+
return fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/nested-calc-test.css'), { encoding: 'utf8' }).then((css) => {
|
|
50
51
|
expect(css).toBe('body{padding-top:calc(10vw + 15vh)}');
|
|
51
52
|
});
|
|
52
53
|
});
|
|
@@ -63,7 +64,7 @@ test('Font file fake not copied', () => {
|
|
|
63
64
|
|
|
64
65
|
test('shared.js file exists', () => {
|
|
65
66
|
return Promise.all([
|
|
66
|
-
fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/shared.js'), {
|
|
67
|
+
fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/shared.js'), { encoding: 'utf8' }).then((js) => {
|
|
67
68
|
expect(js.indexOf('console.log(`Shared file loaded`)')).not.toBe(-1);
|
|
68
69
|
}),
|
|
69
70
|
]);
|
|
@@ -71,36 +72,36 @@ test('shared.js file exists', () => {
|
|
|
71
72
|
|
|
72
73
|
test('main.js file exists', () => {
|
|
73
74
|
return Promise.all([
|
|
74
|
-
fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/main.js'), {
|
|
75
|
+
fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/main.js'), { encoding: 'utf8' }).then((js) => {
|
|
75
76
|
expect(js.indexOf('console.log(`Hello from main page!`')).not.toBe(-1);
|
|
76
77
|
}),
|
|
77
|
-
fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/alt/main.js'), {
|
|
78
|
+
fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/alt/main.js'), { encoding: 'utf8' }).then((js) => {
|
|
78
79
|
expect(js.indexOf('console.log(`Hello from main page!`')).not.toBe(-1);
|
|
79
80
|
}),
|
|
80
81
|
]);
|
|
81
82
|
});
|
|
82
83
|
|
|
83
84
|
test('other.js file exists', () => {
|
|
84
|
-
return fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/other.js'), {
|
|
85
|
+
return fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/other.js'), { encoding: 'utf8' }).then((js) => {
|
|
85
86
|
expect(js.indexOf('console.log(`Hello from other page!`)')).not.toBe(-1);
|
|
86
87
|
});
|
|
87
88
|
});
|
|
88
89
|
|
|
89
90
|
test('something.ts was converted', () => {
|
|
90
91
|
return Promise.all([
|
|
91
|
-
fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/something.js'), {
|
|
92
|
+
fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/something.js'), { encoding: 'utf8' }).then((js) => {
|
|
92
93
|
expect(js.indexOf('console.log({name:`something`})')).not.toBe(-1);
|
|
93
94
|
}),
|
|
94
95
|
]);
|
|
95
96
|
});
|
|
96
97
|
|
|
97
|
-
test(
|
|
98
|
+
test("alt/other.js file doesn't exist", async () => {
|
|
98
99
|
expect(fsPromises.stat(path.resolve(publicPath, 'assets/javascripts/alt/other.js'))).rejects.toThrow();
|
|
99
100
|
});
|
|
100
101
|
|
|
101
102
|
test('.env and .env.local files loaded', () => {
|
|
102
103
|
return Promise.all([
|
|
103
|
-
fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/main.js'), {
|
|
104
|
+
fsPromises.readFile(path.resolve(publicPath, 'assets/javascripts/main.js'), { encoding: 'utf8' }).then((js) => {
|
|
104
105
|
expect(js.indexOf('console.log(`env.host ==`,`https://test-local.tld`)')).not.toBe(-1);
|
|
105
106
|
expect(js.indexOf('console.log(`env.foo ==`,`foo-global`)')).not.toBe(-1);
|
|
106
107
|
expect(js.indexOf('console.log(`env.bar ==`,`bar-local`)')).not.toBe(-1);
|
|
@@ -108,13 +109,13 @@ test('.env and .env.local files loaded', () => {
|
|
|
108
109
|
expect(js.indexOf('console.log(`env.typeBoolFalse ==`,!1)')).not.toBe(-1);
|
|
109
110
|
expect(js.indexOf('console.log(`env.typeNumber ==`,123.456)')).not.toBe(-1);
|
|
110
111
|
}),
|
|
111
|
-
fsPromises.readFile(path.resolve(publicPath, 'env.html'), {
|
|
112
|
+
fsPromises.readFile(path.resolve(publicPath, 'env.html'), { encoding: 'utf8' }).then((html) => {
|
|
112
113
|
expect(html.indexOf('<p>HOST: https://test-local.tld</p>')).not.toBe(-1);
|
|
113
114
|
expect(html.indexOf('<p>TYPE_BOOL_TRUE: pass</p>')).not.toBe(-1);
|
|
114
115
|
expect(html.indexOf('<p>TYPE_BOOL_FALSE: pass</p>')).not.toBe(-1);
|
|
115
116
|
expect(html.indexOf('<p>TYPE_NUMBER: 123.456</p>')).not.toBe(-1);
|
|
116
117
|
}),
|
|
117
|
-
fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/env-test.css'), {
|
|
118
|
+
fsPromises.readFile(path.resolve(publicPath, 'assets/stylesheets/env-test.css'), { encoding: 'utf8' }).then((css) => {
|
|
118
119
|
expect(css.indexOf('.env-test:before{content:"https://test-local.tld"}')).not.toBe(-1);
|
|
119
120
|
expect(css.indexOf('--env-test-bool-true:true')).not.toBe(-1);
|
|
120
121
|
expect(css.indexOf('--env-test-bool-false:false')).not.toBe(-1);
|
|
@@ -125,13 +126,13 @@ test('.env and .env.local files loaded', () => {
|
|
|
125
126
|
});
|
|
126
127
|
|
|
127
128
|
test('process.env available in html/data', () => {
|
|
128
|
-
return fsPromises.readFile(path.resolve(publicPath, 'env.html'), {
|
|
129
|
+
return fsPromises.readFile(path.resolve(publicPath, 'env.html'), { encoding: 'utf8' }).then((html) => {
|
|
129
130
|
expect(html.indexOf('<p>HOST FROM GLOBAL JS: https://test-local.tld</p>')).not.toBe(-1);
|
|
130
131
|
});
|
|
131
132
|
});
|
|
132
133
|
|
|
133
134
|
test('icons generated', () => {
|
|
134
|
-
return fsPromises.readFile(path.resolve(publicPath, 'assets/images/icons.svg'), {
|
|
135
|
+
return fsPromises.readFile(path.resolve(publicPath, 'assets/images/icons.svg'), { encoding: 'utf8' }).then((svg) => {
|
|
135
136
|
expect(svg.indexOf('<symbol id="example-arrow">')).not.toBe(-1);
|
|
136
137
|
});
|
|
137
138
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import pick from 'lodash/pick.js';
|
|
2
|
+
import { generateTaskList } from '../lib/generate-gulp-tasks.js';
|
|
3
|
+
import { BEFORE_BUILD, BUILD, AFTER_BUILD, BEFORE_WATCH, WATCH } from '../lib/task-order.js';
|
|
4
4
|
|
|
5
5
|
test('Tasks are organized correctly', () => {
|
|
6
6
|
const beforeBuildA = () => {};
|
|
@@ -27,13 +27,19 @@ test('Tasks are organized correctly', () => {
|
|
|
27
27
|
],
|
|
28
28
|
}};
|
|
29
29
|
|
|
30
|
-
expect(pick(generateTaskList(taskConfig), ['default', 'build'])).toEqual({
|
|
30
|
+
expect(pick(generateTaskList(taskConfig), ['default', 'watch', 'build'])).toEqual({
|
|
31
31
|
default: [
|
|
32
32
|
[beforeBuildA, beforeBuildB],
|
|
33
33
|
[buildA, buildB],
|
|
34
34
|
[beforeWatchA],
|
|
35
35
|
[watchA],
|
|
36
36
|
],
|
|
37
|
+
watch: [
|
|
38
|
+
[beforeBuildA, beforeBuildB],
|
|
39
|
+
[buildA, buildB],
|
|
40
|
+
[beforeWatchA],
|
|
41
|
+
[watchA],
|
|
42
|
+
],
|
|
37
43
|
build: [
|
|
38
44
|
[beforeBuildA, beforeBuildB],
|
|
39
45
|
[buildA, buildB],
|
|
@@ -62,7 +68,7 @@ test('Skipping tasks doesn\'t genearate empty arrays', () => {
|
|
|
62
68
|
],
|
|
63
69
|
}};
|
|
64
70
|
|
|
65
|
-
const taskList = pick(generateTaskList(taskConfig), ['default', 'build']);
|
|
71
|
+
const taskList = pick(generateTaskList(taskConfig), ['default', 'watch', 'build']);
|
|
66
72
|
|
|
67
73
|
for (let taskName in taskList) {
|
|
68
74
|
taskList[taskName].forEach((parallel) => {
|
package/tests/merge.test.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import path from 'path';
|
|
2
|
+
import { fileURLToPath } from 'node:url';
|
|
3
|
+
import fsPromises from 'fs/promises';
|
|
4
|
+
import preposition_nbsp from '../plugins/twig/symfony-filters/preposition_nbsp.js';
|
|
5
5
|
|
|
6
|
-
const
|
|
6
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
7
|
+
const publicPath = path.resolve(__dirname, 'build', 'public');
|
|
7
8
|
|
|
8
9
|
test('preposition_nbsp english', () => {
|
|
9
10
|
expect(preposition_nbsp('hello world')).toEqual('hello world');
|
|
@@ -43,7 +44,7 @@ test('preposition_nbsp skip tags', () => {
|
|
|
43
44
|
});
|
|
44
45
|
|
|
45
46
|
test('Preposition TWIG filter applied', () => {
|
|
46
|
-
return fsPromises.readFile(path.resolve(publicPath, 'preposition.html'), {
|
|
47
|
+
return fsPromises.readFile(path.resolve(publicPath, 'preposition.html'), { encoding: 'utf8' }).then((html) => {
|
|
47
48
|
expect(html).toBe('<html><body>hello at world</body></html>');
|
|
48
49
|
});
|
|
49
50
|
});
|
package/tests/sitemap.test.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
import path from 'path';
|
|
2
|
+
import { fileURLToPath } from 'node:url';
|
|
3
|
+
import fsPromises from 'fs/promises';
|
|
4
|
+
|
|
5
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
2
6
|
const publicPath = path.resolve(__dirname, 'build', 'public');
|
|
3
|
-
const fs = require('fs')
|
|
4
|
-
const fsPromises = fs.promises;
|
|
5
7
|
|
|
6
|
-
test(
|
|
7
|
-
return fsPromises.readFile(path.resolve(publicPath, 'sitemap.xml'), {
|
|
8
|
+
test("Sitemap generated, but doesn't include 404 page", () => {
|
|
9
|
+
return fsPromises.readFile(path.resolve(publicPath, 'sitemap.xml'), { encoding: 'utf8' }).then((html) => {
|
|
8
10
|
expect(html.includes('<loc>https://test-local.tld/404.html</loc>')).toBe(false);
|
|
9
11
|
});
|
|
10
12
|
});
|
|
11
|
-
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { Transform } from 'stream';
|
|
2
|
+
import PluginError from 'plugin-error';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
import { watch, build } from 'rolldown';
|
|
5
|
+
import browserSync from 'browser-sync';
|
|
6
|
+
|
|
7
|
+
import virtualEntryPlugin from './plugin-virtual-entry.js';
|
|
8
|
+
import rawPlugin from './plugin-raw.js';
|
|
9
|
+
|
|
10
|
+
const PLUGIN_NAME = 'gulp-starter-rolldown';
|
|
7
11
|
|
|
8
12
|
/**
|
|
9
13
|
* Evaluate entry file
|
|
@@ -25,58 +29,26 @@ function evalEntry(code) {
|
|
|
25
29
|
return result;
|
|
26
30
|
}
|
|
27
31
|
|
|
28
|
-
/**
|
|
29
|
-
* Virtual entry plugin to generate files from each of the entries in the entry file
|
|
30
|
-
*
|
|
31
|
-
* @param {object} entries Entries object from the entry file
|
|
32
|
-
* @returns {object} Virtual entry plugin
|
|
33
|
-
*/
|
|
34
|
-
function virtualEntryPlugin(entries) {
|
|
35
|
-
const keys = Object.keys(entries);
|
|
36
|
-
|
|
37
|
-
return {
|
|
38
|
-
name: 'virtual-entry-plugin', // this name will show up in logs and errors
|
|
39
|
-
|
|
40
|
-
resolveId: {
|
|
41
|
-
order: 'post',
|
|
42
|
-
handler(source) {
|
|
43
|
-
if (keys.includes(source)) {
|
|
44
|
-
return source;
|
|
45
|
-
}
|
|
46
|
-
return null; // other ids should be handled as usual
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
load(id) {
|
|
51
|
-
if (keys.includes(id)) {
|
|
52
|
-
return entries[id].map((entry) => `import '${entry}';`).join('\n');
|
|
53
|
-
}
|
|
54
|
-
return null; // other ids should be handled as usual
|
|
55
|
-
},
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
|
|
59
32
|
const watcherList = {};
|
|
60
33
|
|
|
61
34
|
// transformer class
|
|
62
35
|
class GulpRolldown extends Transform {
|
|
63
|
-
|
|
64
36
|
_build(file, cb, inputOptions, outputOptions) {
|
|
65
|
-
|
|
37
|
+
build(inputOptions)
|
|
66
38
|
.then((result) => {
|
|
67
39
|
// Prevent gulp from outputing anything
|
|
68
40
|
cb();
|
|
69
41
|
})
|
|
70
|
-
.catch(err => {
|
|
42
|
+
.catch((err) => {
|
|
71
43
|
process.nextTick(() => {
|
|
72
|
-
this.emit('error', new PluginError(PLUGIN_NAME, err))
|
|
73
|
-
cb()
|
|
44
|
+
this.emit('error', new PluginError(PLUGIN_NAME, err));
|
|
45
|
+
cb();
|
|
74
46
|
});
|
|
75
47
|
});
|
|
76
48
|
}
|
|
77
49
|
|
|
78
50
|
_watch(file, cb, inputOptions, outputOptions) {
|
|
79
|
-
const watcher = watcherList[file.path] =
|
|
51
|
+
const watcher = (watcherList[file.path] = watch(inputOptions));
|
|
80
52
|
|
|
81
53
|
watcher.on('event', (event) => {
|
|
82
54
|
if (event.code === 'BUNDLE_END') {
|
|
@@ -94,12 +66,12 @@ class GulpRolldown extends Transform {
|
|
|
94
66
|
_transform(file, encoding, cb) {
|
|
95
67
|
// Empty or unavailable files, not supported
|
|
96
68
|
if (file.isNull()) {
|
|
97
|
-
return cb(null, file)
|
|
69
|
+
return cb(null, file);
|
|
98
70
|
}
|
|
99
71
|
|
|
100
72
|
// Stream, not supported
|
|
101
73
|
if (file.isStream()) {
|
|
102
|
-
return cb(new PluginError(PLUGIN_NAME, 'Streaming not supported'))
|
|
74
|
+
return cb(new PluginError(PLUGIN_NAME, 'Streaming not supported'));
|
|
103
75
|
}
|
|
104
76
|
|
|
105
77
|
const entries = this.inputOptions.entries;
|
|
@@ -116,18 +88,13 @@ class GulpRolldown extends Transform {
|
|
|
116
88
|
}
|
|
117
89
|
|
|
118
90
|
// Transform options
|
|
119
|
-
const
|
|
120
|
-
const inputOptions = Object.assign({}, this.inputOptions)
|
|
91
|
+
const inputOptions = Object.assign({}, this.inputOptions);
|
|
121
92
|
const outputOptions = Object.assign({}, this.outputOptions);
|
|
122
93
|
|
|
123
|
-
delete
|
|
124
|
-
delete(outputOptions.fullDir);
|
|
94
|
+
delete inputOptions.entries;
|
|
125
95
|
|
|
126
96
|
// Parse entry file
|
|
127
97
|
const entryContent = evalEntry(file.contents.toString());
|
|
128
|
-
if (!entryContent) {
|
|
129
|
-
// @TODO Couldn't read entry file, throw an error???
|
|
130
|
-
}
|
|
131
98
|
|
|
132
99
|
// Add code splitting with shared
|
|
133
100
|
if (entries.shared) {
|
|
@@ -153,6 +120,7 @@ class GulpRolldown extends Transform {
|
|
|
153
120
|
// Set input files
|
|
154
121
|
inputOptions.input = Object.keys(entryContent);
|
|
155
122
|
inputOptions.plugins = [
|
|
123
|
+
rawPlugin(),
|
|
156
124
|
virtualEntryPlugin(entryContent),
|
|
157
125
|
].concat(inputOptions.plugins || []);
|
|
158
126
|
|
|
@@ -174,11 +142,11 @@ class GulpRolldown extends Transform {
|
|
|
174
142
|
* @param {object} outputOptions
|
|
175
143
|
* @returns
|
|
176
144
|
*/
|
|
177
|
-
|
|
178
|
-
const stream = new GulpRolldown({objectMode: true})
|
|
145
|
+
export default function factory(inputOptions, outputOptions) {
|
|
146
|
+
const stream = new GulpRolldown({ objectMode: true });
|
|
179
147
|
|
|
180
|
-
stream.inputOptions = inputOptions
|
|
181
|
-
stream.outputOptions = outputOptions
|
|
148
|
+
stream.inputOptions = inputOptions;
|
|
149
|
+
stream.outputOptions = outputOptions;
|
|
182
150
|
|
|
183
|
-
return stream
|
|
151
|
+
return stream;
|
|
184
152
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import fs from 'node:fs';
|
|
2
|
+
|
|
3
|
+
export default function rawPlugin() {
|
|
4
|
+
return {
|
|
5
|
+
name: 'raw',
|
|
6
|
+
load: {
|
|
7
|
+
filter: {
|
|
8
|
+
id: /\?raw$/,
|
|
9
|
+
},
|
|
10
|
+
handler(id) {
|
|
11
|
+
const content = fs.readFileSync(id.replace('?raw', '')).toString('utf-8');
|
|
12
|
+
return `export default \`${content.replace(/`/g, '\\`')}\``;
|
|
13
|
+
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Virtual entry plugin to generate files from each of the entries in the entry file
|
|
3
|
+
*
|
|
4
|
+
* @param {object} entries Entries object from the entry file
|
|
5
|
+
* @returns {object} Virtual entry plugin
|
|
6
|
+
*/
|
|
7
|
+
export default function virtualEntryPlugin(entries) {
|
|
8
|
+
const keys = Object.keys(entries);
|
|
9
|
+
|
|
10
|
+
return {
|
|
11
|
+
name: 'virtual-entry-plugin', // this name will show up in logs and errors
|
|
12
|
+
|
|
13
|
+
resolveId: {
|
|
14
|
+
order: 'post',
|
|
15
|
+
handler(source) {
|
|
16
|
+
if (keys.includes(source)) {
|
|
17
|
+
return source;
|
|
18
|
+
}
|
|
19
|
+
return null; // other ids should be handled as usual
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
load(id) {
|
|
24
|
+
if (keys.includes(id)) {
|
|
25
|
+
return entries[id].map((entry) => `import '${entry}';`).join('\n');
|
|
26
|
+
}
|
|
27
|
+
return null; // other ids should be handled as usual
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
}
|
|
@@ -51,17 +51,16 @@ To render your CSS with a build task, then watch your files for changes, you mig
|
|
|
51
51
|
```js
|
|
52
52
|
'use strict';
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
import gulp from 'gulp';
|
|
55
55
|
const sass = require('gulp-sass')(require('sass'));
|
|
56
56
|
|
|
57
|
-
function buildStyles() {
|
|
57
|
+
export function buildStyles() {
|
|
58
58
|
return gulp.src('./sass/**/*.scss')
|
|
59
59
|
.pipe(sass().on('error', sass.logError))
|
|
60
60
|
.pipe(gulp.dest('./css'));
|
|
61
61
|
};
|
|
62
62
|
|
|
63
|
-
|
|
64
|
-
exports.watch = function () {
|
|
63
|
+
export function watch () {
|
|
65
64
|
gulp.watch('./sass/**/*.scss', ['sass']);
|
|
66
65
|
};
|
|
67
66
|
```
|
|
@@ -86,25 +85,21 @@ To change the final output of your CSS, you can pass an options object to your r
|
|
|
86
85
|
For example, to compress your CSS, you can call `sass({outputStyle: 'compressed'}`. In the context of a Gulp task, that looks like this:
|
|
87
86
|
|
|
88
87
|
```js
|
|
89
|
-
function buildStyles() {
|
|
88
|
+
export function buildStyles() {
|
|
90
89
|
return gulp.src('./sass/**/*.scss')
|
|
91
90
|
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
|
|
92
91
|
.pipe(gulp.dest('./css'));
|
|
93
92
|
};
|
|
94
|
-
|
|
95
|
-
exports.buildStyles = buildStyles;
|
|
96
93
|
```
|
|
97
94
|
|
|
98
95
|
Or this for synchronous rendering:
|
|
99
96
|
|
|
100
97
|
```js
|
|
101
|
-
function buildStyles() {
|
|
98
|
+
export function buildStyles() {
|
|
102
99
|
return gulp.src('./sass/**/*.scss')
|
|
103
100
|
.pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
|
|
104
101
|
.pipe(gulp.dest('./css'));
|
|
105
102
|
};
|
|
106
|
-
|
|
107
|
-
exports.buildStyles = buildStyles;
|
|
108
103
|
```
|
|
109
104
|
|
|
110
105
|
### Include a source map
|
|
@@ -112,33 +107,29 @@ exports.buildStyles = buildStyles;
|
|
|
112
107
|
`gulp-sass` can be used in tandem with [`gulp-sourcemaps`](https://github.com/gulp-sourcemaps/gulp-sourcemaps) to generate source maps for the Sass-to-CSS compilation. You will need to initialize `gulp-sourcemaps` _before_ running `gulp-sass`, and write the source maps after.
|
|
113
108
|
|
|
114
109
|
```js
|
|
115
|
-
|
|
110
|
+
import sourcemaps from 'gulp-sourcemaps';
|
|
116
111
|
|
|
117
|
-
function buildStyles() {
|
|
112
|
+
export function buildStyles() {
|
|
118
113
|
return gulp.src('./sass/**/*.scss')
|
|
119
114
|
.pipe(sourcemaps.init())
|
|
120
115
|
.pipe(sass().on('error', sass.logError))
|
|
121
116
|
.pipe(sourcemaps.write())
|
|
122
117
|
.pipe(gulp.dest('./css'));
|
|
123
118
|
}
|
|
124
|
-
|
|
125
|
-
exports.buildStyles = buildStyles;
|
|
126
119
|
```
|
|
127
120
|
|
|
128
121
|
By default, `gulp-sourcemaps` writes the source maps inline, in the compiled CSS files. To write them to a separate file, specify a path relative to the `gulp.dest()` destination in the `sourcemaps.write()` function.
|
|
129
122
|
|
|
130
123
|
```js
|
|
131
|
-
|
|
124
|
+
import sourcemaps from 'gulp-sourcemaps';
|
|
132
125
|
|
|
133
|
-
function buildStyles() {
|
|
126
|
+
export function buildStyles() {
|
|
134
127
|
return gulp.src('./sass/**/*.scss')
|
|
135
128
|
.pipe(sourcemaps.init())
|
|
136
129
|
.pipe(sass().on('error', sass.logError))
|
|
137
130
|
.pipe(sourcemaps.write('./maps'))
|
|
138
131
|
.pipe(gulp.dest('./css'));
|
|
139
132
|
};
|
|
140
|
-
|
|
141
|
-
exports.buildStyles = buildStyles;
|
|
142
133
|
```
|
|
143
134
|
|
|
144
135
|
<h2 id="migrating-to-version-5">Migrating to version 5</h2>
|
|
@@ -159,7 +150,7 @@ These changes look something like this:
|
|
|
159
150
|
|
|
160
151
|
```diff
|
|
161
152
|
- const sass = require('gulp-sass'));
|
|
162
|
-
-
|
|
153
|
+
- import compiler from 'sass';
|
|
163
154
|
- sass.compiler = compiler;
|
|
164
155
|
+ const sass = require('gulp-sass')(require('sass'));
|
|
165
156
|
```
|