@dameblanche/task-eslint v0.0.1-alpha.6

Dameblanche

The code in this project is to be used as the base for "every" project.

The purpose of this project is that we reach a singular workflow for our FE projects.

Getting started

First install dameblanche

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

Create a new project with:

dameblanche project-folder-name

Or you can run dameblanche within an empty directory

mkdir project-folder-name
cd project-folder-name
dameblanche

Or use -n flag to disable git initialisation

dameblanche  -n project-folder-name

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

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

Usage

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

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

Install Dependencies

npm ci

Run development tasks:

npm run 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 npm run start command. Example:

npm run start eslint

Build production files:

npm run build

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

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.

Clean configuration

By default, the entire dest directory is deleted before each build. By setting the clean.patterns option in config.js, you can specify (using globbing syntax) patterns that should be deleted instead. Use this if you have subdirectories or files within the dest directory that should be left alone (media uploaded through a CMS, say).

'clean': {
    'patterns': [
        './public/css',
        './public/images',
        './public/js',
        './public/rev-manifest.json'
    ]
}

Asset Details

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

• JavaScript
• Stylesheets
• HTML
• Images
• SVG Sprite
• Static Files (favicons, app icons, etc.)

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

• Install the SublimeLinter framework
• Install the SublimeLinter-eslint
• Install the SublimeLinter-stylelint

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/**",
        "*.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
}