-
Notifications
You must be signed in to change notification settings - Fork 3
Configuration
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.
It is important to understand what is happening when you declare custom configuration.
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
}
}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
}
}"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"]
}
}