Gulped 
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.