Moelleux

The code in this project is to be used as the base for a client based e-mail framework project. The purpose of this project is that we reach a singular workflow for our e-mail templates.

Getting started

First install Moelleux

curl -o /usr/local/bin/moelleux https://raw.githubusercontent.com/Prophets/moelleux/master/bash/moelleux && chmod 755 /usr/local/bin/moelleux

Create a new project with:

moelleux project-folder-name

Or you can run Moelleux within an empty directory

mkdir project-folder-name
cd project-folder-name
moelleux

Or use -n flag to disable git initialisation

moelleux  -n project-folder-name

Moelleux clones from the master branch by default but it is possible to use another branch

moelleux  -b 13-prefix-commit-messages-with-branch-name project-folder-name

Features	Tools Used
MJML	Responsive email framework (https://github.com/mjmlio/mjml)
CSS	Sass (Libsass via node-sass), Autoprefixer, Source Maps
HTML	Nunjucks, gulp-data
Images	Compression with imagemin
Live Updating	BrowserSync, Webpack Dev Middleware, Webpack Hot Middleware
Production Builds	JS and CSS are uglified and minified, filename md5 hashing (reving), file size reporting

Usage

Make sure Node is installed. We recommend using NVM to manage versions.

This has been tested on Node v8.12.0, and should work on newer versions as well. File an issue if it doesn't!

Install Dependencies

yarn

Run development tasks:

yarn run start

Alias: yarn start

This is where the magic happens. The perfect front-end workflow. This runs the default gulp task, which starts compiling, watching, and live updating all our files as we change them. BrowserSync will start a server on port 3000, or do whatever you've configured it to do. You'll be able to see live changes in all connected browsers. Don't forget about the additional BrowserSync tools available on port 3001!

Why run this as an npm script? NPM scripts add ./node_modules/bin to the path when run, using the packages version installed with this project, rather than a globally installed ones. Never npm install -g and get into mis-matched version issues again. These scripts are defined in the scripts property of package.json.

To run any other existing task, simply add the task name after the yarn run start command. Example:

yarn run start eslint

Build production files:

yarn run build

This will compile revisioned and compressed files to ./build. This will also upload all assets (images) to a destination on the cdn defined in the env file.

Upload assets to CDN

yarn run upload

This will upload all assets (image and css files) to the destination on the cdn as defined in your env file. This way emails can be tested in your prefered email testing tool.

Configuration

Directory and top level settings are convienently exposed in gulpfile.js/config.json. Use this file to update paths to match the directory structure of your project, and to adjust task options.

All task configuration objects have src and dest directories specfied. These are relative to root.src and root.dest respectively. Each configuration also has an extensions array. This is used for file watching, and file deleting/replacing.

If there is a feature you do not wish to use on your project, simply delete the configuration, and the task will be skipped.

Not all configuration is exposed here. For advanced task configuration, you can always edit the tasks themselves in gulpfile.js/tasks.

Asset Details

A README.md with details about each asset type are available in their respective folders in the src directory:

This will compile revisioned and compressed files to ./build.

Helpful tools

Sublime packages

Editor Config

EditorConfig helps developers maintain consistent coding styles between different editors

Install the sublime package so Sublime Text uses the settings in .editorconfig

Sublime Linter

To have ESLint and Stylelint warning- and error output in Sublime Text, use the awesome Sublime Linter

Nunjucks syntax definitions

Nunjucks syntax for Sublime Text will make sure you have the right syntax highlighting

There's a small issue though: the package doesn't place the .tmlanguage in the correct folder The fix is simple enough though:

cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages
mkdir "Nunjucks Syntax" && cd Nunjucks\ Syntax/
paste this file there
open a .njk file (for example: src/templates/index.njk), and choose "open all with current extension as" > "Nunjucks" from the syntax menu in the bottom right corner of Sublime Text

Useful Sublime Text settings

Add these to your settings, for a nicer overall Sublime Text experience. Also contains some useful defaults that are enforced when linting.

{
    "binary_file_patterns":
    [
        "node_modules/**",
        "vendor/**",
        "build/**",
        "*.jpg",
        "*.jpeg",
        "*.png",
        "*.gif",
        "*.ttf",
        "*.tga",
        "*.dds",
        "*.ico",
        "*.eot",
        "*.pdf",
        "*.swf",
        "*.jar",
        "*.zip"
    ],
    "file_exclude_patterns":
    [
        ".DS_Store",
        "Desktop.ini",
        "*.pyc",
        "._*",
        "Thumbs.db",
        ".Spotlight-V100",
        ".Trashes",
        "*.sublime-workspace",
        ".zfproject.xml",
        "composer.lock",
        "zend_cache--*"
    ],
    "folder_exclude_patterns":
    [
        ".sass-cache",
        ".git",
        "nbproject",
        ".svn",
        ".hg",
        "CVS",
        ".bin"
    ],
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "hot_exit": false,
    "ignored_packages":
    [
        "Vintage"
    ],
    "indent_guide_options":
    [
        "draw_normal",
        "draw_active"
    ],
    "match_brackets": true,
    "match_brackets_angle": true,
    "shift_tab_unindent": true,
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "word_wrap": true,
    "ensure_newline_at_eof_on_save": true
}