template-gulp

template-gulp

Reusable blank template for a Gulp.js workflow with SCSS, Autoprefixer, JS minifying, BrowserSync, and Jekyll!

template-gulp

Example Gulp.js workflow with all the file structure you need to get started with Gulp.js and a number of the most helpful modules for a front-end developer.

This uses SCSS with Autoprefixer, minify and concat for JS, BrowserSync for automatic page refreshing, and Jekyll to generate a static site or blog, with more too (optionally).

I've written a detailed blog article about how to install and use this if it's your first time working with Gulp.

Prerequisites

If you want to run a static site (not required if you just want to process CSS/JS/images):

If you want to publish to GitHub:

  • Git, which you can get through installing GitHub Desktop which installs git.

There's an alternate way to publish if you don't want to use git.

Installation

If you plan to publish a site, I strongly recommend you clone this repo as that will make it a breeze for you to publish to GitHub Pages later. If you have GitHub Desktop, you can just click "Clone in Desktop" down the right side of this GitHub repo page.

If you're not publishing, you can manually download the starter files.

Once you've got the project starter files, navigate to the directory where you put them. From here, install the dependencies by running:

npm install gulp-sass gulp-autoprefixer gulp-imagemin imagemin-pngquant gulp-concat gulp-uglify browser-sync gulp-gh-pages --save-dev 

Pay special attention to gulpfile.js, that's where all the magic happens.

Without Jekyll

If you don't want to use Jekyll as a part of this (so if you only want to compile your SCSS and other assets), you need to comment out the Jekyll parts of the gulpfile.js (it's annotated), and delete _config.yml, src/_includes, src/_layouts and src/index.md.

Since Jekyll is what generates the HTML files, you'll need to manually add an index.html file to dist. Make sure it has the following in the <head>:

<link rel="stylesheet" href="css/application.css">
<script src="js/application.js"></script>

Usage

While in the project root, start the server by running:

gulp

Deploying

To GitHub Pages

git is required for this.

From the project root, run:

gulp deploy

Because you cloned this repo, your project root has all the necessary files so that the deploy command can automatically create the gh-pages branch (on the first time you run the command) and publish the contents of your dist folder there. Your site will be live a few minutes later at [github-username].github.io/[repo-name]. GitHub will email you when the site is published. You can also use your own domain name for free.

To Surge

Surge is my preferred way to deploy static sites. It's free, offers all the same features as GitHub Pages, and doesn't require your code be open which makes it ideal for client sites. It also doesn't require git.

It isn't included in the dependencies of this project by default, so you'll need to install it. Once installed, run:

surge dist

(Typing dist tells it to just upload your compiled site, otherwise it'll upload everything.) It'll help you sign up for a Surge account (email & password) from the command line, and by default deploys to a .surge.sh subdomain, but much like with GitHub Pages you can [use your own domain name for free](https://surge.sh/help/adding-a-custom-domain name).

Base file structure

dist/
    css/
        application.css
    js/
        application.js
    img/
        example.png
    index.html
src/
    _includes/
        head.html
    _layouts/
        default.html
    img/
        example.png
    js/
        example1.js
        example2.js
    scss/
        main.scss
    index.md
_config.yml
gulpfile.js
package.json