@madebyseed/seed-cli-tools 1.6.0 → 1.8.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/.eslintrc +2 -1
- package/lib/gulpfile.js +18 -4
- package/lib/tasks/build-css.js +18 -10
- package/lib/tasks/build-js.js +17 -3
- package/lib/tasks/includes/config.js +32 -16
- package/lib/tasks/includes/messages.js +8 -2
- package/lib/tasks/includes/utilities.js +12 -12
- package/lib/tasks/watchers.js +4 -4
- package/package.json +6 -2
- package/src/gulpfile.js +18 -1
- package/src/tasks/build-css.js +25 -19
- package/src/tasks/build-js.js +14 -9
- package/src/tasks/includes/config.js +35 -16
- package/src/tasks/includes/messages.js +19 -8
- package/src/tasks/includes/utilities.js +7 -7
- package/src/tasks/watchers.js +4 -4
package/.eslintrc
CHANGED
package/lib/gulpfile.js
CHANGED
|
@@ -1,9 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var gulp = require("gulp");
|
|
3
|
+
var gulp = require("gulp");
|
|
4
|
+
|
|
5
|
+
var utils = require('./tasks/includes/utilities.js'); // imports gulp tasks from the `tasks` directory
|
|
4
6
|
|
|
5
7
|
|
|
6
8
|
require("require-directory")(module, "./tasks");
|
|
9
|
+
/**
|
|
10
|
+
* Handles the error summary at the end if there are errors to output.
|
|
11
|
+
* This task will only be run for the build and zip tasks.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
gulp.task('output:errors', function (done) {
|
|
16
|
+
if (utils.hasErrors()) {
|
|
17
|
+
utils.outputErrors();
|
|
18
|
+
} else {
|
|
19
|
+
done();
|
|
20
|
+
}
|
|
21
|
+
});
|
|
7
22
|
/**
|
|
8
23
|
* Does a full clean/rebuild of your theme
|
|
9
24
|
*
|
|
@@ -12,7 +27,6 @@ require("require-directory")(module, "./tasks");
|
|
|
12
27
|
* @static
|
|
13
28
|
*/
|
|
14
29
|
|
|
15
|
-
|
|
16
30
|
gulp.task("build", gulp.series("clean", gulp.parallel("build:js", "build:vendor-js", "build:css", "build:assets", "build:svg")));
|
|
17
31
|
/**
|
|
18
32
|
* Does a full clean/rebuild of your theme and creates a `.zip` compatible with
|
|
@@ -25,7 +39,7 @@ gulp.task("build", gulp.series("clean", gulp.parallel("build:js", "build:vendor-
|
|
|
25
39
|
|
|
26
40
|
gulp.task("zip", gulp.series("build", "shopify:package:dist", "copy:zip"));
|
|
27
41
|
/**
|
|
28
|
-
*
|
|
42
|
+
* Synchronizes the development theme settings with our src folder theme settings
|
|
29
43
|
*
|
|
30
44
|
* @function sync-settings
|
|
31
45
|
* @memberof seed-cli.tasks.deploy
|
|
@@ -43,7 +57,7 @@ gulp.task("sync-settings", gulp.series("generate:tmp", "shopify:pull:dev:tmp", "
|
|
|
43
57
|
* @static
|
|
44
58
|
*/
|
|
45
59
|
|
|
46
|
-
gulp.task("watch", gulp.series("build", gulp.parallel("watch:src", "watch:dist", "shopify:serve:dist")));
|
|
60
|
+
gulp.task("watch", gulp.series("build", "output:errors", gulp.parallel("watch:src", "watch:dist", "shopify:serve:dist")));
|
|
47
61
|
/**
|
|
48
62
|
*
|
|
49
63
|
* @summary pulls theme from specified environment theme into src
|
package/lib/tasks/build-css.js
CHANGED
|
@@ -16,13 +16,12 @@ var config = require("./includes/config.js");
|
|
|
16
16
|
|
|
17
17
|
var messages = require("./includes/messages.js");
|
|
18
18
|
|
|
19
|
-
var
|
|
20
|
-
usesTailwind = _require.usesTailwind;
|
|
19
|
+
var utils = require("./includes/utilities");
|
|
21
20
|
|
|
22
21
|
var tailwindConfig = config.usesTailwind ? require(path.join(config.themeRoot, config.tailwindConfig)) : {};
|
|
23
22
|
var assets = config.usesTailwind || tailwindConfig.mode === "jit" ? [config.src.css, config.src.sections, config.src.layout, config.src.snippets, config.src.assets, config.src.js, config.src.icons, config.tailwindConfig] : [config.src.css, config.tailwindConfig];
|
|
24
23
|
/**
|
|
25
|
-
*
|
|
24
|
+
* Process css and tailwind
|
|
26
25
|
*
|
|
27
26
|
* @param {Array} files
|
|
28
27
|
* @returns {Stream}
|
|
@@ -30,11 +29,19 @@ var assets = config.usesTailwind || tailwindConfig.mode === "jit" ? [config.src.
|
|
|
30
29
|
*/
|
|
31
30
|
|
|
32
31
|
function processCss() {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
32
|
+
return gulp.src(config.roots.css).pipe(plumber(utils.errorHandler)).pipe(postcss(config.plugins.postcss)).pipe(gulp.dest(config.dist.assets));
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Process sass files
|
|
36
|
+
*
|
|
37
|
+
* @param {Array} files
|
|
38
|
+
* @returns {Stream}
|
|
39
|
+
* @private
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
function processSass() {
|
|
44
|
+
return gulp.src(config.roots.scss).pipe(plumber(utils.errorHandler)).pipe(sass()).pipe(postcss(config.plugins.postcss)).pipe(gulp.dest(config.dist.assets));
|
|
38
45
|
}
|
|
39
46
|
/**
|
|
40
47
|
* Concatenate css via gulp-cssimport
|
|
@@ -46,7 +53,7 @@ function processCss() {
|
|
|
46
53
|
|
|
47
54
|
|
|
48
55
|
gulp.task("build:css", function () {
|
|
49
|
-
return processCss();
|
|
56
|
+
return Promise.all([processCss(), processSass()]);
|
|
50
57
|
});
|
|
51
58
|
/**
|
|
52
59
|
* Watches css in the `/src` directory
|
|
@@ -60,9 +67,10 @@ gulp.task("watch:css", function () {
|
|
|
60
67
|
chokidar.watch(assets, {
|
|
61
68
|
ignoreInitial: true
|
|
62
69
|
}).on("all", function (event, path) {
|
|
63
|
-
var isCssFile =
|
|
70
|
+
var isCssFile = /\.s[ac]ss$/i.test(path); // Don't log event twice
|
|
64
71
|
|
|
65
72
|
if (isCssFile) {
|
|
73
|
+
processSass();
|
|
66
74
|
messages.logFileEvent(event, path);
|
|
67
75
|
}
|
|
68
76
|
|
package/lib/tasks/build-js.js
CHANGED
|
@@ -4,7 +4,9 @@ var gulp = require('gulp');
|
|
|
4
4
|
|
|
5
5
|
var gulpif = require('gulp-if');
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var uglifyjs = require('uglify-js');
|
|
8
|
+
|
|
9
|
+
var composer = require('gulp-uglify/composer');
|
|
8
10
|
|
|
9
11
|
var include = require('gulp-include');
|
|
10
12
|
|
|
@@ -12,18 +14,30 @@ var plumber = require('gulp-plumber');
|
|
|
12
14
|
|
|
13
15
|
var chokidar = require('chokidar');
|
|
14
16
|
|
|
17
|
+
var minify = composer(uglifyjs, console);
|
|
18
|
+
|
|
19
|
+
var gulpWebpack = require('webpack-stream');
|
|
20
|
+
|
|
21
|
+
var webpack = require('webpack');
|
|
22
|
+
|
|
23
|
+
var utils = require("./includes/utilities");
|
|
24
|
+
|
|
15
25
|
var config = require('./includes/config.js');
|
|
16
26
|
|
|
17
27
|
var messages = require('./includes/messages.js');
|
|
18
28
|
|
|
19
29
|
function processThemeJs() {
|
|
20
30
|
messages.logProcessFiles('build:js');
|
|
21
|
-
return gulp.src([config.roots.js, "!".concat(config.roots.vendorJs)]
|
|
31
|
+
return gulp.src([config.roots.js, "!".concat(config.roots.vendorJs)], {
|
|
32
|
+
allowEmpty: true
|
|
33
|
+
}).pipe(plumber(utils.errorHandler)).pipe(gulpif(config.usesModuleBundler, gulpWebpack(config.plugins.webpack, webpack), include())).pipe(gulpif(config.optimize && !config.usesModuleBundler, minify())).pipe(gulp.dest(config.dist.assets));
|
|
22
34
|
}
|
|
23
35
|
|
|
24
36
|
function processVendorJs() {
|
|
25
37
|
messages.logProcessFiles('build:vendor-js');
|
|
26
|
-
return gulp.src(config.roots.vendorJs
|
|
38
|
+
return gulp.src(config.roots.vendorJs, {
|
|
39
|
+
allowEmpty: true
|
|
40
|
+
}).pipe(plumber()).pipe(include()).pipe(minify({
|
|
27
41
|
mangle: true,
|
|
28
42
|
compress: true
|
|
29
43
|
})).pipe(gulp.dest(config.dist.assets));
|
|
@@ -14,8 +14,12 @@ var cssnano = require("cssnano");
|
|
|
14
14
|
|
|
15
15
|
var pxtorem = require('postcss-pxtorem');
|
|
16
16
|
|
|
17
|
+
var reporter = require('postcss-reporter');
|
|
18
|
+
|
|
17
19
|
var argv = require("minimist")(process.argv.slice(2));
|
|
18
20
|
|
|
21
|
+
var webpack = require('webpack');
|
|
22
|
+
|
|
19
23
|
var themeRoot = findRoot(process.cwd());
|
|
20
24
|
var tailwindConfig = 'tailwind.config.js';
|
|
21
25
|
var pkg = {};
|
|
@@ -27,16 +31,6 @@ try {
|
|
|
27
31
|
}
|
|
28
32
|
/**
|
|
29
33
|
* seed-cli configuration object
|
|
30
|
-
* ## Markdown stuff
|
|
31
|
-
*
|
|
32
|
-
* It's a big description written in `markdown`
|
|
33
|
-
*
|
|
34
|
-
* Example:
|
|
35
|
-
*
|
|
36
|
-
* ```javascript
|
|
37
|
-
* $('something')
|
|
38
|
-
* .something(else);
|
|
39
|
-
* ```
|
|
40
34
|
*
|
|
41
35
|
* @namespace config
|
|
42
36
|
* @memberof seed-cli
|
|
@@ -63,6 +57,7 @@ var config = {
|
|
|
63
57
|
packageJson: pkg,
|
|
64
58
|
tailwindConfig: tailwindConfig,
|
|
65
59
|
usesTailwind: fs.existsSync(join(themeRoot, tailwindConfig)),
|
|
60
|
+
usesModuleBundler: !!pkg['bundle-js'],
|
|
66
61
|
seedConfig: "seed.config.js",
|
|
67
62
|
shopifyIgnore: join(themeRoot, '.shopifyignore'),
|
|
68
63
|
src: {
|
|
@@ -70,7 +65,8 @@ var config = {
|
|
|
70
65
|
js: "src/scripts/**/*.{js,js.liquid}",
|
|
71
66
|
vendorJs: "src/scripts/vendor/*.js",
|
|
72
67
|
json: "src/**/*.json",
|
|
73
|
-
css: "src/styles/**/*.
|
|
68
|
+
css: "src/styles/**/*.css",
|
|
69
|
+
scss: "src/styles/**/*.scss",
|
|
74
70
|
cssLint: "src/styles/**/*.{css,scss}",
|
|
75
71
|
vendorCss: "src/styles/vendor/*.{css,scss}",
|
|
76
72
|
assets: "src/assets/**/*",
|
|
@@ -88,7 +84,8 @@ var config = {
|
|
|
88
84
|
js: "tmp/scripts/**/*.{js,js.liquid}",
|
|
89
85
|
vendorJs: "tmp/scripts/vendor/*.js",
|
|
90
86
|
json: "tmp/**/*.json",
|
|
91
|
-
css: "tmp/styles/**/*.
|
|
87
|
+
css: "tmp/styles/**/*.css",
|
|
88
|
+
scss: "tmp/styles/**/*.scss",
|
|
92
89
|
cssLint: "tmp/styles/**/*.{css,scss}",
|
|
93
90
|
vendorCss: "tmp/styles/vendor/*.{css,scss}",
|
|
94
91
|
assets: "tmp/assets/**/*",
|
|
@@ -114,16 +111,32 @@ var config = {
|
|
|
114
111
|
roots: {
|
|
115
112
|
js: "src/scripts/*.{js,js.liquid}",
|
|
116
113
|
vendorJs: "src/scripts/vendor.js",
|
|
117
|
-
css: "src/styles/*.
|
|
114
|
+
css: "src/styles/*.css",
|
|
115
|
+
scss: "src/styles/*.scss"
|
|
118
116
|
},
|
|
119
|
-
// Added at runtime
|
|
120
117
|
plugins: {
|
|
121
|
-
|
|
118
|
+
// Added at runtime
|
|
119
|
+
postcss: [require('postcss-import')],
|
|
120
|
+
webpack: {
|
|
121
|
+
mode: !argv["skip-optimizations"] ? 'production' : 'development',
|
|
122
|
+
output: {
|
|
123
|
+
filename: 'theme.js'
|
|
124
|
+
},
|
|
125
|
+
resolve: {
|
|
126
|
+
alias: {
|
|
127
|
+
vue: 'vue/dist/vue.esm-bundler.js'
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
plugins: [new webpack.DefinePlugin({
|
|
131
|
+
__VUE_OPTIONS_API__: true,
|
|
132
|
+
__VUE_PROD_DEVTOOLS__: false
|
|
133
|
+
})],
|
|
134
|
+
stats: 'none'
|
|
135
|
+
}
|
|
122
136
|
}
|
|
123
137
|
};
|
|
124
138
|
|
|
125
139
|
if (config.usesTailwind) {
|
|
126
|
-
config.plugins.postcss.push(require('postcss-import'));
|
|
127
140
|
config.plugins.postcss.push(tailwindcss({
|
|
128
141
|
config: join(themeRoot, tailwindConfig)
|
|
129
142
|
}));
|
|
@@ -146,4 +159,7 @@ config.plugins.postcss.push(pxtorem({
|
|
|
146
159
|
mediaQuery: true,
|
|
147
160
|
exclude: /node_modules/i
|
|
148
161
|
}));
|
|
162
|
+
config.plugins.postcss.push(reporter({
|
|
163
|
+
clearReportedMessages: true
|
|
164
|
+
}));
|
|
149
165
|
module.exports = config;
|
|
@@ -22,8 +22,14 @@ function separatePath(path) {
|
|
|
22
22
|
|
|
23
23
|
var messages = {
|
|
24
24
|
logFileEvent: function logFileEvent(event, path) {
|
|
25
|
+
var dist = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
25
26
|
var pathObject = separatePath(path);
|
|
26
|
-
|
|
27
|
+
|
|
28
|
+
if (dist) {
|
|
29
|
+
log('updated', chalk.green('dist'), chalk.magenta(pathObject.dir), chalk.white('-'), chalk.cyan(event), chalk.yellow(pathObject.file));
|
|
30
|
+
} else {
|
|
31
|
+
log('change in', chalk.magenta(pathObject.dir), chalk.white('-'), chalk.cyan(event), chalk.yellow(pathObject.file));
|
|
32
|
+
}
|
|
27
33
|
},
|
|
28
34
|
logTransferDone: function logTransferDone() {
|
|
29
35
|
log('Transfer Complete:', chalk.green('File changes successfully synced to store'));
|
|
@@ -68,7 +74,7 @@ var messages = {
|
|
|
68
74
|
log('File missing:', chalk.yellow('`seed.config.js` does not exist. You need to add a config file before you can make changes to your Shopify store.'));
|
|
69
75
|
},
|
|
70
76
|
deployTo: function deployTo(environment) {
|
|
71
|
-
log('
|
|
77
|
+
log('Environment:', chalk.bold(environment));
|
|
72
78
|
},
|
|
73
79
|
allDeploysComplete: function allDeploysComplete() {
|
|
74
80
|
log('Multiple environments:', chalk.green('Deploy completed for all environments in series'));
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _this = void 0;
|
|
4
|
-
|
|
5
3
|
var chalk = require("chalk");
|
|
6
4
|
|
|
7
5
|
var log = require("fancy-log");
|
|
@@ -20,6 +18,15 @@ var errors = [];
|
|
|
20
18
|
*/
|
|
21
19
|
|
|
22
20
|
var utilities = {
|
|
21
|
+
/**
|
|
22
|
+
* Indicates whether there are errors during build/watch
|
|
23
|
+
*
|
|
24
|
+
* @returns {Boolean}
|
|
25
|
+
*/
|
|
26
|
+
hasErrors: function hasErrors() {
|
|
27
|
+
return errors.length > 0;
|
|
28
|
+
},
|
|
29
|
+
|
|
23
30
|
/**
|
|
24
31
|
* Handles the output for any errors that might have been captured
|
|
25
32
|
* during the build and zip Gulp tasks.
|
|
@@ -48,8 +55,6 @@ var utilities = {
|
|
|
48
55
|
errorHandler: function errorHandler(err) {
|
|
49
56
|
log(chalk.red(err));
|
|
50
57
|
errors.push(err);
|
|
51
|
-
|
|
52
|
-
_this.emit("end");
|
|
53
58
|
},
|
|
54
59
|
|
|
55
60
|
/**
|
|
@@ -106,17 +111,17 @@ var utilities = {
|
|
|
106
111
|
* @param {String} path - relative path to file passed via event
|
|
107
112
|
*/
|
|
108
113
|
addEvent: function addEvent(event, path) {
|
|
109
|
-
var
|
|
114
|
+
var _this = this;
|
|
110
115
|
|
|
111
116
|
_.each(options.changeEvents, function (eventType) {
|
|
112
117
|
if (event === eventType) {
|
|
113
|
-
|
|
118
|
+
_this.change.push(path);
|
|
114
119
|
}
|
|
115
120
|
});
|
|
116
121
|
|
|
117
122
|
_.each(options.unlinkEvents, function (eventType) {
|
|
118
123
|
if (event === eventType) {
|
|
119
|
-
|
|
124
|
+
_this.unlink.push(path);
|
|
120
125
|
}
|
|
121
126
|
});
|
|
122
127
|
}
|
|
@@ -129,11 +134,6 @@ var utilities = {
|
|
|
129
134
|
* Clears the appropriate cache array after a change/delete function has been
|
|
130
135
|
* called.
|
|
131
136
|
*
|
|
132
|
-
* Example:
|
|
133
|
-
* ```javascript
|
|
134
|
-
* // TODO:
|
|
135
|
-
* ```
|
|
136
|
-
*
|
|
137
137
|
* @memberof seed-cli.utilities
|
|
138
138
|
* @method
|
|
139
139
|
* @param {eventCache} cache - a specific cache object for tracking file events
|
package/lib/tasks/watchers.js
CHANGED
|
@@ -10,7 +10,6 @@ var utils = require("./includes/utilities");
|
|
|
10
10
|
|
|
11
11
|
var messages = require("./includes/messages.js");
|
|
12
12
|
|
|
13
|
-
var environment = config.environment.split(/\s*,\s*|\s+/)[0];
|
|
14
13
|
var cache = utils.createEventCache();
|
|
15
14
|
/**
|
|
16
15
|
* Aggregate task watching for file changes in `src` and
|
|
@@ -40,8 +39,9 @@ gulp.task("watch:dist", function () {
|
|
|
40
39
|
ignoreInitial: true
|
|
41
40
|
});
|
|
42
41
|
watcher.on("all", function (event, path) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
if (!utils.hasErrors()) {
|
|
43
|
+
messages.logFileEvent(event, path, true);
|
|
44
|
+
cache.addEvent(event, path);
|
|
45
|
+
}
|
|
46
46
|
});
|
|
47
47
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@madebyseed/seed-cli-tools",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"description": "Seed CLI Tools",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -45,11 +45,15 @@
|
|
|
45
45
|
"postcss": "^8.3.6",
|
|
46
46
|
"postcss-import": "^14.0.2",
|
|
47
47
|
"postcss-pxtorem": "^6.0.0",
|
|
48
|
+
"postcss-reporter": "^7.0.5",
|
|
48
49
|
"require-directory": "^2.1.1",
|
|
49
50
|
"sass": "^1.36.0",
|
|
50
51
|
"tailwindcss": "^2.2.7",
|
|
52
|
+
"uglify-js": "^3.15.3",
|
|
51
53
|
"vinyl-paths": "^3.0.1",
|
|
54
|
+
"webpack": "^5.72.1",
|
|
55
|
+
"webpack-stream": "^7.0.0",
|
|
52
56
|
"yargs": "^17.0.1"
|
|
53
57
|
},
|
|
54
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "e8794f33389f17381fd2ae22f326c4d4a7823b1d"
|
|
55
59
|
}
|
package/src/gulpfile.js
CHANGED
|
@@ -1,8 +1,22 @@
|
|
|
1
1
|
const gulp = require("gulp");
|
|
2
2
|
|
|
3
|
+
const utils = require('./tasks/includes/utilities.js');
|
|
4
|
+
|
|
3
5
|
// imports gulp tasks from the `tasks` directory
|
|
4
6
|
require("require-directory")(module, "./tasks");
|
|
5
7
|
|
|
8
|
+
/**
|
|
9
|
+
* Handles the error summary at the end if there are errors to output.
|
|
10
|
+
* This task will only be run for the build and zip tasks.
|
|
11
|
+
*/
|
|
12
|
+
gulp.task('output:errors', (done) => {
|
|
13
|
+
if (utils.hasErrors()) {
|
|
14
|
+
utils.outputErrors();
|
|
15
|
+
} else {
|
|
16
|
+
done();
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
|
|
6
20
|
/**
|
|
7
21
|
* Does a full clean/rebuild of your theme
|
|
8
22
|
*
|
|
@@ -35,7 +49,7 @@ gulp.task(
|
|
|
35
49
|
gulp.task("zip", gulp.series("build", "shopify:package:dist", "copy:zip"));
|
|
36
50
|
|
|
37
51
|
/**
|
|
38
|
-
*
|
|
52
|
+
* Synchronizes the development theme settings with our src folder theme settings
|
|
39
53
|
*
|
|
40
54
|
* @function sync-settings
|
|
41
55
|
* @memberof seed-cli.tasks.deploy
|
|
@@ -59,6 +73,7 @@ gulp.task(
|
|
|
59
73
|
"watch",
|
|
60
74
|
gulp.series(
|
|
61
75
|
"build",
|
|
76
|
+
"output:errors",
|
|
62
77
|
gulp.parallel("watch:src", "watch:dist", "shopify:serve:dist")
|
|
63
78
|
)
|
|
64
79
|
);
|
|
@@ -110,3 +125,5 @@ gulp.task("deploy", gulp.series("sync-settings", "build", "shopify:push:dist"));
|
|
|
110
125
|
*/
|
|
111
126
|
gulp.task("deploy:no-sync", gulp.series("build", "shopify:push:dist"));
|
|
112
127
|
|
|
128
|
+
|
|
129
|
+
|
package/src/tasks/build-css.js
CHANGED
|
@@ -7,12 +7,13 @@ const chokidar = require("chokidar");
|
|
|
7
7
|
|
|
8
8
|
const config = require("./includes/config.js");
|
|
9
9
|
const messages = require("./includes/messages.js");
|
|
10
|
-
const
|
|
10
|
+
const utils = require("./includes/utilities");
|
|
11
11
|
const tailwindConfig = config.usesTailwind ? require(path.join(
|
|
12
12
|
config.themeRoot,
|
|
13
13
|
config.tailwindConfig
|
|
14
14
|
)) : {};
|
|
15
15
|
|
|
16
|
+
|
|
16
17
|
const assets =
|
|
17
18
|
config.usesTailwind || tailwindConfig.mode === "jit"
|
|
18
19
|
? [
|
|
@@ -28,29 +29,32 @@ const assets =
|
|
|
28
29
|
: [config.src.css, config.tailwindConfig];
|
|
29
30
|
|
|
30
31
|
/**
|
|
31
|
-
*
|
|
32
|
+
* Process css and tailwind
|
|
32
33
|
*
|
|
33
34
|
* @param {Array} files
|
|
34
35
|
* @returns {Stream}
|
|
35
36
|
* @private
|
|
36
37
|
*/
|
|
37
38
|
function processCss() {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
.pipe(sass().on("error", sass.logError))
|
|
44
|
-
.pipe(gulp.dest(config.dist.assets));
|
|
45
|
-
} else {
|
|
46
|
-
return gulp
|
|
47
|
-
.src(config.roots.css)
|
|
48
|
-
.pipe(plumber())
|
|
49
|
-
.pipe(sass().on("error", sass.logError))
|
|
50
|
-
.pipe(postcss(config.plugins.postcss))
|
|
51
|
-
.pipe(gulp.dest(config.dist.assets));
|
|
52
|
-
}
|
|
39
|
+
return gulp.src(config.roots.css)
|
|
40
|
+
.pipe(plumber(utils.errorHandler))
|
|
41
|
+
.pipe(postcss(config.plugins.postcss))
|
|
42
|
+
.pipe(gulp.dest(config.dist.assets))
|
|
43
|
+
}
|
|
53
44
|
|
|
45
|
+
/**
|
|
46
|
+
* Process sass files
|
|
47
|
+
*
|
|
48
|
+
* @param {Array} files
|
|
49
|
+
* @returns {Stream}
|
|
50
|
+
* @private
|
|
51
|
+
*/
|
|
52
|
+
function processSass() {
|
|
53
|
+
return gulp.src(config.roots.scss)
|
|
54
|
+
.pipe(plumber(utils.errorHandler))
|
|
55
|
+
.pipe(sass())
|
|
56
|
+
.pipe(postcss(config.plugins.postcss))
|
|
57
|
+
.pipe(gulp.dest(config.dist.assets))
|
|
54
58
|
}
|
|
55
59
|
|
|
56
60
|
/**
|
|
@@ -61,7 +65,7 @@ function processCss() {
|
|
|
61
65
|
* @static
|
|
62
66
|
*/
|
|
63
67
|
gulp.task("build:css", () => {
|
|
64
|
-
return processCss();
|
|
68
|
+
return Promise.all([processCss(), processSass()]);
|
|
65
69
|
});
|
|
66
70
|
|
|
67
71
|
/**
|
|
@@ -73,9 +77,11 @@ gulp.task("build:css", () => {
|
|
|
73
77
|
*/
|
|
74
78
|
gulp.task("watch:css", () => {
|
|
75
79
|
chokidar.watch(assets, { ignoreInitial: true }).on("all", (event, path) => {
|
|
76
|
-
|
|
80
|
+
|
|
81
|
+
const isCssFile = /\.s[ac]ss$/i.test(path);
|
|
77
82
|
// Don't log event twice
|
|
78
83
|
if (isCssFile) {
|
|
84
|
+
processSass();
|
|
79
85
|
messages.logFileEvent(event, path);
|
|
80
86
|
}
|
|
81
87
|
|
package/src/tasks/build-js.js
CHANGED
|
@@ -1,28 +1,33 @@
|
|
|
1
1
|
const gulp = require('gulp');
|
|
2
2
|
const gulpif = require('gulp-if');
|
|
3
|
-
const
|
|
3
|
+
const uglifyjs = require('uglify-js');
|
|
4
|
+
const composer = require('gulp-uglify/composer');
|
|
4
5
|
const include = require('gulp-include');
|
|
5
6
|
const plumber = require('gulp-plumber');
|
|
6
7
|
const chokidar = require('chokidar');
|
|
8
|
+
const minify = composer(uglifyjs, console)
|
|
9
|
+
const gulpWebpack = require('webpack-stream');
|
|
10
|
+
const webpack = require('webpack');
|
|
7
11
|
|
|
12
|
+
const utils = require("./includes/utilities");
|
|
8
13
|
const config = require('./includes/config.js');
|
|
9
14
|
const messages = require('./includes/messages.js');
|
|
10
15
|
|
|
11
16
|
function processThemeJs() {
|
|
12
17
|
messages.logProcessFiles('build:js');
|
|
13
|
-
return gulp.src([config.roots.js, `!${config.roots.vendorJs}`])
|
|
14
|
-
.pipe(plumber())
|
|
15
|
-
.pipe(include())
|
|
16
|
-
.pipe(gulpif(config.optimize,
|
|
17
|
-
.pipe(gulp.dest(config.dist.assets))
|
|
18
|
+
return gulp.src([config.roots.js, `!${config.roots.vendorJs}`], { allowEmpty: true })
|
|
19
|
+
.pipe(plumber(utils.errorHandler))
|
|
20
|
+
.pipe(gulpif(config.usesModuleBundler, gulpWebpack(config.plugins.webpack, webpack), include()))
|
|
21
|
+
.pipe(gulpif(config.optimize && !config.usesModuleBundler, minify()))
|
|
22
|
+
.pipe(gulp.dest(config.dist.assets))
|
|
18
23
|
}
|
|
19
24
|
|
|
20
25
|
function processVendorJs() {
|
|
21
26
|
messages.logProcessFiles('build:vendor-js');
|
|
22
|
-
return gulp.src(config.roots.vendorJs)
|
|
27
|
+
return gulp.src(config.roots.vendorJs, { allowEmpty: true })
|
|
23
28
|
.pipe(plumber())
|
|
24
29
|
.pipe(include())
|
|
25
|
-
.pipe(
|
|
30
|
+
.pipe(minify({
|
|
26
31
|
mangle: true,
|
|
27
32
|
compress: true,
|
|
28
33
|
}))
|
|
@@ -37,7 +42,7 @@ gulp.task('watch:js', () => {
|
|
|
37
42
|
chokidar.watch([config.src.js, `!${config.roots.vendorJs}`, `!${config.src.vendorJs}`], {ignoreInitial: true})
|
|
38
43
|
.on('all', (event, path) => {
|
|
39
44
|
messages.logFileEvent(event, path);
|
|
40
|
-
processThemeJs()
|
|
45
|
+
processThemeJs()
|
|
41
46
|
});
|
|
42
47
|
});
|
|
43
48
|
|
|
@@ -5,7 +5,9 @@ const findRoot = require("find-root");
|
|
|
5
5
|
const tailwindcss = require("tailwindcss");
|
|
6
6
|
const cssnano = require("cssnano");
|
|
7
7
|
const pxtorem = require('postcss-pxtorem');
|
|
8
|
+
const reporter = require('postcss-reporter');
|
|
8
9
|
const argv = require("minimist")(process.argv.slice(2));
|
|
10
|
+
const webpack = require('webpack');
|
|
9
11
|
const themeRoot = findRoot(process.cwd());
|
|
10
12
|
const tailwindConfig = 'tailwind.config.js'
|
|
11
13
|
|
|
@@ -19,16 +21,6 @@ try {
|
|
|
19
21
|
|
|
20
22
|
/**
|
|
21
23
|
* seed-cli configuration object
|
|
22
|
-
* ## Markdown stuff
|
|
23
|
-
*
|
|
24
|
-
* It's a big description written in `markdown`
|
|
25
|
-
*
|
|
26
|
-
* Example:
|
|
27
|
-
*
|
|
28
|
-
* ```javascript
|
|
29
|
-
* $('something')
|
|
30
|
-
* .something(else);
|
|
31
|
-
* ```
|
|
32
24
|
*
|
|
33
25
|
* @namespace config
|
|
34
26
|
* @memberof seed-cli
|
|
@@ -56,6 +48,8 @@ const config = {
|
|
|
56
48
|
|
|
57
49
|
usesTailwind: fs.existsSync(join(themeRoot, tailwindConfig)),
|
|
58
50
|
|
|
51
|
+
usesModuleBundler: !!pkg['bundle-js'],
|
|
52
|
+
|
|
59
53
|
seedConfig: "seed.config.js",
|
|
60
54
|
|
|
61
55
|
shopifyIgnore: join(themeRoot, '.shopifyignore'),
|
|
@@ -65,7 +59,8 @@ const config = {
|
|
|
65
59
|
js: "src/scripts/**/*.{js,js.liquid}",
|
|
66
60
|
vendorJs: "src/scripts/vendor/*.js",
|
|
67
61
|
json: "src/**/*.json",
|
|
68
|
-
css: "src/styles/**/*.
|
|
62
|
+
css: "src/styles/**/*.css",
|
|
63
|
+
scss: "src/styles/**/*.scss",
|
|
69
64
|
cssLint: "src/styles/**/*.{css,scss}",
|
|
70
65
|
vendorCss: "src/styles/vendor/*.{css,scss}",
|
|
71
66
|
assets: "src/assets/**/*",
|
|
@@ -84,7 +79,8 @@ const config = {
|
|
|
84
79
|
js: "tmp/scripts/**/*.{js,js.liquid}",
|
|
85
80
|
vendorJs: "tmp/scripts/vendor/*.js",
|
|
86
81
|
json: "tmp/**/*.json",
|
|
87
|
-
css: "tmp/styles/**/*.
|
|
82
|
+
css: "tmp/styles/**/*.css",
|
|
83
|
+
scss: "tmp/styles/**/*.scss",
|
|
88
84
|
cssLint: "tmp/styles/**/*.{css,scss}",
|
|
89
85
|
vendorCss: "tmp/styles/vendor/*.{css,scss}",
|
|
90
86
|
assets: "tmp/assets/**/*",
|
|
@@ -112,18 +108,39 @@ const config = {
|
|
|
112
108
|
roots: {
|
|
113
109
|
js: "src/scripts/*.{js,js.liquid}",
|
|
114
110
|
vendorJs: "src/scripts/vendor.js",
|
|
115
|
-
css: "src/styles/*.
|
|
111
|
+
css: "src/styles/*.css",
|
|
112
|
+
scss: "src/styles/*.scss",
|
|
116
113
|
},
|
|
117
114
|
|
|
118
|
-
// Added at runtime
|
|
119
115
|
plugins: {
|
|
120
|
-
|
|
116
|
+
// Added at runtime
|
|
117
|
+
postcss: [require('postcss-import')],
|
|
118
|
+
|
|
119
|
+
webpack: {
|
|
120
|
+
mode: !argv["skip-optimizations"] ? 'production' : 'development',
|
|
121
|
+
output: {
|
|
122
|
+
filename: 'theme.js'
|
|
123
|
+
},
|
|
124
|
+
resolve: {
|
|
125
|
+
alias: {
|
|
126
|
+
vue: 'vue/dist/vue.esm-bundler.js',
|
|
127
|
+
},
|
|
128
|
+
},
|
|
129
|
+
plugins: [
|
|
130
|
+
new webpack.DefinePlugin({
|
|
131
|
+
__VUE_OPTIONS_API__: true,
|
|
132
|
+
__VUE_PROD_DEVTOOLS__: false,
|
|
133
|
+
})
|
|
134
|
+
],
|
|
135
|
+
stats: 'none'
|
|
136
|
+
},
|
|
121
137
|
},
|
|
138
|
+
|
|
139
|
+
|
|
122
140
|
};
|
|
123
141
|
|
|
124
142
|
|
|
125
143
|
if (config.usesTailwind) {
|
|
126
|
-
config.plugins.postcss.push(require('postcss-import'))
|
|
127
144
|
config.plugins.postcss.push(tailwindcss({ config: join(themeRoot, tailwindConfig) }))
|
|
128
145
|
}
|
|
129
146
|
|
|
@@ -143,4 +160,6 @@ config.plugins.postcss.push(pxtorem({
|
|
|
143
160
|
exclude: /node_modules/i
|
|
144
161
|
}))
|
|
145
162
|
|
|
163
|
+
config.plugins.postcss.push(reporter({ clearReportedMessages: true }))
|
|
164
|
+
|
|
146
165
|
module.exports = config;
|
|
@@ -18,15 +18,26 @@ function separatePath(path) {
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
const messages = {
|
|
21
|
-
logFileEvent: (event, path) => {
|
|
21
|
+
logFileEvent: (event, path, dist = false) => {
|
|
22
22
|
const pathObject = separatePath(path);
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
if (dist) {
|
|
25
|
+
log('updated',
|
|
26
|
+
chalk.green('dist'),
|
|
27
|
+
chalk.magenta(pathObject.dir),
|
|
28
|
+
chalk.white('-'),
|
|
29
|
+
chalk.cyan(event),
|
|
30
|
+
chalk.yellow(pathObject.file),
|
|
31
|
+
);
|
|
32
|
+
} else {
|
|
33
|
+
log('change in',
|
|
34
|
+
chalk.magenta(pathObject.dir),
|
|
35
|
+
chalk.white('-'),
|
|
36
|
+
chalk.cyan(event),
|
|
37
|
+
chalk.yellow(pathObject.file),
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
30
41
|
},
|
|
31
42
|
|
|
32
43
|
logTransferDone: () => {
|
|
@@ -102,7 +113,7 @@ const messages = {
|
|
|
102
113
|
},
|
|
103
114
|
|
|
104
115
|
deployTo: (environment) => {
|
|
105
|
-
log('
|
|
116
|
+
log('Environment:', chalk.bold(environment));
|
|
106
117
|
},
|
|
107
118
|
|
|
108
119
|
allDeploysComplete: () => {
|
|
@@ -13,6 +13,13 @@ let errors = [];
|
|
|
13
13
|
* @memberof seed-cli
|
|
14
14
|
*/
|
|
15
15
|
const utilities = {
|
|
16
|
+
/**
|
|
17
|
+
* Indicates whether there are errors during build/watch
|
|
18
|
+
*
|
|
19
|
+
* @returns {Boolean}
|
|
20
|
+
*/
|
|
21
|
+
hasErrors: () => errors.length > 0,
|
|
22
|
+
|
|
16
23
|
/**
|
|
17
24
|
* Handles the output for any errors that might have been captured
|
|
18
25
|
* during the build and zip Gulp tasks.
|
|
@@ -25,7 +32,6 @@ const utilities = {
|
|
|
25
32
|
}
|
|
26
33
|
|
|
27
34
|
log(chalk.red(`There were errors during the build:\n`));
|
|
28
|
-
|
|
29
35
|
errors.forEach((err) => {
|
|
30
36
|
log(chalk.red(err));
|
|
31
37
|
});
|
|
@@ -44,7 +50,6 @@ const utilities = {
|
|
|
44
50
|
log(chalk.red(err));
|
|
45
51
|
errors.push(err);
|
|
46
52
|
|
|
47
|
-
this.emit("end");
|
|
48
53
|
},
|
|
49
54
|
|
|
50
55
|
/**
|
|
@@ -125,11 +130,6 @@ const utilities = {
|
|
|
125
130
|
* Clears the appropriate cache array after a change/delete function has been
|
|
126
131
|
* called.
|
|
127
132
|
*
|
|
128
|
-
* Example:
|
|
129
|
-
* ```javascript
|
|
130
|
-
* // TODO:
|
|
131
|
-
* ```
|
|
132
|
-
*
|
|
133
133
|
* @memberof seed-cli.utilities
|
|
134
134
|
* @method
|
|
135
135
|
* @param {eventCache} cache - a specific cache object for tracking file events
|
package/src/tasks/watchers.js
CHANGED
|
@@ -5,7 +5,6 @@ const utils = require("./includes/utilities");
|
|
|
5
5
|
|
|
6
6
|
const messages = require("./includes/messages.js");
|
|
7
7
|
|
|
8
|
-
const environment = config.environment.split(/\s*,\s*|\s+/)[0];
|
|
9
8
|
const cache = utils.createEventCache();
|
|
10
9
|
|
|
11
10
|
/**
|
|
@@ -42,8 +41,9 @@ gulp.task("watch:dist", () => {
|
|
|
42
41
|
});
|
|
43
42
|
|
|
44
43
|
watcher.on("all", (event, path) => {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
if (!utils.hasErrors()) {
|
|
45
|
+
messages.logFileEvent(event, path, true);
|
|
46
|
+
cache.addEvent(event, path);
|
|
47
|
+
}
|
|
48
48
|
});
|
|
49
49
|
});
|