Eta-2 Actis-class interceptor, sometimes referred to as the Jedi interceptor due to its popularity with Jedi pilots, was a Clone Wars-era Republic starfighter.
Think of Eta as a set of well crafted tasks that you can add to your Gulp workflow and help speed up your development.
For 40Digits, Eta serves as our build script for internal projects. The build script took much inspiration from graypants' & Chris Davies' starter kits. It was modified to work within the needs and requirements of 40Digits development.
Eta includes the following tools, tasks, and workflows:
- Sass (libsass with source maps, and autoprefixer)
- Image optimization
- Sprite generation
- Custom Icon Font generation
- Error handling in the console and in Notification Center
- Compression task for production builds (CSS + JS)
Eta is made to work inside of any framework. Start your project however you'd like; Rails, Express, WordPress, etc.
0. Don't clone this repo!
Eta is designed to be installed through NPM - no cloning or downloading required! Just
cd into your project/theme and follow these steps: https://github.com/40Digits/gulp-eta/wiki
Eta uses the scaffold object to handle paths. Below is the default configuration. Override them to meet your needs.
assets.root are relative to directory of your
gulpfile, and all subsequent directories are respectively relative to
If you want an
asset to be in the root of your app (where your gulpfile lives) then set it to
Note: Make sure you set up your scaffold before you run
configscaffold =source:root: '_src'images: 'images'browserify: 'js'sprites: 'sprites'sass: 'sass'symbols: 'symbols'static: 'static'assets:root: 'assets'images: 'images'sprites: 'images/sprites'browserify: 'js'sass: '/'symbols: 'fonts/symbols'static: '/'
The folder stucture looks like this:
├───_src │ ├───images │ ├───js │ ├───sprites │ ├───sass │ ├───symbols │ └───static ├───assets │ ├───images │ │ └───sprites │ ├───js │ └───fonts │ └───symbols ├───gulpfile.js ├───style.css // styles go to app root by default ├───index.html // created from the static task └───node_modules
Checkout the examples for some common configurations.
If you need your assets folder to live in a
optionsscaffoldassetsroot = 'public/assets';
If you want to rename your source folder:
optionsscaffoldsourceroot = 'source';
If you want your CSS files in the assets folder:
optionsscaffoldassetssass = 'css';
Runs the specified default tasks.
configdefault =tasks: 'browserSync' 'symbols' 'sass' 'sprites' 'images' 'browserify'
_src directory, installs some starter modules. If you run this a second time it will abort if the
_src directory has already been created.
--proxy to set the name of the localhost for your project during initialization. Using the flag without any arguments will create a hostname using the name of the directory where your gulpfile is located prepended with "l.".
gulp init -p// uses l.DIRNAME
Note: Make sure your scaffold is configured before you run this.
Generates your icon font, preview file, and sass file.
optionssymbols =settings:fontName: 'symbols'appendCodepoints: falsecenterHorizontally: truenormalize: truefontHeight: falserenameSass:basename: '_symbols'extname: '.scss'
Compiles your sass files.
optionssass =// for all available options:settings:indentedSyntax: trueoutputStyle: 'nested'globbing:extensions: '.scss' '.sass';// for all available options:optionsautoprefixer =browsers:'last 2 versions''safari 5''ie 8''ie 9''android 4'cascade: true;
Moves image copies from a source folder, performs optimizations, then outputs them into the assets folder.
optionsimages =// for all available options:settings:progressive: trueoptimizationLevel: 4
Compiles sprite assets into a sprite sheet, and generates a sass file for mixins & variable use.
optionssprites =// for all available options:settings:retina: truedimension:ratio: 1 dpi: 72ratio: 2 dpi: 192margin: 0split: true // to create multiple sprites by putting images in subdirectoriesname: 'sprite' // for split. ex: sprite-main.png, sprite-blog.pngstyle: '_sprites.scss'cssPath: ptemplate: pprocessor: 'sass'orientation: 'binary-tree'prefix: 'sprite' // for sass
Compiles all of your CommonJS modules into bundles. Make sure you have configured your bundles.
optionsbrowserify =debug: false// path to the config file where you will set up your bundlesbundleConfig: '_src/js/config/bundles.js'// to set up bundles directly in your options// not recommended because using this method will not// automatically bundle when using the `watch` taskbundles:transform: 'browserify-shim' 'browserify-ejs'aliases: "waitFor": pshim: "jquery": "global:$"
Creates static HTML files from HTML partials
optionsstatic =extension: ".html"// For all available settings:settings:prefix: '@@'basepath: '@file'
Watches for changes on source files, and when a file is added, removed, or edited, it runs the necessary task.
// key: the source folder to watch for changes on// value: the task to run when a change happensconfigwatch =browserify: 'browserify'sass: 'sass'symbols: 'symbols'images: 'images'sprites: 'sprites'static: 'static';
To add a new dir to watch:
- Add it to
- Add a new glob for the files in that folder
- Add the folder in the
watchconfig along with the task you want to run when changes are made.
Starts Browser Sync and runs
watch in tandem.
configbrowserSync =before: 'watch'// See for a complete list of configuration optionssettings:server: trueopen: truenotify: falsereloadOnRestart: truefiles:pppp
Minifies your compiled stylesheets
Re-builds optimized, compressed css and js files to the assets folder, as well as output their file sizes to the console. It's a shortcut for running the following tasks: