statamic-camel v1.0.0-beta.17

Camel

Camel aids Statamic v2 development with a one-line Gulpfile.

Installation

1. npm i -D statamic-camel
2. Create your Gulpfile by either:

• Using the helper script automatically run after installing or
• Create gulpfile.js in your project root with this line: require('statamic-camel');.
  More info.

You shouldn't have to configure much (if anything) for Camel, because it reads as many existing settings as possible, like your Statamic settings and environment variables.

For example, Camel looks up locales:en:url in site/settings/system.yaml to configure Browsersync's proxy setting.

Most-used tasks

Compile Sass and JavaScript (including .vue files)

gulp

Watch for changes, reload, and all that good stuff Browsersync does

gulp watch

Basically runs gulp when files change.

Compile Sass

gulp sass

Compile JavaScript

gulp js

:sparkles: Moar tasks :sparkles:

Configuration

Take a look at Camel's configuration with gulp get:config. Here's an overview of the structure and how it cascades. Unnumbered items don't affect other unnumbered items, but higher-numbered items override their lower-numbered siblings.

• Camel
  1. Default
  2. Project
  3. User
• Some environment settings used in deployments
• Statamic
• Tasks
  1. Default
  2. Project
• Shortcuts

Task configs can access settings from Camel, environments, and Statamic using Statamic-like variables, e.g., {{ statamic:theming:theme }} or {env:SOME_ENV_VAR}.

So, if you have a default locale other than en, you can easily override the default proxy Camel sets for Browsersync with something like this in camel/tasks/browserSync.yaml:

proxy: '{{ statamic.system.locales.kr.url }}'

:information_source: You need to wrap the value in quotes for Camel to properly parse the variable.

Preferences

This may not be 100% true anymore. If you need this feature, :mag:/:pencil: the FR.

Use camel/preferences.yaml to override Camel and project-level settings. This is great for stubborn people whose setup is nothing like that of the rest of their team.

:warning: camel/preferences.yaml should be gitignored so you and your teammates don't wage war :boom: over annoying merge conflicts and whatnot.

API

Docs coming eventually, probably, maybe. ¯\_(ツ)_/¯

Other tasks

Display the config

gulp get:config

This shows the entire Camel config in a table in the terminal for debugging purposes.

Style guide

gulp sg

Basically the same as gulp, but opens up the URL /style-guide and compiles style-guide.js from your theme folder. (This works great with :evergreen_tree: :grinning: :evergreen_tree: :grinning: :evergreen_tree: Happy Little Trees.)

gulp sg:watch

Guess.

Pull remote data to local environment

This plays really well with Fawn, our opinionated, base Statamic installation. By default, Fawn doesn't track filesystems other than themes in git. Camel simplifies keeping all that data in sync.

gulp data:pull

You can also specify an environment to pull from like this (replace stage with the environment name):

gulp data:pull --env stage

Oh you fancy, huh?

This is for all you ES6 Babylonians out there.

require('statamic-camel');

Gross, amirite?

How's about instead we do this?

.babelrc

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"]
}

gulpfile.babel.js

import gulp, {config} from 'statamic-camel';

gulp.task('hey', () => {
  console.log('Herro?');
});