Skip to content

Commit 51367cd

Browse files
code-warriorcode-warrior
committed
Merge branch 'maintenance' into dev with v3.0.0 of project
2 parents 014e51f + 2cffa29 commit 51367cd

29 files changed

+280
-851
lines changed

‎README.md‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
# An Elaborate Gulp Task for HTML, Sass/CSS, and JavaScript
1+
# A Gulp Task for HTML, Sass/CSS, and JavaScript
22

3-
(v2.0.0)
3+
(v3.0.0)
44

55
---
66

77
## Installation
8-
All the required Node modules need to be installed before you can use this template. From the root folder of this project, type `npm install`. This will create a folder called `node_modules` and download the plugins listed under the `devDependencies` section in the `package.json` file. If you encounter an `ERR!` message about `EACCES`, then you’ll need to run the command as the super user: `sudo npm install`. Because the 13 Gulp tasks amount to about 220MB, expect to wait.
8+
You need to have Java installed before continuing, as the browser refresh module requires it. Additionally, all the required Node modules need to be installed before you can use this template. From the root folder of this project, type `npm install`. This will create a folder called `node_modules` and download the plugins listed under the `devDependencies` section in the `package.json` file. If you encounter an `ERR!` message about `EACCES`, then you’ll need to run the command as the super user: `sudo npm install`. Because the Gulp tasks amount to about 157MB, expect to wait.
99

1010
## Tasks
1111
Typing `gulp --tasks`, or simply `gulp`, will provide you with a list of tasks included in `gulpfile.js`. Tasks such as `build` and `serve` invoke other tasks and are nested in the output of `gulp --tasks`.
@@ -14,16 +14,9 @@ Each task can be run on its own. For example, if all you want to do is validate
1414

1515
Above each task in the `gulpfile.js` file is an elaborate comment discussing what each task does.
1616

17-
## Individual Tasks as Branches
18-
Each of the 13 tasks has been broken out into its own branch, and the full `gulpfile` is available without comments and without variables. You can view all the branches with `git branch -a`.
19-
2017
## Running the Project
21-
For development, run `gulp serve`, which runs multiple development-related tasks, then launches your default browser and listens for changes. Gulp keeps you informed via The Terminal. You can now work on your project as you normally would. Each time you save a file, your browser will refresh so you don’t have to.
22-
23-
## About the Example
24-
The example in this project is taken from [https://github.com/code-warrior/abraham-lincoln-assassination-trivia](https://github.com/code-warrior/abraham-lincoln-assassination-trivia) and not meant to be elaborate. It’s only purpose is to show you how to stand up a web project that uses HTML, Sass/CSS, and JavaScript. Compare the scaffolding of the original project to this one in order to get a better idea of how this template is structured.
25-
26-
## About the Scaffold
2718
All your work must be added to the sub-folders under the `dev` folder: your markup in `html`, your Sass/CSS in `styles`, your JavaScript in `scripts`, and your images in `img`.
2819

29-
Running `build` creates a folder called `prod`, which is the production version of your project. This is the folder you’d upload to your server if you were going live with your project.
20+
For development, run `gulp serve`, which runs multiple development-related tasks, then launches your default browser and listens for changes. Gulp keeps you informed via The Terminal. You can now work on your project as you normally would. Each time you save a file, your browser will refresh so you don’t have to.
21+
22+
For production-ready projects, run `build`, which creates a folder called `prod`. This is the folder you’d upload to your server if you were going live with your project.

‎dev/html/index.html‎

Lines changed: 9 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,11 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Abraham Lincoln Trivia</title>
6-
<link rel="stylesheet" href="styles/main.css">
7-
</head>
8-
<body>
9-
<header>
10-
<h1><span>Facts Surrounding Abraham Lincoln’s Assassination</span></h1>
11-
</header>
12-
<p id="show-users-name"></p>
13-
<div id="name-container">
14-
<form id="request-users-name">
15-
<div>
16-
<label for="users-name">Enter your first name:</label>
17-
<input id="users-name" type="text" name="users-name">
18-
<button type="button" name="submit-users-name" id="submit-users-name">Submit</button>
19-
</div>
20-
</form>
21-
</div>
22-
<main>
23-
<p>April 2015 marks the 150<sup>th</sup> anniversary of Abraham Lincoln’s assassination. Use this web page to test your knowledge of his life and the facts surrounding his tragic, untimely assassination.</p>
24-
<p>Here’s your first fact: The background image (created by Eugene Richards for National Geographic) of this page shows the Lincoln catafalque, which was specially constructed to carry Abraham Lincoln’s coffin during his funeral train procession from Washington, <abbr title="District of Columbia">DC</abbr> to Springfield, Illinois.</p>
25-
<!-- WHERE WAS LINCOLN BORN -->
26-
<section id="where-was-lincoln-born-question-container">
27-
<h2><label for="lincolns-birth-place">Where Was Lincoln Born?</label></h2>
28-
<div>
29-
<form>
30-
<div>
31-
<select id="lincolns-birth-place" name="lincolns-birth-place">
32-
<option value="lansing">Lansing, Michigan</option>
33-
<option value="hodgenville">Hodgenville, Kentucky</option>
34-
<option value="washington">Washington, DC</option>
35-
</select>
36-
<button type="button" name="submit-lincolns-birth-place" id="submit-lincolns-birth-place">Submit</button>
37-
</div>
38-
</form>
39-
</div>
40-
<aside>
41-
<p></p>
42-
</aside>
43-
<button type="button" name="move-to-question-2" id="move-to-question-2">Next Question</button>
44-
</section>
45-
<!-- WHO ASSASSINATED LINCOLN -->
46-
<section id="who-assassinated-lincoln-question-container">
47-
<h2><label for="lincolns-assassin">Who Assassinated Lincoln?</label></h2>
48-
<div>
49-
<form>
50-
<div>
51-
<select id="lincolns-assassin" name="lincolns-assassin">
52-
<option value="lee-oswald">Lee Harvey Oswald</option>
53-
<option value="john-booth">John Wilkes Booth</option>
54-
<option value="john-hinckley">John Hinckley Jr</option>
55-
</select>
56-
<button type="button" name="submit-name-of-lincolns-assassin" id="submit-name-of-lincolns-assassin">Submit</button>
57-
</div>
58-
</form>
59-
</div>
60-
<aside>
61-
<p></p>
62-
</aside>
63-
<button type="button" name="move-to-question-3" id="move-to-question-3">Next Question</button>
64-
</section>
65-
</main>
66-
<script src="scripts/app.js" defer></script>
67-
</body>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>A Gulp-based Template for HTML, CSS, Sass, and ES6 JS</title>
6+
<link rel="stylesheet" href="styles/main.css">
7+
</head>
8+
<body>
9+
<script src="scripts/app.js" defer></script>
10+
</body>
6811
</html>

‎dev/img/.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
modular-grid.png

‎dev/img/04-lincolns-catafalque-us-capitol-670.jpg‎

-82.5 KB
Binary file not shown.

‎dev/scripts/01-variables.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎dev/scripts/02-functions.js‎

Lines changed: 0 additions & 256 deletions
This file was deleted.

0 commit comments

Comments
 (0)