Gulped

Project template based on SASS and EJS bundled by Gulp

Make HTML markup easily with this project template.

Follows the Airbnb JavaScript Style Guide.

Technologies

Views

• gulp-ejs for creating static html-pages
• gulp-data for filling ejs-templates with data from json-files

Styles

• gulp-sass for compiling scss files
• gulp-postcss for transforming styles with plugins:
  • postcss-import for inline third-party CSS content
  • autoprefixer for adding vendor prefixes
  • cssnano for minifying css
• sanitize.css for styles normalizations

Scripts

• gulp-bro for scripts bundling
• @babel/core, @babel/preset-env, @babel/register, babelify for transpiling ES6 code
• gulp-terser for minifying javascript

Images

• gulp-imagemin for minifying images

Development

• gulp for project bundling
• gulp-sourcemaps for source map support
• gulp-header for adding banner in styles and scripts
• gulp-if for conditionally running of tasks
• multipipe for grouping conditional tasks
• through2 for custom pipes
• gulp-notify for error notification
• gulp-cached, gulp-progeny for incremental build
• eslint, eslint-config-airbnb-base, eslint-plugin-import, babel-preset-airbnb for codestyle
• gulp-rename for renaming minifyed files
• browser-sync for real-time browser testing
• del for clearing build directory
• gulp-zip for production files packing
• yargs for parsing command line arguments

File structure

.
├── app               # Source files
│   ├── fonts         # Fonts
│   ├── images        # Images
│   ├── js            # JS files
│   ├── scss          # SCSS files
│   ├── static        # Static files
│   └── views         # EJS files
├── public            # Compiled files
│   └── assets
│       ├── css       # CSS files
│       ├── images    # Images
│       ├── fonts     # Fonts
│       └── js        # JS files
└── release           # ZIP-archives with compiled files

Usage

Install Node.js.

Install Gulp CLI:

$ npm install gulp-cli -g

Clone repo and install dependencies:

$ git clone https://github.com/mrDinckleman/gulped project
$ cd project
$ npm install

Change name, version, homepage and author information in package.json because they appear in banner.

Then run npm run start to run the project. A new browser window will open with a BrowserSync server showing the finished files.

Run npm run build for building version for production.

Commands npm run styles and npm run scripts build production versions for styles and script respectively.

Views

To add global template data, specify it in app/views/global.json.

To add new template like page.ejs, place it to the app/views directory. You can add associated data to page.json.

Scripts

To add vendor scripts, just import it in app/scripts/app.js like:

import $ from 'jquery';

Static

Files, placed in app/static directory will be copied to the root of public directory. Use it for favicon, robots.txt or other similar files.