chapelr / tweego-setup Goto Github PK
View Code? Open in Web Editor NEWA Tweego project boilerplate.
License: The Unlicense
A Tweego project boilerplate.
License: The Unlicense
What it says on the tin. In the package.json
, the current dependencies
should probably be devDependencies
instead.
Rule of thumb:
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
+}
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:
how do i change jshint to eslint ? what settings do i need to change ?
is eslint good for this setup? thx
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.
I'll keep the Tweego 1 branch available, but make a Tweego 2 branch as well with the new StoryData
and such.
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
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
> [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
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!
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 ?
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);
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.
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!
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
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.