User Tools

Site Tools


entwine

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
entwine [2016/05/11 15:21]
klembot created
entwine [2017/10/10 00:39] (current)
Line 10: Line 10:
  
 <note tip> <note tip>
-This document assumes ​you want to use Entwine with Grunt. ​It's also possible to use Entwine on the command line by itself, if you're experienced with writing shell scriptsIf you'd like to do this, follow the directions for installing Node below, then run ''​npm install -g twine-utils''​. After that completes, running ''​entwine --help''​ will acquaint you with the direct command-line interface, and the [[https://​bitbucket.org/​klembot/​grunt-entwine/​|Grunt Entwine task's documentation]] also provides more information as to what the options do.+We'll assume ​you want to use Entwine with Grunt. ​If you're experienced with shell scripting, it's also possible to use Entwine on the command line by itself. ​To do this, follow the directions for installing Node below, then run ''​npm install -g twine-utils''​. After that completes, running ''​entwine ​%%--%%help''​ will acquaint you with the direct command-line interface, and the [[https://​bitbucket.org/​klembot/​grunt-entwine/​|Grunt Entwine task's documentation]] also provides more information as to what the options do.
  
-There is no Entwine plugin for Gulp or Brunch, other popular ​tasks runners in the Node ecosystem.+There is no Entwine plugin for Gulp or Brunch, ​which are other popular ​task runners ​for Node, and no current plans to create them.  
 +</​note>​ 
 + 
 +==== One-Time Setup ==== 
 + 
 +As the title indicates, you only need to complete the steps in this section once on your computer. You will need to be connected to the Internet. 
 + 
 +  - Download the LTS version of Node from [[https://​nodejs.org|the official web site]] and install it by opening the file you download. LTS stands for "​long-term support"​ -- it lags behind the most current version, but is better-tested. 
 +  - Open a terminal window. 
 +    - On Windows, make sure to do this by following this path of options from the Start menu: Start -> All Programs -> Node.js -> Node.js command prompt. Doing so will make sure that Node is properly available to you. 
 +    - On OS X, open the Terminal application that's in the Utilities folder of your Applications folder. 
 +    - On Linux, how you open a terminal window depends on what distribution you're using. On Ubuntu, look under Applications -> Accessories -> Terminal.  
 +  - Type ''​npm install -g grunt-cli''​ and press the Enter key. This command asks npm -- short for the Node Package Manager -- to install Grunt for you. The ''​-g''​ part ensures that you'll be able to use Grunt across any project you create. The G is short for "​global."​ 
 + 
 +npm will print out text as it installs Grunt, and it's normal for it to pause for a moment after you press Enter before printing any response. What it's doing is consulting a global repository to find the files you need -- a lot more convenient than you having to hunt around on the Web. When you see the prompt again after it completes, you're done. 
 + 
 +==== Project Setup ==== 
 + 
 +You'll need to do the steps in this section each time you set up a new project. We'll use a simple folder structure for your project, but you can use a different one if you prefer. 
 + 
 +  * **src** (short for //source//) will contain all your source files. That means Twine story files, images or other multimedia, and CSS and JavaScript files. 
 +  * **build** will contain any intermediate files that need to be created during the build process. 
 +  * **dist** (short for //​distribution//​) will contain the end result of the process, ready to be posted to a web site or otherwise made available to the world. 
 + 
 +Given that, here's what to do. You will need to be connected to the Internet. 
 + 
 +  - Create a new folder for your project. In these examples, we'll call it **my-project**. 
 +  - Open a terminal window and go to this new folder with the ''​cd''​ command. 
 +    - On Windows, the easiest thing to do is to copy the address of your folder from the address bar of an Explorer window, and place quotation marks around it. The resulting command should look something like ''​cd %%"​%%C:​\Users\You\Documents\my-project%%"​%%''​. 
 +    - On OS X, try typing ''​cd''​ with a space after it, then drag your project folder onto your terminal window. The resulting command should look like ''​cd /​Users/​You/​Documents/​my-project''​. 
 +    - On Linux, the easiest way to get there varies by your distribution. 
 +  - Type ''​npm init -y''​ and press the Enter key. npm will create a file for you called **package.json** that we'll talk about in a second. 
 +  - Type ''​npm install %%--%%save grunt load-grunt-tasks grunt-entwine''​ and press Enter. npm will think for a moment, then install Grunt and Entwine for you. 
 +  - Create a folder named **src** inside the project folder. We don't need to create **build** or **dist**, but it doesn'​t hurt. Grunt will eventually create them for us as needed. 
 +    - You can do this from the terminal window by typing ''​mkdir src''​ and pressing Enter, or just create the folder the way you normally would. 
 + 
 +If everything went correctly, you'll have three things in your project folder: 
 + 
 +  * A folder named **node_modules**. npm uses this as a storage area for the packages you ask it to install. You can leave this as-is. 
 +  * A file named **package.json**. This file records information about your project; most importantly,​ what software packages it needs to work. You can leave this file as-is too, as npm will update it for you. (If you peek inside, you'll see it mentions ''​grunt'',​ ''​load-grunt-tasks'',​ and ''​grunt-entwine'',​ which you installed in step 4 above.) 
 +  * The folder named **src** you created in step 5. 
 + 
 +==== A Simple Grunt Task ==== 
 + 
 +Now that we have all the setup done, let's set up a Grunt task. In this example, and all the ones below, we'll assume you have a terminal window open at the top level of your project folder. If you're not sure how to do that, double-check the instructions above. 
 + 
 +For starters, let's say you want to get a Twine story you've been editing into the **src** folder -- let's say it's called "My Story."​ To do this, we'll need another Grunt plugin to help. Type ''​npm install %%--%%save grunt-contrib-copy''​ and press Enter. As you might guess from its name, this plugin copies files from one place to another. 
 + 
 +Now, create a text file with this in it: 
 + 
 +<code javascript Gruntfile.js>​ 
 +module.exports = function(grunt) { 
 +  require('​load-grunt-tasks'​)(grunt);​ 
 +   
 +  grunt.initConfig({ 
 +    copy: { 
 +      fromTwine: { 
 +        files: [{ 
 +   src: '???My Story.html',​ 
 +          dest: '​src/'​ 
 +        }] 
 +      } 
 +    } 
 +  }); 
 + 
 +  grunt.registerTask('​default',​ ['​copy'​]);​ 
 +}; 
 +</​code>​ 
 + 
 +You don't have to type it in yourself -- just use the link labeled **Gruntfile.js** in the tab above the code to download it. Make sure to save this as **Gruntfile.js** at the top level of your folder. It has to be named exactly this, with the correct capitalization,​ for it to work. 
 + 
 +Now type ''​grunt''​ in your terminal window and press Enter. If everything is correct, then Grunt will respond: 
 + 
 +<​code>​ 
 +Running "​copy:​fromTwine"​ (copy) task 
 + 
 + 
 +Done. 
 +</​code>​ 
 + 
 +... but it won't have copied anything to **src**. We'll fix that in a moment. 
 + 
 +  * If instead you see ''​A valid Gruntfile could not be found'',​ then make sure your **Gruntfile.js** is named correctly, and at the top level of your project, not in **src**. 
 +  * If instead you see ''>>​ SyntaxError:​ missing ) after argument list''​ or anything starting with ''​SyntaxError'',​ double-check the contents of **Gruntfile.js**. It's likely you are missing a parenthensis or other punctuation. 
 + 
 +Let's discuss what's in this file, because the format of a Gruntfile is always the same. 
 + 
 +The reason right now why nothing is happening is that we haven'​t given Grunt a complete path to your Twine story file. To do that, open Twine and choose **Show Library** from the **Twine** menu. This will open the folder on your computer where Twine automatically saves your stories as you work. Update **Gruntfile.js** with this path. It'll look something like this: 
 + 
 +<code javascript Gruntfile.js>​ 
 +module.exports = function(grunt) { 
 +  require('​load-grunt-tasks'​)(grunt);​ 
 +   
 +  grunt.initConfig({ 
 +    copy: { 
 +      fromTwine: { 
 +        files: [{ 
 +   src: '/​Users/​Me/​Documents/​Twine/​My Story.html',​ 
 +          dest: '​src/'​ 
 +        }] 
 +      } 
 +    } 
 +  }); 
 + 
 +  grunt.registerTask('​default',​ ['​copy'​]);​ 
 +}; 
 +</​code>​ 
 + 
 +If you are using Windows, you should always change the backslashes (e.g. %%\%%) in paths to forward slashes (e.g. /) when using Grunt. 
 + 
 +<note tip> 
 +How did we know about ''​grunt-contrib-copy'',​ and what syntax to use? Grunt maintains a [[http://​gruntjs.com/​plugins|searchable plugin registry]] of its own. Chances are, for whatever task you can think of, there is a Grunt plugin to help you.
 </​note>​ </​note>​
entwine.1462980096.txt.gz · Last modified: 2017/10/10 00:37 (external edit)