Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including protoss with all npm packages installed. Try it out:

var protoss = require("protoss")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

protoss v4.0.3

Gulp tasks for front-end building.


Gulp-tasks collection for frontend building.

  1. Features
  2. Installation
  3. Tasks
  4. Configuration

Usage example


  • Compile Pug (ex Jade) templates. Use PostHTML plugins.
  • Compile SCSS in separate result files (bundles), use glob imports. Add vendor prefixes, optimize css, write source maps. Support custom PostCSS.
  • Bundle JavaScript with Webpack.
  • Generate multiple png-sprites with retina support.
  • Generate multiple svg-sprites with png-fallback.
  • Generate multiple svg-icons sets.
  • Optimize images.
  • Generate favicons.
  • Lint SCSS. Validate HTML with W3C.
  • BrowserSync include.
  • Add Protoss-tasks to you workflow, configure it as you need.


Install gulp-cli:

$ npm install -g gulp-cli

Install gulp and protoss local in you project:

$ npm install --save-dev gulp protoss 

Add protoss require in you gulpfile.js:

const gulp = require('gulp');
const config = {};
require('protoss')(gulp, config);

Now you can use Protoss tasks.



protoss/build - build production version

protoss/dev - build development version

protoss/watch - protoss/dev + run all watchers

protoss/watch-and-sync - protoss/watch + start browsersync server


protoss/templates - compile templates

protoss/templates:build - compile templates with all optimizations

protoss/templates:watch - watch for templates sources and recompile HTML after changes

protoss/templates:w3c-test - validate compiled HTML


protoss/styles - build styles bundles

protoss/styles:build - build styles bundles with all optimizations

protoss/styles:watch - watch for styles sources and recompile css after changes

protoss/styles:lint - lint SCSS with stylelint


protoss/webpack - run webpack

protoss/webpack:build - set NODE_ENV = 'production' and run webpack

protoss/webpack:watch - run webpack with force set watch: true


protoss/images - copy images from source to destination folder

protoss/images:watch - watch for source images changes and run protoss/images task

protoss/images:optimize - optimize images

protoss/images:build - run protoss/images and then protoss/images:optimize tasks

protoss/icons - make icons sprite (svg symbols)

protoss/icons:watch - watch for icons changes and make sprite

protoss/sprites - generate png-sprites

protoss/sprites:watch - watch for changes and generate png-sprites

protoss/sprites-svg - generate svg-sprites

protoss/sprites-svg:watch - watch for changes and generate svg-sprites

protoss/favicons - generate favicons


protoss/copy - copy files from source to destination

protoss/del - delete files

protoss/serve - run browsersync



module.exports = {
  templates: {
    enabled: true,
    src: './src/templates/**/*.pug',
    dest: './build/',
    filter: function(file) {
      const path = file.path.replace(/\\/g, '/');
      const relative = file.relative.replace(/\\/g, '/');
      return !/\/_/.test(path) && !/^_/.test(relative);
    inheritance: {
      basedir: '/src/templates/',
      skip: 'node_modules',
    data: {},
    prettify: true,
    posthtml: false,
    w3c: {
      src: './build/*.html',

  styles: {
    bundles: [
        name: 'app',
        src: './src/styles/app.scss',
        dest: './build/static/css/',
        watch: [
        postcss: false,
        sourceMaps: true,
        cssnanoConfig: {
          autoprefixer: false,
          discardComments: {
            removeAll: true,
          colormin: false,
          convertValues: false,
          zindex: false,
          discardDuplicates: true,
    lint: {
      src: [
      config: {
        reporters: [
          { formatter: 'string', console: true },

  webpack: {
    enabled: true,
    src: './src/scripts/',
    dest: './build/static/js/',
    webpackConfig: fs.existsSync(webpackConfigPath) ? require(webpackConfigPath) : null,

  images: {
    enabled: true,
    src: ['./src/resources/images/**/*.{png,jpg,gif,svg}'],
    dest: './build/static/images/',
    minPath: './build/static/images/**/*.{png,jpg,gif,svg}',

  sprites: {
    enabled: true,
    src: './src/sprites/png/**/*.png',
    dest: './build/static/images/sprites/',
    retina: true,
    stylesName: '_sprites.scss',
    stylesDest: './temp/sprites/',
    template: __dirname + '/assets/sprite.mustache',
    templateData: {
      spritePath: '#{$pathToImages}sprites/',

  spritesSvg: {
    enabled: true,
    src: './src/sprites/svg/',
    dest: './build/static/images/sprites-svg/',
    stylesName: '_sprites-svg.scss',
    stylesDest: './temp/sprites/',
    template: __dirname + '/assets/sprite-svg.mustache',
    templateData: {
      spritePath: '#{$pathToImages}sprites-svg/',
    fallback: false,

  icons: {
    enabled: true,
    src: './src/icons/',
    dest: './build/static/images/icons/',

  copy: [
      src: './src/resources/fonts/**/*',
      dest: './build/fonts/',

  del: [

  favicons: {
    enabled: true,
    src: './src/resources/favicon-master.png',
    dest: './build/static/favicons/',
    config: {
      appName: 'Protoss',
      background: '#ffffff',
      path: '/static/favicons/',
      display: 'standalone',
      orientation: 'portrait',
      version: 2.0,
      logging: false,
      online: false,
      html: false,
      replace: true,
      icons: {
        favicons: true,
        android: true,
        appleIcon: true,
        windows: false,
        appleStartup: false,
        coast: false,
        firefox: false,
        opengraph: false,
        twitter: false,
        yandex: false,

  serve: {
    browsersync: {
      open: true,
      port: 9001,
      server: {
        directory: true,
        baseDir: './build/',
      files: ['./build/'],
      startPath: '/',
      reloadDelay: 300,
      reloadDebounce: 300,
      injectChanges: false,
      logConnections: true,
      debugInfo: true,
      browser: 'default',
      ghostMode: {
        clicks: false,
        forms: false,
        scroll: false,
      watchOptions: {
        ignoreInitial: true,


templates.enabled (boolean) - use templates tasks.

templates.src (string|array) - path to templates source files.

templates.dest (string) - compiled HTML destination.

templates.filter (function) - function for filter out files.

templates.inheritance (object) - configuration for gulp-pug-inheritance. (object) - data, passed to templates.

templates.prettify (boolean) - prettify final HTML (use config from .jsbeautifyrc file in project root).

templates.posthtml (boolean|object) - config for

templates.w3c.src (string|array) - path to HTML files to test validity with W3C.


styles.enabled (boolean) - use styles tasks.

styles.bundles (array) - array of bundles. (string) - name of bundle (name of final file).

styles.bundles.%bundle%.src (string|array) - path to bundle source files.

styles.bundles.%bundle%.dest (string) - destination of bundle file. (string|array) - path for watch files of this bundle. If not set src will be used.

styles.bundles.%bundle%.postcss (boolean|array) - array of PostCSS plugins. In build included: cssnano, autoprefixer and css-mqpacker.

styles.bundles.%plugin%.processor (object) - PostCSS processor.

styles.bundles.%plugin%.options (options) - options for processor.

styles.bundles.%bundle%.sourceMaps (boolean) - generate sourcemaps for this bundle.

styles.bundles.%bundle%.cssnanoConfig (object) - config for cssnano.

styles.lint.src (string|array) - path to files that will be checked by stylelint.

styles.lint.config (object) - config for gulp-stylelint.


scripts.enabled (boolean) - use scripts tasks.

scripts.webpackConfig (object|function) - webpack config.


images.enabled (boolean) - use images tasks.

images.src (string|array) - images source.

images.dest (string) - images destination.

images.minPath (string|array) - path for minifying images.


sprites.enabled (boolean) - use png sprites.

sprites.src (string) - path to source folders. Each folder - separate sprite.

sprites.dest (string) - destination for sprite.

sprites.retina (boolean) - create retina sprites (each icon need to be in to sizes: icon.png and icon@2x.png).

sprites.stylesName (string) - name of sprite styles file.

sprites.stylesDest (string) - destination of sprite styles file.

sprites.template (string) - template for styles file.

sprites.templateData (object) - data, passed to styles template.

SVG sprites

spritesSvg.enabled (boolean) - use svg sprites.

spritesSvg.src (string) - path to source folders. Each folder - separate sprite.

spritesSvg.dest (string) - destination for sprite.

spritesSvg.stylesName (string) - name of sprite styles file.

spritesSvg.stylesDest (string) - destination of sprite styles file.

spritesSvg.template (string) - template for styles file.

sprites.templateData (object) - data, passed to styles template.

spritesSvg.fallback (boolean) - create png-fallback.


icons.enabled (boolean) - use svg icons.

icons.src (string) - path to source folders. Each folder - separate icon set.

icons.dest (string) - destination for icon sets.


copy (array) - copy tasks.

copy.%tasks%.src (string) - path to source files.

copy.%tasks%.dest (string) - path to copy destination.


del (array) - array of pathes to delete.


favicons.enabled (boolean) - generate favicons.

favicons.src (string) - path to favicon source file.

favicons.dest (string) - favicons destination.

favicons.config (object) - config for Favicons.


serve.browsersync (object) - BrowserSync config.


The MIT License

Copyright (c) 2017 Andrey Hohlov

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free