@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 CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "env": {
3
- "node": true
3
+ "node": true,
4
+ "es6": true
4
5
  },
5
6
  "parser": "babel-eslint",
6
7
  "extends": "eslint:recommended"
package/lib/gulpfile.js CHANGED
@@ -1,9 +1,24 @@
1
1
  "use strict";
2
2
 
3
- var gulp = require("gulp"); // imports gulp tasks from the `tasks` directory
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
- * Syncronizes the development theme settings with our src folder theme settings
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
@@ -16,13 +16,12 @@ var config = require("./includes/config.js");
16
16
 
17
17
  var messages = require("./includes/messages.js");
18
18
 
19
- var _require = require("./includes/config.js"),
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
- * Concatenate css via gulp-cssimport and copys to the `/dist` folder
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
- if (usesTailwind) {
34
- return gulp.src(config.roots.css).pipe(plumber()).pipe(postcss(config.plugins.postcss)).pipe(sass().on("error", sass.logError)).pipe(gulp.dest(config.dist.assets));
35
- } else {
36
- return gulp.src(config.roots.css).pipe(plumber()).pipe(sass().on("error", sass.logError)).pipe(postcss(config.plugins.postcss)).pipe(gulp.dest(config.dist.assets));
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 = /.\.css$/.test(path); // Don't log event twice
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
 
@@ -4,7 +4,9 @@ var gulp = require('gulp');
4
4
 
5
5
  var gulpif = require('gulp-if');
6
6
 
7
- var uglify = require('gulp-uglify');
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)]).pipe(plumber()).pipe(include()).pipe(gulpif(config.optimize, uglify())).pipe(gulp.dest(config.dist.assets));
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).pipe(plumber()).pipe(include()).pipe(uglify({
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/**/*.{css,scss,scss.liquid}",
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/**/*.{css,scss,scss.liquid}",
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/*.{css,scss}"
114
+ css: "src/styles/*.css",
115
+ scss: "src/styles/*.scss"
118
116
  },
119
- // Added at runtime
120
117
  plugins: {
121
- postcss: []
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
- log('change in', chalk.magenta(pathObject.dir), chalk.white('-'), chalk.cyan(event), chalk.yellow(pathObject.file));
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('Initiating deploy to', chalk.bold(environment));
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 _this2 = this;
114
+ var _this = this;
110
115
 
111
116
  _.each(options.changeEvents, function (eventType) {
112
117
  if (event === eventType) {
113
- _this2.change.push(path);
118
+ _this.change.push(path);
114
119
  }
115
120
  });
116
121
 
117
122
  _.each(options.unlinkEvents, function (eventType) {
118
123
  if (event === eventType) {
119
- _this2.unlink.push(path);
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
@@ -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
- messages.logFileEvent(event, path);
44
- cache.addEvent(event, path);
45
- messages.deployTo(environment);
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.6.0",
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": "426187d1c16859249db56a7174a94192adc9d702"
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
- * Syncronizes the development theme settings with our src folder theme settings
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
+
@@ -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 { usesTailwind } = require("./includes/config.js");
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
- * Concatenate css via gulp-cssimport and copys to the `/dist` folder
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
- if (usesTailwind) {
39
- return gulp
40
- .src(config.roots.css)
41
- .pipe(plumber())
42
- .pipe(postcss(config.plugins.postcss))
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
- const isCssFile = /.\.css$/.test(path);
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
 
@@ -1,28 +1,33 @@
1
1
  const gulp = require('gulp');
2
2
  const gulpif = require('gulp-if');
3
- const uglify = require('gulp-uglify');
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, uglify()))
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(uglify({
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/**/*.{css,scss,scss.liquid}",
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/**/*.{css,scss,scss.liquid}",
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/*.{css,scss}",
111
+ css: "src/styles/*.css",
112
+ scss: "src/styles/*.scss",
116
113
  },
117
114
 
118
- // Added at runtime
119
115
  plugins: {
120
- postcss: [],
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
- log('change in',
25
- chalk.magenta(pathObject.dir),
26
- chalk.white('-'),
27
- chalk.cyan(event),
28
- chalk.yellow(pathObject.file),
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('Initiating deploy to', chalk.bold(environment));
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
@@ -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
- messages.logFileEvent(event, path);
46
- cache.addEvent(event, path);
47
- messages.deployTo(environment);
44
+ if (!utils.hasErrors()) {
45
+ messages.logFileEvent(event, path, true);
46
+ cache.addEvent(event, path);
47
+ }
48
48
  });
49
49
  });