Pete Eveleigh peteeveleigh

How to set up Gulp with an ExpressionEngine project

I freaking love working with technologies like Grunt and Gulp, and wanted to share how to get my current EE front-end workflow set up. With a few tweaks, this can also be used with virtually any other sites (I've used it with Laravel, static sites, Craft, etc).

Install Node.js

If Node is not yet installed on the machine, it will need to be installed

Install Gulp (if needed)

Tiny Content Framework

About the project

This is a tiny content strategy framework focused on goals, messages, and branding. This is not a checklist. Use what you need and scrap the rest. Rewrite it or add to it. These topics should help you get to the bottom of things with clients and other people you work with.

Give me feedback on Twitter (@nicoleslaw) or by email ([email protected]).

	{% if craft.config.get('devMode') %}
	{% set size = 30 %}
	<pre style="width:80%;margin:0 auto">
	Line Items:
	---------------------------------------------------
	{% for lineItem in cart.lineItems %}
	{{ lineItem.purchasable.title }} x {{ lineItem.qty }} {{ dump(lineItem.options) }}

	{% endfor %}

	/* The Grid ---------------------- */
	.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
	.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
	.lt-ie9 .row.large-collapse .column,
	.lt-ie9 .row.large-collapse .columns { padding: 0; }
	.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
	.lt-ie9 .row .row.large-collapse { margin: 0; }

	.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
	.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }

	#!/usr/bin/env sh

	##
	# This is script with usefull tips taken from:
	# https://github.com/mathiasbynens/dotfiles/blob/master/.osx
	#
	# install it:
	# curl -sL https://raw.github.com/gist/4016420/hack.sh \| sh
	#

	/**
	* Adds a transparent noise texture as a background image to a given element.
	* Texture strength can be controlled with @opacity parameter.
	*/
	.noise (@opacity: .3) {
	&:before {
	bottom: 0;
	content: "";
	left: 0;
	opacity: @opacity;

	{if logged_in_group_id != 1}{redirect='404'}{/if}
	<html>
	<head>
	<link href="{path=css/_ee_saef_css}" type="text/css" rel="stylesheet" media="screen" />
	<style type="text/css">
	.error { color: red; }
	</style>
	</head>
	<body>
	{exp:safecracker channel="{segment_3}" return="site/safecracker/{segment_3}/ENTRY_ID" entry_id="{segment_4}"}