My Super-Awesome Gulpfile ✨

This gulpfile serves to jump-start a build system for new projects. By default, it compiles SCSS stylesheets and JavaScript with JSX using Babel, all with support for source maps.

Project Structure

.
├── README.md
├── gulpfile.js
├── package.json
├── public
│   ├── css
│   │   └── main.css
│   ├── index.html
│   └── js
│       └── main.js
└── src
    ├── css
    │   ├── _mixin.scss
    │   ├── main.scss
    │   └── ...
    ├── index.html
    ├── ...
    └── js
        ├── main.js
        ├── module.js
        └── ...

Original source files go in src, and compiled output lands in public, which itself is gitignored and can be generated by running gulp with no arguments.

CSS

Stylesheets are written in SCSS and placed in src/css. Mixins must be in the same directory or a subdirectory. Compiled CSS is saved as public/css/main.css.

HTML

HTML files in src/ are copied directly to public/ without alteration.

JS

JavaScript sources may be written using ES6 features and JSX syntax. Modules are bundled together with Browserify and minified into a single file, which is saved as public/js/main.js.

Setup

For an existing project, just save gulpfile.js to your project's directory and install the dependencies with npm. Alternatively, for a new project:

# Clone this repository
$ git clone https://github.com/btmills/gulpfile.git $MY_PROJECT_NAME

# Navigate into the cloned directory
$ cd $MY_PROJECT_NAME

# No need to keep the Git history for this repository
$ rm -rf .git

# Create a new Git repository
$ git init

# Install the gulp CLI
$ npm install --global gulp

# Install dependencies
$ npm install

Usage

The typical workflow will involve starting the Gulp watcher with gulp watch, then leaving it to run during development. Changed files will be recompiled automatically.

Rebuild CSS, HTML, or JS assets individually one time using gulp css, gulp html, or gulp js, respectively.

Rebuild all assets once by running gulp with no arguments.

To clean up compiled output by deleting the public/ directory, run gulp clean.

Contributing

If you're new to contributing to open source software, GitHub has a great guide to help you get started. The guidelines there generally apply here. More specifically:

1. Fork this repository on GitHub.
2. Checkout a new branch for your change.
3. Committed changes until everything is ready.
4. Push the branch to your fork.
5. Create a pull request.

While issues and pull requests are welcome, please note that I use this as a resource for my personal projects. I'm happy to share it with the goal that it may be useful to someone other than myself, but if a change doesn't fit my workflow, I might not accept it into this repository. Since this is open source, even if our workflows differ, you are welcome and encouraged to fork this repository, customize it to fit your needs, and share your changes with the world if you desire. 🎆

License

MIT © Brandon Mills