Configuration

All configuration options

---

Introduction

The beauty of Eta is that it takes care of a Big Gulp amount of the Gulp setup. It has a large setup of default configuration that it uses internally to do its work. However! You have the freedom to overwrite and even extend any setting to meet your needs. Put these options inside of your package.json file.

gulpfile.js

var gulp = require('gulp');
var eta = require('gulp-eta');

eta(gulp);

package.json

{
  "name": "my-project",
  "description": "This project is so sweet",
  "eta": {
    "scaffold": {
      "assets": {
        "root": "public"
      }
    },
    "browserSync": {
      "server": false,
      "proxy": "l.my-site"
    }
  }
}

options is a dictionary. Include all your overrides in it.

Note: These options do not replace the entire default configuration object. Rather, it takes the default dictionary and deep merges it with your settings so that it continues to use the default settings that have not been added or overridden by you.

Understanding the Merge

It is important to understand what is happening when you declare custom configuration.

Object literals

Any object literal in the dictionary will be extended, meaning it will either replace a property – as long as it's not another object literal – or add the property if it doesn't exist.

To demonstrate this merge, consider a very small defaults object:

var defaults = {
  sass: {
    settings: {
      indentedSyntax: true,
      outputStyle: 'nested'
    }
  },
  autoprefixer: {
    browsers: [
      'last 2 versions',
      'safari 5',
      'ie 8',
      'ie 9',
      'android 4'
    ],
    cascade: true
  }
};

When declaring your own options:

"eta": {
  "sass": {
    "settings": {
      "indentedSyntax": false,
      "indentType": "tab"
    }
  }
}

When these are merged the configuration that Eta would use is:

{
  sass: {
    settings: {
      indentedSyntax: false, // changed
      outputStyle: 'nested', // remains default
      indentType: 'tab' // added
    }
  },
  // remains default
  autoprefixer: {
    browsers: [
      'last 2 versions',
      'safari 5',
      'ie 8',
      'ie 9',
      'android 4'
    ],
    cascade: true
  }
}

Arrays

Any array will be completely replaced with your options array.

Consider the above defaults object. When declaring the following custom options:

"eta": {
  "autoprefixer": {
    "browsers": [
      "last 2 versions",
      "safari 5",
      "ie 9",
      "android 4"
    ]
  }
}

When these are merged the configuration that Eta would use is:

{
  sass: {
    // remains default
    settings: {
      indentedSyntax: false,
      outputStyle: 'nested'
    }
  }
  // remains default
  autoprefixer: {
    // array is replaced with the custom one, not extended
    browsers: [
      'last 2 versions',
      'safari 5',
      'ie 9',
      'android 4'
    ],
    cascade: true // remains default
  }
}

---

The entire library of options

"eta": {

  "scaffold": {
    "source": {
      "root":       "_src",
      "images":     "images",
      "browserify": "js",
      "sprites":    "sprites",
      "sass":       "sass",
      "symbols":    "symbols",
      "static":     "static"
    },
    "assets": {
      "root":       "assets",
      "images":     "images",
      "browserify": "js",
      "sprites":    "images/sprites",
      "sass":       "/",
      "symbols":    "fonts/symbols",
      "static":     "/"
    }
  },

  "images": {
    "match": "**/*.+(png|jpg|jpeg|svg|gif)",
    "settings": {
      "progressive": true,
      "optimizationLevel": 4
    }
  },

  "browserify": {
    "match": "**/*.+(js|ejs)",
    "debug": false,
    "uglify": false,
    "bundles": [],
    "bundleConfig": "_src/js/config/bundles.js",
    "shim": { "jquery": "global:$" },
    "aliases": {
      "waitFor": "./_src/js/lib/waitFor.js"
    }
  },

  "sprites": {
    "match": "**/*.+(png)",
    "destSass": "_src/sass/utils",
    "settings": {
      "src": "_src/sprites",
      "retina": true,
      "dimension": [
        {
          "ratio": 1, "dpi": 35
        }, {
          "ratio": 2, "dpi": 72
        }
      ],
      "margin": 5,
      "split": true,
      "name": "sprite",
      "style": "_sprites.scss",
      "cssPath": "assets/images/sprites",
      "template": "_src/sprites/template/scss.hbs",
      "processor": "sass",
      "orientation": "binary-tree",
      "prefix": "sprite"
    }
  },

  "sass": {
    "match": "**/*.+(sass|scss)",
    "minify": false,
    "settings": {
      "indentedSyntax": true,
      "errLogToConsole": true,
      "outputStyle": "nested"
    },
    "autoprefixer": {
      "browsers": [
        "last 2 versions",
        "safari 5",
        "ie 8",
        "ie 9",
        "android 4"
      ],
      "cascade": true
    }
  },

  "symbols": {
    "match": "*.+(svg)",
    "tplCss": "_src/symbols/template/symbols.tpl.css",
    "tplSass": "_src/symbols/template/symbols.tpl.scss",
    "tplHtml": "_src/symbols/template/symbols.tpl.html",
    "fontPath": "assets/fonts/symbols/",
    "destSass": "_src/sass/utils",
    "settings": {
      "fontName": "symbols",
      "appendCodepoints": false,
      "centerHorizontally": true,
      "normalize": true,
      "fontHeight": false
    },
    "renameSass": {
      "basename": "_symbols",
      "extname": ".scss"
    }
  },

  "static": {
    "match": "**/*.+(html)",
    "extension": ".html",
    "settings": {
      "prefix": "@@",
      "basepath": "@file"
    }
  },

  "browserSync": {
    "before": ["watch"],
    "settings": {
      "server": true,
      "open": true,
      "notify": false,
      "reloadOnRestart": true,
      "files": [
        "assets/**/*.*",
        "./**/*.php",
        "./**/*.css",
        "./**/*.html",
        "!node_modules/"
      ]
    }
  },

  "uglifyJs": {
    "outputName": "",
    "settings": {}
  },

  "watch": {
    "browserify":  "browserify",
    "sass":        "sass",
    "symbols":     "symbols",
    "images":      "images",
    "sprites":     "sprites",
    "static":      "static"
  },

  "init": {
    "srcDir": "node_modules/gulp-eta/lib/_src",
    "manifestPath": "./package.json",
    "gulpfile": "./gulpfile.js",
    "dependencies": ["sassqwatch"],
    "devDependencies": ["gulp", "browserify-ejs", "browserify-shim"],
    "stuffToAppend": {
      "browser": {
        "waitFor": "./_src/js/lib/waitFor.js"
      },
      "browserify-shim": { "jquery": "global:$" }
    }
  },

  "default": {
    "tasks": ["images", "browserify", "sass", "sprites", "symbols", "static", "browserSync"]
  },

  "production": {
    "tasks": ["minifyCss", "uglifyJs"]
  }
}