Tasks

Contents

• default
• init
• symbols
• sass
• images
• sprites
• browserify
• static
• watch
• browserSync
• minifyCss
• minifyJs
• production

default

gulp default

Runs the specified default tasks.

Options:

options.default = {
  tasks: ['browserSync', 'symbols', 'sass', 'sprites', 'images', 'browserify']
}

init

gulp init [-p, --proxy] [<vhost>]

Creates a _src directory, installs some starter modules. If you run this a second time it will abort if the _src directory has already been created.

Use -p or --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.".

Examples:

gulp init -p
// uses l.DIRNAME for proxy

gulp init --proxy
// uses l.DIRNAME for proxy

gulp init -p super-cool.lh
// uses super-cool.lh for proxy

gulp init --proxy awesome.local
// uses awesome.local for proxy

Note: Make sure your scaffold is configured before you run this.

symbols

gulp symbols

Generates your icon font, preview file, and sass file.

Options:

options.symbols = {
  settings: {
    fontName: 'symbols',
    appendCodepoints: false,
    centerHorizontally: true,
    normalize: true,
    fontHeight: false
  },
  renameSass: {
    basename: '_symbols',
    extname: '.scss'
  }
}

sass

gulp sass

Compiles your sass files.

Options:

options.sass = {
  // for all available options: https://github.com/sass/node-sass#options
  settings: {
    indentedSyntax: true,
    outputStyle: 'nested'
  }
};

// for all available options: https://www.npmjs.com/package/gulp-autoprefixer#api
options.autoprefixer = {
  browsers: [
    'last 2 versions',
    'safari 5',
    'ie 8',
    'ie 9',
    'android 4'
  ],
  cascade: true
};

images

gulp images

Moves image copies from a source folder, performs optimizations, then outputs them into the assets folder.

Options:

options.images = {
  // for all available options: https://www.npmjs.com/package/gulp-imagemin#api
  settings: {
    progressive: true,
    optimizationLevel: 4
  }
}

sprites

gulp sprites

Compiles sprite assets into a sprite sheet, and generates a sass file for mixins & variable use.

Options:

options.sprites = {
  // for all available options: https://www.npmjs.com/package/sprity#options
  settings: {
    retina: true,
    dimension: [
      {
        ratio: 1, dpi: 72
      }, {
        ratio: 2, dpi: 192
      }
    ],
    margin: 0,
    split: true, // to create multiple sprites by putting images in subdirectories
    name: 'sprite', // for split. ex: sprite-main.png, sprite-blog.png
    style: '_sprites.scss',
    cssPath: p.join(config.scaffold.assets.root, config.scaffold.assets.styles),
    template: p.join(config.scaffold.source.root, config.scaffold.source.sprites, '/template/scss.hbs'),
    processor: 'sass',
    orientation: 'binary-tree',
    prefix: 'sprite' // for sass
  }
}

browserify

gulp browserify

Compiles all of your CommonJS modules into bundles. Make sure you have configured your bundles.

Options:

options.browserify = {
  debug: false,
  // path to the config file where you will set up your bundles
  bundleConfig: p.join(options.source.scripts, '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` task
  bundles: [],
  transform: ['browserify-shim', 'browserify-ejs'],
  aliases: { "waitFor": p.join(source.scripts, "/lib/waitFor.js") },
  shim: { "jquery": "global:$" }
}

static

gulp static

Creates static HTML files from HTML partials

Options:

options.static = {
  extension: ".html",
  // For all available settings: https://www.npmjs.com/package/gulp-file-include
  settings: {
    prefix: '@@',
    basepath: '@file'
  }
}

watch

gulp watch

Watches for changes on source files, and when a file is added, removed, or edited, it runs the necessary task.

Options:

// key: the source folder to watch for changes on
// value: the task to run when a change happens
config.watch = {
  scripts:  'browserify',
  styles:   'sass',
  symbols:  'symbols',
  images:   'images',
  sprites:  'sprites',
  static:   'static'
};

To add a new dir to watch:

1. Add it to scaffold.source
2. Add a new glob for the files in that folder
3. Add the folder in the watch config along with the task you want to run when changes are made.

Example:

eta(gulp, {
  scaffold: {
    source: {
      custom: 'my-custom-dir'
    }
  },
  globs: {
    custom: '**/*.+(txt)'
  },
  watch: {
    custom: 'my-custom-task'
  }
});

gulp.task('my-custom-task', function() {
  console.log('this task is super awesome');
});

browserSync

gulp browserSync

Starts Browser Sync and runs watch in tandem.

Options:

config.browserSync = {
  useBrowserSync: true,
  // For all available settings: http://www.browsersync.io/docs/options/
  settings: {
    server: false,
    open: true,
    notify: false,
    reloadOnRestart: true,
    files: [
      p.join(assets.root, '**/*'),
      p.join(appDir, '**/*.php'),
    ]
  }
}

minifyCss

gulp minifyCss

Minifies your compiled stylesheets

minifyJs

gulp minifyJs

Minifies your compiled JavaScript files

production

gulp production

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: ['minifyCss', 'uglifyJs'].