Creating a webpage

Learning Gulp : part 13 of 22 published on Aug 10, 2015

Moving CSS and JavaScript files is all well and good, but we do actually want webpages right?

Let’s start our webpage generation by first moving the index.html file we created while learning more about streams.

It should look like:

<!-- /contents/index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Learning Gulp</title>
</head>
<body>
  <h1>Hello Gulp!</h1>
</body>
</html>

We will then create a simple homepage task to move the index.html file to our build directory.

// gulpFile.js
...
gulp.task("homepage", function() {
  return gulp.src("contents/index.html")
    .pipe(gulp.dest("build"));
});

Now test the task.

$ gulp homepage
Using gulpfile ~/YOUR_DIRECTORY/gulpFile.js
Starting 'homepage'...
Finished 'homepage' after 15 ms

Hmmm, it would be nice to be able to preview our website as we generate the content. Let’s do that next.

Next: Gulp Watch