Git Product home page Git Product logo

tweego-setup's Introduction

Basic Tweego Setup (v3)

If you want to use Tweego v1.x, you'll want to switch to the tweego-1 branch of this repo.

This is the basic setup I use for creating Tweego projects. It's here so I can clone it when I need it, but you may find it useful, too.

Note: When you compile your game for the first time, Tweego will throw an error. This is normal. It will complian that you don't have an IFID, and generate a new one for you. Take the number it gives you and add it to the ifid property in the StoryData passage in the project/twee/compiler-options.twee file. Your game will NOT compile if you don't do this first!

Installing

You'll need NodeJS and Tweego installed. Click the links to find my step-by-step instructions (with pictures) on how to do this on Windows systems. You will need to combine my instructions with a bit of Googling to get these working on other OSes.

After getting all that squared away, clone or download this repo. Open a command prompt and navigate to the repo's root directory (where the package.json file is) and run the command npm install. This may take a couple of minutes, just let it go. After that, everything should be ready to go.

Features

Tweego Setup is a project skeleton/boilerplate that is intended to make getting started with Tweego easier for novice users. It provides the following tools already configured and ready to go.

For JavaScript:

  • Transpiling to ES5: Babel is a JavaScript code transpiler that takes modern ES6 JavaScript and converts it to older ES5 code that works on older browsers, allowing you to write your code in modern JS without sacrificing browser support.
  • Minification: A minifier compresses your code by shortening expressions, removing whitespace, and more to save on file size, which improves the speed at which pages load on the web. This project skeleton uses Terser for JavaScript compression.

For CSS:

  • Auto-prefixing: Some CSS properties require vendor prefixes to work in certain browsers. This project skeleton will use autoprefixer to automatically determine which prefixes your CSS code needs and add them for you.
  • Minification: A minifier compresses your code by combining rules where possible and removing spaces and newlines to make code as lightweight as possible. This project skeleton uses Clean-CSS for CSS minification.

Additional stuff:

  • NPM Scripts: A set of NPM scripts to run all the necessary commands to test and build your project.
  • Localhost Server: Includes http-server to allow you to run a simple localhost server to test your game if you need it.

Linting

Linting has been removed from the new version of this repo. Linting is fraught and a lot of people have strong opinions about which linters to use and how to configure them. In general, if you are a novice, you are probably best served by setting up a linter in your IDE of choice. For example, here is ESLint for VSCode, and here's jshint for the same.

Recommended IDE for Tweego

If you are new to writing code in an IDE and not sure what to use, I highly suggest using VSCode, an excellent all-around IDE for web development. VSCode also has a very powerful extension called Twee 3 Language Tools that is ideal for working with Tweego.

Structure

There are three main folders that you'll be working with here. The first is the dist folder. When you compile your project, it will get sent here as dist/index.html. If you have external resources using relative links, like fonts, sounds, or images, you'll want to put them in here.

The project folder is where you'll edit your passages, and only your passages. Your JavaScript and CSS code will wind up here eventually, but you won't write it here--just ignore the compiled directory. For scripts and styles that are already compiled and ready to include (e.g., one of my custom macro scripts) you can drop these files directly into the project/compiled directory.

The src folder is where your custom JavaScript and CSS code will go. Place JavaScript files in the src/scripts folder, and make sure they have the extension .js. Place your CSS files in the src/styles folder and make sure they have the extension .css. Files in these folders will be concatenated, minified, (for JS) transpiled, and (for CSS) autoprefixed, then sent to the project folder to be picked up by Tweego.

The src/modules folder allows you to add scripts, styles, fonts, and more directly to the document's <head>. Things like Google analytics scripts, web libraries, and favicon code will go here. Code included in this way is not processed and is simply included as-is.

Finally, there's the head-content.html file. You can add HTML code to your project's <head> using this file. If you don't need it, just leave it blank.

Usage (CLI)

The following scripts are run from the command line. Simply navigate to the project's root directory and type in the appropriate command.

  • npm start: Starts up a simple localhost test server. Not needed for all projects.
  • npm run build: Compiles your JS and CSS, then compiles everything with Tweego and drops the compiled file in the dist folder.
  • npm run build:test: As npm run build, but compiles your story in test mode.
  • npm run compile:src: This command only runs the non-Tweego portion of the build process. Probably not very useful.
  • npm run compile:twee: This command only runs the Tweego portion of the build process, so files from src aren't added in. Useful for building faster when you're only working on TwineScript.
  • npm run watch:twee: As npm run compile:twee, only compiles the Tweego portion, but does so in watch mode.
  • npm run test:twee: As npm run compile:twee, only compiles the Tweego portion, but does so in test mode.

On Windows, you can double-click the build.bat file to run npm run build for you without needing to use the terminal.

Configuration Settings

At the top of the build.js file are a number of options you can alter.

Files and File Paths

At the top of the script are two arrays (by default, they are empty), one for JS files, and one for CSS files. If you leave these empty, Tweego Setup will grab all the .js files from the src/scripts folder and all the .css files from the src/styles folder (subdirectories will be recursively searched as well), and they will be concatenated in the order provided by your operating system (usually alpha-numeric order). However, if you need your files to be compiled in a specific order, you will instead need to provide an array of file names to one or both of these.

If you provide filenames to one of the arrays, the directory associated with that array will no longer be searched, and only files listed in the array will be compiled, so this is an all-or-nothing kind of thing, either the directories are searched recursively, or you provide all the file names.

By default, the files will be grabbed from the src/scripts and src/styles directories for each array, so if the file path is src/scripts/test.js, you only need to provide test.js in the array.

You can alter the base file paths here, if you want to. By default, Tweego Setup looks for JavaScript in src/scripts, CSS in src/styles, and deposits the compiled files to project/compiled to be picked up by Tweego. You can change these defaults if you want to restructure the directories.

Tooling Options

Most of the tools used by Tweego Setup have configuration options that can be altered. You edit those options here, as plain objects. Visit the provided URLs to see documentation regarding the options for each tool.

Changing Story Formats

You can change the story format used to compile your project in the project/twee/compiler-options.twee file. This file contains a passage named StoryData that accepts plain JSON. You can change the story format and version to a different one Tweego has access to from here. Use the command tweego --list-formats from the command line to see a list of available formats.

Note: When you compile your game for the first time, Tweego will throw an error. This is normal. It will complian that you don't have an IFID, and generate a new one for you. Take the number it gives you and add it to the ifid property in the StoryData passage in the project/twee/compiler-options.twee file. Your game will NOT compile if you don't do this first!

Donations

Note: I suggest donating to Twine development or SugarCube development if you really want to help out, but I'd welcome a few dollars if you feel like it.

ko-fi

tweego-setup's People

Contributors

chapelr avatar cliffhall avatar dependabot[bot] avatar tmedwards avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

tweego-setup's Issues

Get rid of gulp and simplify build

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)

eslint ?

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

is eslint good for this setup? thx

readme.md library wrapper example

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.

Please add an option to place user scripts in external file

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
+}

Create a Tweego 2 branch.

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

175 vulnerabilities

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

Favicon HTML not added to output

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.

Does not build with nodejs 11

> [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

update css only

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

module is not present

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 ?

package.json dependencies should be development dependencies

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.

csslint doesn' support CSS variables

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!

Story format change issue

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.