Initial commit

Author: code-warrior

.gitignore

@@ -0,0 +1,32 @@
+# Installation
+
+## 1 — Node and NPM
+Download Node from [https://nodejs.org/en/download/](https://nodejs.org/en/download/).
+
+### Check the Node, NPM, and NPX Installation Versions
+
+```bash
+node -v
+```
+
+```bash
+npm -v
+```
+
+```bash
+npx -v
+```
+
+## 2 — Gulp
+Install (`i`) the Gulp command line interface (`gulp-cli`) globally (`-g`) via NPM (`npm`).
+
+```bash
+npm i -g gulp-cli
+```
+
+### Check the Gulp Installation Version
+```bash
+gulp -v
+```
+
+§

01--installation-instructions.md

@@ -0,0 +1,61 @@
+## Creating `package.json`
+Gulp requires a manifest file called `package.json` that configures its tasking environment. We’ll cover the the basics that most people use, but you can look at [https://docs.npmjs.com/files/package.json](https://docs.npmjs.com/files/package.json) for more.
+
+Create a folder anywhere on your computer that isn’t this repo and name it `compress-html`. (A folder in this repo called `compress-html` already exists. Ignore it.) Navigate into the folder and initialize the creation of `package.json`:
+```bash
+npm init
+```
+You are now in interactive mode with NPM to populate `package.json` with some basic entries.
+
+The first entry you’re required to interact with is for the package name. The default, rendered in parentheses, is the name of the folder in which `npm init` was run. Items in parentheses become the default value if the user hits `return`. Items without parentheses enter blank values if the user hits `return`.
+```bash
+package name: (compress-html)
+```
+
+Take the default. As your projects improve, you would update its version number.
+```bash
+version: (1.0.0)
+```
+
+Taking a moment to describe your project will help you to distinguish one project from another.
+```bash
+description:
+```
+
+If you were authoring a Node program, `index.js` might be the program that initiates your project. However, because our project is a Gulp task running project, we use `gulpfile.js` (or `Gulpfile.js`) as the entry point.
+```bash
+entry point: (index.js): gulpfile.js
+```
+
+This setting allows for tests to be run using `npm run-script SCRIPT`, where `SCRIPT` is one or more command(s)/script(s) you might use to test your project before deployment. At the outset, we won’t need it. Hit `return`.
+```bash
+test command
+```
+
+If your project is being synced with a remote, that would go here. Leave it blank at outset.
+```bash
+git repository:
+```
+
+These keywords are used by `npmjs` to search. Leave these empty for now.
+```bash
+keywords:
+```
+
+Enter your name
+```bash
+author:
+```
+
+This option takes an SPDX-formatted license initialism, listed at [https://spdx.org/licenses/](https://spdx.org/licenses/). Take the default.
+```bash
+license: (ISC)
+```
+
+And, finally, a report of all your entries is given to you for verification. If it all looks correct, hit `return`.
+```bash
+Is this OK? (yes)
+```
+One last note. If you want to stand up a Gulp project and you’re willing to take all the defaults for your `package.json` file, simply run `npm init --yes`.
+
+§

02--creating-package-json-instructions.md

@@ -0,0 +1,20 @@
+# Installing Gulp Modules
+With `package.json` in place, we can now choose the Gulp module(s) we need in order to auto-task our development work. This is usually done with the command `npm i -D MODULE`: `i`nstall `MODULE` and save it for use during `-D`evelopment. (The long form of `npm i -D MODULE` is `npm install --save-dev MODULE`.)
+
+`MODULE` is the name of a Gulp module we’d invoke in a task. As an example, let’s use `gulp-htmlmin`, which is a module that compresses HTML files. In the same folder in which `package.json` was created, let’s run:
+```bash
+npm i -D gulp-htmlmin
+```
+
+This will search for `gulp-htmlmin` in the [NPM registry](https://registry.npmjs.org/), then, if found, download the `gulp-htmlmin` module into a folder called `node_modules`. If `node_modules` doesn’t exist, this module will create it. (Every first module fetched from the registry will create `node_modules` if `node_modules` isn’t found.)
+
+If you open `package.json`, you’ll note that a new object called `devDependencies` was added with a member whose name is `"gulp-htmlmin"` and whose value is `"^5.0.1"` (`"gulp-htmlmin": "^5.0.1"`). This means that the versions of `gulp-htmlmin` that will be used range from `5.0.1` → `6.0.0`, inclusive and exclusive, respectively. (Read more at [https://docs.npmjs.com/misc/semver#caret-ranges-123-025-004](https://docs.npmjs.com/misc/semver#caret-ranges-123-025-004).)
+
+Let’s also install a local version of Gulp:
+```bash
+npm i -D gulp
+```
+
+Note the new member object in `devDependencies`.
+
+§

03--installing-gulp-modules.md

@@ -0,0 +1,76 @@
+# Writing the Gulpfile
+It’s in this last step that we write the Gulp task(s). Most times, if not every time, you’ll think of some feature in the development or deployment of your project, Google the terms, then find yourself on either the NPMJS page for the Gulp plugin, or its GitHub page.
+
+In fact, let’s try it. Google “gulp html compressor,” without the inch marks. You’ll likely come across a handful of links to Gulp plugins for minifiying/compressing HTML. Let’s go with [`gulp-htmlmin`](https://www.npmjs.com/package/gulp-htmlmin).
+
+The NPMJS page for a Gulp plugin will usually have an **Install** section, one or more examples in the **Usage** section, and options under the **API** section.
+
+**Note**: Because Gulp 4 was released in January 2018, it’s still considered relatively new. As such, many examples on the NPMJS web site and on the web were written in Gulp 3.9.x. All examples in this tutorial and repo are written in Gulp 4.0.0.
+
+In the `compress-html` folder we’ve been working in during this tutorial, create a folder called `uncompressed-html`, then add an HTML document called `index.html` to it.
+
+Now, create an empty file called `gulpfile.js` in `compress-html`. Recall from step 2 of this tutorial that `gulpfile.js` is the `entry point` in `package.json`. Before continuing, ensure the folder `compress-html` has the following folders/files:
+* `package.json`
+* `uncompressed-html/index.html`
+* `gulpfile.js`
+* `node_modules` (there are too many folders/files to list under `node_modules`, so just ensure it exists.)
+
+Copy and paste the following into `gulpfile.js`.
+
+```javascript
+const { src, dest } = require(`gulp`);
+const htmlCompressor = require(`gulp-htmlmin`);
+
+let compressHTML = () => {
+ return src(`uncompressed-html/*.html`)
+ .pipe(htmlCompressor({collapseWhitespace: true}))
+ .pipe(dest(`compressed-html/`));
+}
+
+exports.compressHTML = compressHTML;
+```
+
+Before I explain the syntax, run the following from your command line:
+```bash
+gulp compressHTML
+```
+
+If there are no problems, then a new folder called `compressed-html` would have been added to the `compress-html` folder, and `index.html` from the folder `uncompressed-html` would have been copied into `compressed-html`, but minified/compressed. Open`index.html` in a text editor and verify that it, indeed, has been minified/compressed.
+
+Now, back to the code.
+
+## Line 1
+```javascript
+const { src, dest } = require(`gulp`);
+```
+
+Standing for source and destination, respectively, `src` and `dest` are Gulp functions used to source input (`src`) and to generate output (`dest`).
+
+## Line 2
+```javascript
+const htmlCompressor = require(`gulp-htmlmin`);
+```
+
+Recall that we installed the Gulp module/plug-in earlier by running `npm i -D gulp-htmlmin`, which installed `gulp-htmlmin` into the `node_modules` folder. This assignment gives us access to `gulp-htmlmin`’s features.
+
+## Lines 4–8
+```javascript
+let compressHTML = () => {
+ return src(`uncompressed-html/*.html`)
+ .pipe(htmlCompressor({collapseWhitespace: true}))
+ .pipe(dest(`compressed-html/`));
+}
+```
+
+First, a note about task naming. Instead of echoing the name of the Gulp module in the task name, I name tasks based on what they do. This differs somewhat from the approach taken by many in the Gulp community. As an educator, I find this to be easier to understand. Thus, naming the task `compressHTML` is clearer than naming it something like `gulp-htmlmin`.
+
+Now, back to the code on lines 4–8.
+
+We establish a function, which we’ll also refer to as a task, called `compressHTML`, which will do the following:
+1. Source all HTML files in the `uncompressed-html` folder.
+2. Pipe, or send, the outputof all the HTML files to our `htmlCompressor` function, which, in turn, receives an object of options (a common Gulp feature) that collapses whitespace.
+3. Pipe the compressed HTML files, which are copies of the original files in the `uncompressed-html` folder, to the final destination: the `compressed-html` folder. If the folder doesn’t exist, the `dest` function will create it; the compressed files retain the names of the original files copied from the `compressed-html` folder.
+
+You’ve authored your first task.
+
+§

04--writing-the-gulpfile.md

@@ -0,0 +1,16 @@
+# Getting Started
+Gulp is a stream-based, JavaScript task runner that is derived from Node via NPM. It automates many of the tasks used in front end development, such as compressing files, linting syntax, and creating production versions of development files. Before we start, we need to install Node, which is packaged with NPM, and Gulp.
+
+## Installation the Required Software
+[01--installation-instructions.md](01--installation-instructions.md)
+
+## Creating the `package.json` Manifest File
+[02--creating-package-json-instructions.md](02--creating-package-json-instructions.md)
+
+## Installing Gulp Modules/Plug-Ins
+[03--installing-gulp-modules.md](03--installing-gulp-modules.md)
+
+## Writing the Gulpfile
+[04--writing-the-gulpfile.md](04--writing-the-gulpfile.md)
+
+There are other useful Gulp recipes in this repo’s `gulp-recipes` folder. Study them; make them your own.

README.md

@@ -0,0 +1,13 @@
+const { src, dest } = require(`gulp`);
+const sass = require(`gulp-sass`);
+
+let compileCSS = () => {
+ return src(`sass/main.scss`)
+ .pipe(sass({
+ outputStyle: `expanded`,
+ precision: 10
+ }).on(`error`, sass.logError))
+ .pipe(dest(`css/`));
+};
+
+exports.compileCSS = compileCSS;