Currently the modules/favicon.html is presumably supposed to be added to the dist/index.html when running tweegobuild. However it is not added.

After reading the tweego docs for the -m about twenty times, I finally noticed that .html is not a supported extension:

-m SRC, --module=SRC
Module sources (repeatable); may consist of supported files and/or directories to recursively search for such files. Each file will be wrapped within the appropriate markup and bundled into the element of the compiled HTML. Supported files: .css, .js, .otf, .ttf, .woff, .woff2.

To insert an HTML snippet into the head of the output file, you need to use --head:

--head=FILE
Name of the file whose contents will be appended as-is to the element of the compiled HTML.

By changing the tweegobuild script in package.json it did the right thing:

tweego -f $npm_package_config_format -m src/modules/ --head=src/modules/head.html -o dist/index.html project

Even though it seems redundant, I left the -m src/modules/ in place because if someone wants to add fonts they can do so.

Based on looking at several UMD and CJS+IIFE libraries recently, I'm beginning to think the wrapper intro should be:

(function (define, module, exports) {

	/* library code goes here */

}).call(window);

Reasoning

There's a lot of variation in how the CommonJS checks in non-ES6 module containers are done. Some check a global exports, while others check for module then module.exports, and some do both. There doesn't seem to be a lot of consensus among the containers. Therefore it seems safer to include an undefined module in the wrapper as well.

how to run update css only ? i mean just compile the css not js or twee files.

right now we already had tweegobuild , can you please add the js only and css only? thx before

> [email protected] build /home/xxx/games/who-am-i
> gulp build && tweego -f $npm_package_config_format --head=src/HEAD.html -o dist/index.html project && opn dist/index.html

fs.js:25
'use strict';
^

ReferenceError: internalBinding is not defined
    at fs.js:25:1
    at req_ (/home/eugene/games/who-am-i/node_modules/natives/index.js:137:5)
    at Object.req [as require] (/home/eugene/games/who-am-i/node_modules/natives/index.js:54:10)
    at Object.<anonymous> (/home/eugene/games/who-am-i/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)

Suggestion from gulp issue helps

I folks.

I tried using tweego-setup today. We're using the Harlowe 3 story format in our project. I tried using the npm config command, as well as running the format.bat file, and neither had any effect.

Steps to reproduce:
Attempt to change story format to harlowe-3.

Fix:
Manually update the format property to harlowe-3 in the package.json file.

  "config": {
    "format": "sugarcube-2"
  },

to

  "config": {
    "format": "harlowe-3"
  },

Credit where credit is due:
Thanks to Cyrus Firheir on the Twine discord server for the fix!

upon doing > npm install I got...

added 522 packages from 377 contributors and audited 3479 packages in 35.252s
found 175 vulnerabilities (3 low, 168 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details

So I did npm audit fix but then I got...

+ [email protected]
+ @babel/[email protected]
added 3 packages from 1 contributor, removed 39 packages and updated 39 packages in 33.084s
fixed 169 of 175 vulnerabilities in 3479 scanned packages
  1 package update for 6 vulns involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

Should I be concerned about the "vulns" or "breaking changes" mentioned here?
I'm on ubuntu 18.04 with npm 6.4.1

how do i change jshint to eslint ? what settings do i need to change ?

is eslint good for this setup? thx

I want to use something like this instead and cut out the middle man. Gulp is nice but it's a dependency and a complication most Twine games don't benefit from. Also CleanCSS is way better than PostCSS, the latter is way too complicated for it's own good.

The changes would be:

• Get rid of gulp in favor of a simpler build script.
• Move options to root of directory and flatten/simplify them.
• Use Terser (+ Babel) and CleanCSS.
• FS-Jetpack? (Pros: atomic writes and simplified sync API, cons: it's an extra dep we don't really need)

What it says on the tin. In the package.json, the current dependencies should probably be devDependencies instead.

Rule of thumb:

1. If it's included within and used by the project, make it a dependency.
2. If it's only used to build the project, make it a development dependency.

Greetings, not much of an issue but in order to achieve the --watch command from tweego, one must create an empty src/modules directory for it to watch, since src/modules is explicitly passed as a modules argument to the tweego build command in package.json.

take a look at this

"build-win": "gulp build && tweego -f %npm_package_config_format% -m src/modules/ --head=src/head-content.html -o dist/index.html project && opn dist/index.html"

can you please tell the meaning of this code? and why is src/modules/ is missing ? thx

and one more thing about font-face, the font is quite different
@font-face { font-family: 'ProximaNova-Regular'; src: url('assets/fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'), url(./assetsc/fonts/ProximaNova-Regular.otf') format('opentype'), url('assets/fonts/ProximaNova-Regular.woff') format('woff'), url('assets/fonts/ProximaNova-Regular.ttf') format('truetype'), url(src/'fonts/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg'); font-weight: normal; font-style: normal; }

when i compile using your setup, the font is looks thin and not good but it's looks fine when compile using tweego vanilla

edit:
about the ugly font, i think its because of the minified. how to set and prevent some files to be minified in command line ?

SugarCube executes scripts inside a closure (?) using eval() and that significantly limits what can be used in user .js files. To overcome those limitations, I patch tweego's output and inject <script> tag there, which loads custom script: (sed -i 's/<\/body>/<script src="my_script.js"><\/script><\/body>/').

I added a naive implementation to this template, but being a noob with node and gulp, I ask you to polish it and add mainline, please. It adds (see the diff below) gulp tasks for tweego invocation (creates an intemediate file), a task to replace </body> with <script>...</script></body> in that file, and to rename the intermediate file. Also adds new directories to the configuration.

  diff --git a/gulpfile.js b/gulpfile.js
index e406a57..6007e24 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,7 +6,10 @@ var gulp = require('gulp'),
     autoprefix = require('gulp-autoprefixer'),
     jshint = require('gulp-jshint'),
     noop = require('gulp-noop'),
-    config = require('./src/config.json');
+    shell = require('gulp-shell'),
+    replace = require('gulp-replace'),
+    config = require('./src/config.json'),
+    pkg = require('./package.json');
 
 function processScripts (dir, out, name) {
     return gulp.src(dir)
@@ -26,7 +29,7 @@ function processStyles (dir, out, name) {
         .pipe(gulp.dest(out));
 }
 
-// linting 
+// linting
 function lint () {
     return gulp.src(config.directories['user-js'])
         .pipe(jshint())
@@ -35,13 +38,38 @@ function lint () {
 
 // build function
 function build () {
-    var dir = config.directories;
-    processScripts(dir['vendor-js'], dir['out-js'], dir['vendor-file-js']);
-    processScripts(dir['user-js'], dir['out-js'], dir['user-file-js']);
+    const dir = config.directories;
+    processScripts(dir['vendor-js'], dir['out-vendor-js'], dir['vendor-file-js']);
+    processScripts(dir['user-js'], `${dir['dist']}/${dir['out-js']}`, dir['user-file-js']);
+    processScripts(dir['user-js-tw'], dir['out-js-tw'], dir['user-tw-file-js']);
     processStyles(dir['vendor-css'], dir['out-css'], dir['vendor-file-css']);
     processStyles(dir['user-css'], dir['out-css'], dir['user-file-css']);
 }
 
+function tweego() {
+    const dir = config.directories;
+    return gulp
+        .src([dir['passages'], ], { read: false })
+        .pipe(shell([`tweego -f ${pkg.config.format} --head=src/HEAD.html -o ${dir['dist']}/index_tmp.html project`]
))
+}
+
+function injectUserScript() {
+    const dir = config.directories;
+    return gulp.src(`${dir['dist']}/index_tmp.html`)
+        .pipe(replace('</body>', `<script src="${dir['out-js']}/${dir['user-file-js']}"></script>\n</body>`))
+        .pipe(gulp.dest(`${dir['dist']}`));
+}
+
+function renameOutput() {
+    const dir = config.directories;
+    return gulp
+        .src(`${dir['dist']}/index_tmp.html`, { read: false })
+        .pipe(shell(`mv ${dir['dist']}/index_tmp.html ${dir['dist']}/index.html`));
+}
+
 // tasks
 gulp.task('build', build);
-gulp.task('lint', lint);
\ No newline at end of file
+gulp.task('tweego', tweego);
+gulp.task('inject-script', ['tweego'], injectUserScript);
+gulp.task('rename-output', ['inject-script'], renameOutput);
+gulp.task('lint', lint);
diff --git a/package.json b/package.json
index 5c0208b..63b8fbd 100644
--- a/package.json
+++ b/package.json
@@ -6,18 +6,6 @@
   "config": {
     "format": "sugarcube-2"
   },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "open": "opn",
-    "gulp": "gulp",
-    "lint": "gulp lint",
-    "build": "gulp build && tweego -f $npm_package_config_format --head=src/HEAD.html -o dist/index.html project && opn dist/index.html",
-    "testmode": "gulp build && tweego -f $npm_package_config_format -t --head=src/HEAD.html -o dist/index.html project && opn dist/index.html",
-    "tweegobuild": "tweego -f $npm_package_config_format --head=src/HEAD.html -o dist/index.html project",
-    "build-win": "gulp build && tweego -f %npm_package_config_format% --head=src/HEAD.html -o dist/index.html project && opn dist/index.html",
-    "testmode-win": "gulp build && tweego -f %npm_package_config_format% -t --head=src/HEAD.html -o dist/index.html project && opn dist/index.html",
-    "tweegobuild-win": "tweego -f %npm_package_config_format% --head=src/HEAD.html -o dist/index.html project"
-  },
   "keywords": [
     "twine",
     "tweego",
@@ -26,17 +14,20 @@
   "author": "Chapel",
   "license": "Unlicense",
   "dependencies": {
-    "@babel/core": "^7.0.0-beta.53",
+    "@babel/core": "^7.4.4",
     "babel-preset-env": "^1.7.0",
+    "graceful-fs": "^4.0.0",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^5.0.0",
-    "gulp-babel": "^8.0.0-beta.2",
-    "gulp-clean-css": "^3.9.4",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean-css": "^3.10.0",
     "gulp-concat": "^2.6.1",
     "gulp-jshint": "^2.1.0",
     "gulp-noop": "^1.0.0",
-    "gulp-uglify": "^3.0.0",
-    "jshint": "^2.9.5",
+    "gulp-replace": "^1.0.0",
+    "gulp-shell": "^0.7.0",
+    "gulp-uglify": "^3.0.2",
+    "jshint": "^2.10.2",
     "opn-cli": "^3.1.0"
   },
   "directories": {
diff --git a/src/config.json b/src/config.json
index c3122b6..b25c1e6 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1,23 +1,29 @@
 {
     "javascript": {
         "minify": true,
-        "transpile": true
+        "transpile": false
     },
     "css": {
         "minify": true,
         "autoprefix": true
     },
     "directories": {
+        "dist": "./dist",
         "user-js": "./src/scripts/**/*.js",
+        "user-js-tw": "./src/scripts-tw/**/*.js",
         "user-css": "./src/styles/**/*.css",
         "vendor-js": "./vendor/**/*.js",
         "vendor-css": "./vendor/**/*.css",
-        
-        "out-js": "./project/scripts",
+        "passages": "./project/twee/**/*.twee",
+
+        "out-js": "scripts",
+        "out-js-tw": "./project/scripts-tw",
+        "out-vendor-js": "./project/scripts",
         "out-css": "./project/styles",
         "vendor-file-js": "bundle.min.js",
         "vendor-file-css": "bundle.min.css",
         "user-file-js": "user.min.js",
+        "user-tw-file-js": "user.tw.min.js",
         "user-file-css": "user.min.css"
     }
-}
\ No newline at end of file
+}

First, thank you for creating this, it was extremely helpful.

Now my point:
I added some CSS variables to my code (the var(--foo) kind) and the linting started failing. I tried to find a solution but it looks like csslint just doesn't support them and it's not being regularly updated anymore. In the end I solved my problem by replacing csslint with stylelint. It was pretty straightforward (just install, add a settings file and tweak a couple lines in the gulp file) so I thought I'd leave a comment to give some feedback and say thanks.

Have a nice day!

I'll keep the Tweego 1 branch available, but make a Tweego 2 branch as well with the new StoryData and such.