User Tools

Site Tools



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

Link to this comparison view

entwine:setting_up_a_project [2016/05/19 09:04]
entwine:setting_up_a_project [2017/10/09 20:39]
Line 1: Line 1:
-===== Setting Up a Project ===== 
-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. We'll set this up in the directions that follow. 
-  * **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. 
-<note tip> 
-After this step, npm will print out exactly what it writes to **package.json**. This will include a line that says 
-"​scripts":​ { 
-    "​test":​ "echo \"​Error:​ no test specified\"​ && exit 1" 
-''​. Although it says "​error,"​ no error has occurred -- this text is just a placeholder npm inserts into **package.json**. 
-  - 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. 
-<note tip> 
-npm will probably print out things like ''​npm WARN package.json @1.0.0 No description'',​ ''​npm WARN package.json @1.0.0 No repository field'',​ and ''​npm WARN package.json @1.0.0 No README data''​ whenever you ask it to install packages. You can ignore these. There are some extra files, like a README, that npm suggests you create, but they aren't necessary for using npm. 
-  - 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. This means that you can send your entire project folder to someone else, and they'​ll be able to use it without having to install the packages you just did. It also means that if you're done with your project folder and delete it, you don't have to do any extra uninstallation work to remove these packages. 
-  * 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. 
entwine/setting_up_a_project.txt ยท Last modified: 2017/10/09 20:39 (external edit)