In the next sections we’ll go through a gulpfile I use to work with my athena-shell project.
The directory structure for the project is like this:
. ├── app │ ├── bower_components │ ├── coffee │ ├── css │ ├── elements │ ├── es6 │ ├── images │ ├── js │ ├── scss │ └── styles ├── bower_components ├── dist └── node_modules
app directory is our source, as you can see it has more directories than those in the
jshint to validate our code, including the gulpfile.
The require statements load the corresponding plugin to be used in the gulpfile. Please make sure that you install the plugin before running the gulpfile.
**NOTE: We don’t require all the packages we use although perhaps we should do so. Instead we use
$) to load the plugins as we need them. Whenever you see this construct:
$.plugin-nameit means that we’re loading the plugin dynamically.
When running Page Speed insights you should register a key as indicated in the Page Speed insightss Getting Started Guide. Once you get they key uncomment the key variable and enter the string as the value
//var key = ''; var site = 'https://caraya.github.io/athena-template/';
Autoprefixer need to know what browsers to write prefixes for. The variable below list all the browsers and versions that we’ll auto prefix for. We can change the versions of specific browsers to prefix for and let the tool and caniuse.com deal with the actual task.
var AUTOPREFIXER_BROWSERS = [ 'ie >= 10', 'ie_mob >= 10', 'ff >= 30', 'chrome >= 34', 'safari >= 7', 'opera >= 23', 'ios >= 7', 'android >= 4.4', 'bb >= 10' ];