gulp-es6-boilerplate

Gulp ES6 Boilerplate

Installation

Download node at nodejs.org and install it, if you haven't already.

if using gulp-image-resize

Make sure GraphicsMagick or ImageMagick is installed on your system and properly set up in your PATH.

Ubuntu:

apt-get install imagemagick
apt-get install graphicsmagick

Mac OS X (using Homebrew):

brew install imagemagick
brew install graphicsmagick

Windows & others:

• GraphicsMagick: http://www.graphicsmagick.org/download.html
• ImageMagick: http://www.imagemagick.org/script/binary-releases.php

Confirm that GraphicsMagick or ImageMagick is properly set up by executing gm -version or convert -version in a terminal.

Tests

npm install
npm test

Running

Develop environment

npm start

Production environment

npm dist

Commit guidelines (conventional changelog)

Conventional Changelog Angular

Release a new version

• copy everything to package root and change some paths on files

npm run release

• merge (ONLY) from develop to master

git merge --no-ff develop

• release (patch, minor or major) package and push changes to repo

npm run release:[version]
git push

Dependencies

• font-awesome: The iconic font and CSS framework
• lodash: Lodash modular utilities.
• rrssb: Ridiculously Responsive Social Sharing Buttons

Dev Dependencies

• autoprefixer: Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
• babel-core: Babel compiler core.
• babel-preset-es2015: Babel preset for all es2015 plugins.
• babel-preset-stage-0: Babel preset for stage 0 plugins
• babel-register: babel require hook
• babelify: Babel browserify transform
• browser-sync: Live CSS Reload & Browser Syncing
• browserify: browser-side require() the node way
• connect-logger: connect middleware for logging
• conventional-changelog-cli: Generate a changelog from git metadata
• cssnano: A modular minifier, built on top of the PostCSS ecosystem.
• david: Node.js module that tells you when your project npm dependencies are out of date.
• del: Delete files and folders
• doiuse: Lint CSS for browser support against caniuse database.
• eslint: An AST-based pattern checker for JavaScript.
• eslint-config-airbnb: Airbnb's ESLint config, following our styleguide
• gulp: The streaming build system
• gulp-autoprefixer: Prefix CSS
• gulp-changed: Only pass through changed files
• gulp-cheerio: Manipulate HTML and XML files with Cheerio in Gulp.
• gulp-concat: Concatenates files
• gulp-csso: Minify CSS with CSSO.
• gulp-eslint: A gulp plugin for processing files with ESLint
• gulp-file-include: a gulp plugin for file include
• gulp-filter: Filter files in a vinyl stream
• gulp-gzip: Gzip plugin for gulp.
• gulp-htmlmin: gulp plugin to minify HTML.
• gulp-if: Conditionally run a task
• gulp-image-resize: Resizing images made easy.
• gulp-imagemin: Minify PNG, JPEG, GIF and SVG images
• gulp-less: Less for Gulp
• gulp-load-plugins: Automatically load any gulp plugins in your package.json
• gulp-notify: gulp plugin to send messages based on Vinyl Files or Errors to Mac OS X, Linux or Windows using the node-notifier module. Fallbacks to Growl or simply logging
• gulp-plumber: Prevent pipe breaking caused by errors from gulp plugins
• gulp-postcss: PostCSS gulp plugin
• gulp-rev: Static asset revisioning by appending content hash to filenames: unicorn.css => unicorn-d41d8cd98f.css
• gulp-rev-replace: Rewrite occurences of filenames which have been renamed by gulp-rev
• gulp-size: Display the size of your project
• gulp-sourcemaps: Source map support for Gulp.js
• gulp-stylelint: Gulp plugin for running Stylelint results through various reporters.
• gulp-svgmin: Minify SVG files with gulp.
• gulp-svgstore: Combine svg files into one with <symbol> elements
• gulp-tar: Create tarball from files
• gulp-uglify: Minify files with UglifyJS.
• gulp-useref: Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
• gulp-util: Utility functions for gulp plugins
• imagemin-pngquant: pngquant imagemin plugin
• karma: Spectacular Test Runner for JavaScript.
• karma-mocha: A Karma plugin. Adapter for Mocha testing framework.
• mocha: simple, flexible, fun test framework
• object-assign: ES2015 Object.assign() ponyfill
• postcss-discard-comments: Discard comments in your CSS files with PostCSS.
• postcss-less: LESS parser for PostCSS
• postcss-reporter: Log PostCSS messages in the console
• postcss-svgo: Optimise inline SVG with PostCSS.
• pretty-hrtime: process.hrtime() to words
• require-dir: Helper to require() directories.
• rimraf: A deep deletion module for node (like rm -rf)
• rsyncwrapper: An async wrapper to the rsync command line utility for Node.js.
• run-sequence: Run a series of dependent gulp tasks in order
• stream-combiner2: This is a sequel to stream-combiner for streams3.
• style-paths: Find the paths of every bower_component with a .sass or .scss file (for use with sass' includePath option)
• stylelint: Modern CSS linter
• stylelint-config-standard: Standard shareable config for stylelint
• vinyl-buffer: Convert streaming vinyl files to use buffers
• vinyl-source-stream: Use conventional text streams at the start of your gulp or vinyl pipelines
• watchify: watch mode for browserify builds
• yargs: yargs the modern, pirate-themed, successor to optimist.

License

MIT

Acknowledgement

Would like to thank Hugo Dias (https://github.com/hugomrdias) for sharing all his knowledge.