By Melissa Penta
Senior Web Developer
Working with Multiple Email Projects on One Foundation Install
Our development team here at Local Wisdom is always on the lookout for the most efficient ways to complete our everyday tasks. One of those tasks is email development. As any developer may know, when coding emails you have to take a step back in technology and code like it’s the 90’s (Hello table after nested-table!). One of the more useful frameworks we started using to simplify email development is ZURB Foundation for Emails. We use the SASS install of Foundation because it automates most of the workflow. The components work in the major email clients, it is customizable, you can use global elements, and it comes with its own templating language that makes creating nested tables much less messy.
Multiple email development projects come through our shop each month. One issue that we’ve found with the Foundation SASS install is that, by default, you must install the components with every project. Once we saw how useful Foundation can be, we wanted to simplify using it even more by finding a way to have one install run multiple projects.
By default, the folder structure of an install looks like this:
The /node_modules/ folder is the monster that contains all the dependencies for foundation and its plugins. There are over one hundred thousand files within thousands of folders nested so deep that Windows cannot exactly deal with it properly if it must be moved or deleted. It’s the only downside to using the SASS install and can potentially be a hassle.
With a few modifications, however, we have our internal projects working with a single install on each machine using the following folder structure:
To get this to work properly, we made changes to the gulpfile.babel.js that sits in the root of the install. First, we defined some variables at the top of the file:
var project = 'Email Project 1',
source = project+'/src',
distribution = project+'/dist';The project variable is the name of the folder that the project sits in (Email Project 1 & 2). This gets changed depending on the current project that we are working on. Any time it is changed, the build process will have to be restarted. The source and distribution variables define where the /src/ and /dist/ files are held.
Once the variables were defined, we replaced every instance of 'dist' with the variable distribution. In the case of our example project, this will make all distribution variables read 'Email Project 1/dist'.
Next, we replaced every instance of 'src' with the source variable – typically, these are found in the gulp.src command. For example, in the sass function gulp.src('src/assets/scss/app.scss') was replaced with gulp.src(source+'/assets/scss/app.scss').
When you run this new gulpbabel file, node will read and compile the /src/ folder that is within the project folder. The files will be compiled into the /dist/ folder that also resides in the project folder. It will not read or compile the contents of the other projects.
