# @zivtech/starterlight-tasks

> Build tasks tailored for Zivtech's Starterlight base theme.

Latest version **0.2.2** (published 2020-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zivtech/starterlight-tasks
pnpm add @zivtech/starterlight-tasks
yarn add @zivtech/starterlight-tasks
bun add @zivtech/starterlight-tasks
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2020-08-24 |
| First published | 2019-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 21 |
| Unpacked size | 14.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | John Kaeser |
| Maintainers | jkaeser |

## Links

- npm: https://www.npmjs.com/package/@zivtech/starterlight-tasks
- Repository: https://github.com/zivtech/starterlight-tasks
- Issues: https://github.com/zivtech/starterlight-tasks/issues
- npm.io page: https://npm.io/package/@zivtech/starterlight-tasks

## Dependencies (21)

- [gulp](https://npm.io/package/gulp.md) ^4.0.2
- [eslint](https://npm.io/package/eslint.md) ^5.16.0
- [cssnano](https://npm.io/package/cssnano.md) ^4.1.10
- [favicons](https://npm.io/package/favicons.md) ^6.2.0
- [prettier](https://npm.io/package/prettier.md) ^1.19.1
- [gulp-sass](https://npm.io/package/gulp-sass.md) ^4.1.0
- [gulp-eslint](https://npm.io/package/gulp-eslint.md) ^5.0.0
- [gulp-inject](https://npm.io/package/gulp-inject.md) ^5.0.5
- [browser-sync](https://npm.io/package/browser-sync.md) ^2.26.12
- [gulp-postcss](https://npm.io/package/gulp-postcss.md) ^8.0.0
- [gulp-sass-glob](https://npm.io/package/gulp-sass-glob.md) ^1.1.0
- [gulp-sass-lint](https://npm.io/package/gulp-sass-lint.md) ^1.4.0
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^6.7.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.20.6
- [eslint-config-airbnb](https://npm.io/package/eslint-config-airbnb.md) ^17.1.0
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.22.0
- [cssnano-preset-default](https://npm.io/package/cssnano-preset-default.md) ^4.0.7
- [eslint-config-prettier](https://npm.io/package/eslint-config-prettier.md) ^4.2.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.3.1
- [eslint-plugin-prettier](https://npm.io/package/eslint-plugin-prettier.md) ^3.1.4
- [postcss-sort-media-queries](https://npm.io/package/postcss-sort-media-queries.md) ^1.7.26

## Recent versions

- 0.2.2 (latest) — 2020-08-24
- 0.2.1 — 2020-02-05
- 0.2.0 — 2020-02-05
- 0.1.6 — 2019-10-31
- 0.1.5 — 2019-08-20
- 0.1.4 — 2019-08-16
- 0.1.3 — 2019-05-21
- 0.1.2 — 2019-05-21
- 0.1.1 — 2019-05-21
- 0.1.0 — 2019-05-21

## README

# Starterlight Tasks

- [Usage](#usage)
- [Options](#options)
- [Boilerplate Config Object](#boilerplate-config-object)

## Usage

1. Set a global configuration object:
    ```
    global.SLoptions = { /* options */ };
    ```
2. Load the gulp tasks:
    ```
    const { tasks } = = require('@zivtech/starterlight-tasks');

    for(let task in tasks) {
      exports[task] = tasks[task];
    }
    ```

## Options

**sourcemaps** (bool)

Turn Sass sourcemaps on or off.

**sass** (obj)

- **paths** (obj)
  - **src**: A glob of Sass files to be compiled into CSS.
  - **dest**: The directory the compiled CSS file will be placed in.
- **config**: An object of [node-sass configuration options](https://github.com/sass/node-sass#options).

**js** (obj)

- **paths** (obj)
  - **src**: A glob of JS files to lint.
- **eslint**: An object of [eslint configuration options](https://eslint.org/docs/user-guide/configuring). This will typically be unused since we inherit our linting rules from Drupal core.

**sassGlob** (obj)

An object of [gulp-sass-glob configuration options](https://github.com/mikevercoelen/gulp-sass-glob).

**sassLint** (obj)

An object of [sass-lint configuration options](https://github.com/sasstools/sass-lint#configuring).

**postcss** (obj)

- **postcssPresetEnv**: An object of [postcss-preset-env configuration options](https://github.com/csstools/postcss-preset-env#options). Use this if you need to support older browsers (e.g. IE11) but want to use newer CSS specifications. See https://preset-env.cssdb.org/features for a list of features this helps support.
- **postcssSortMediaQueries**: An object of [postcss-sort-media-queries configuration options](https://www.npmjs.com/package/postcss-sort-media-queries).
- **cssnano**: An object of [cssnano configuration options](https://cssnano.co/guides/presets). We use the default preset and override a few of its optimization options.

**favicons** (obj)

- **paths** (obj)
  - **src**: The path to the image file from which the rest of the favicons will be created.
  - **dest**: The directory the generated favicons will be placed in.
  - **templateFile**: The name of the template file where favicons will be injected. This should be to `html.html.twig` unless you changed where the injection tags are located.
  - **templateDir**: The path to the directory where the `templateFile` lives.
- **config**: An object of [favicons configuration options](https://github.com/itgalaxy/favicons#usage).

**browserSync** (obj)

An object of [Browsersync configuration options](https://www.browsersync.io/docs/options).

## Boilerplate Config Object

Here are the defaults we use. You can copy this and configure to fit your needs.

### JS
```
{
  sass: {
    sourcemaps: true,
    paths: {
      src: ["./scss/**/*.scss"],
      dest: "./css/"
    },
    config: {
      outputStyle: "expanded"
    }
  },
  js: {
    paths: {
      src: ["./js/**/*.js"]
    },
    eslint: {}
  },
  sassGlob: {},
  sassLint: {
    files: {
      ignore: ["scss/00-base/settings/**/*.scss"]
    },
    rules: {
      property-sort-order: 0,
      indentation: 0,
      no-color-literals: 0,
      variable-name-format: 0,
      force-element-nesting: 0,
      no-qualifying-elements: 0,
      placeholder-in-extend: 0,
      nesting-depth: 0,
      leading-zero: 0,
      no-duplicate-properties: 0,
      no-vendor-prefixes: 0,
      force-pseudo-nesting: 0,
      pseudo-element: 0,
      no-important: 0,
      extends-before-declarations: 2,
      extends-before-mixins: 0,
      mixins-before-declarations: [
        2,
        {
          exclude: [
            "bp"
          ]
        }
      ],
      declarations-before-nesting: 2,
      class-name-format: 0,
      no-transition-all: 0,
      space-around-operator: 0,
      force-attribute-nesting: 0,
      no-ids: 0,
      no-misspelled-properties: 0
    }
  },
  postcss: {
    postcssPresetEnv: {
      autoprefixer: {},
      features: {}
    },
    postcssSortMediaQueries: {},
    cssnano: {
      preset: [
        default,
        {
          autoprefixer: {
            exclude: false
          },
          discardUnused: {
            exclude: false
          },
          mergeIdents: {
            exclude: false
          },
          reduceIdents: {
            exclude: false
          }
        }
      ]
    }
  },
  favicons: {
    paths: {
      src: "./images/favicon-source.png",
      dest: "./images/favicons/",
      templateFile: "html.html.twig",
      templateDir: "./templates/layout/"
    },
    config: {
      path: "/themes/custom/starterlight/images/favicons",
      appName: "Enter the name of the site or app here",
      appDescription: "Enter a short description of the site or app here",
      appleStatusBarStyle: "#fff",
      background: "#fff",
      theme_color: "#fff",
      display: "standalone",
      orientation: "portrait",
      start_url: "/?homescreen=1",
      version: 1.0,
      logging: false,
      html: "favicons.html",
      pipeHTML: true,
      replace: true,
      icons: {
        android: {
          offset: 10,
          background: true
        },
        appleIcon: {
          offset: 10,
          background: true
        },
        appleStartup: {
          offset: 10,
          background: true
        },
        coast: {
          offset: 10
        },
        favicons: true,
        firefox: {
          offset: 15,
          background: true,
          mask: true,
          overlayGlow: false
        },
        windows: {
          offset: 10,
          background: true
        },
        yandex: true
      }
    }
  },
  browserSync: {
    proxy: "local.dev",
    open: true
  }
}
```

### JSON
```
{
  "sass": {
    "sourcemaps": true,
    "paths": {
      "src": ["./scss/**/*.scss"],
      "dest": "./css/"
    },
    "config": {
      "outputStyle": "expanded"
    }
  },
  "js": {
    "paths": {
      "src": ["./js/**/*.js"]
    },
    "eslint": {}
  },
  "sassGlob": {},
  "sassLint": {
    "files": {
      "ignore": ["scss/00-base/settings/**/*.scss"]
    },
    "rules": {
      "property-sort-order": 0,
      "indentation": 0,
      "no-color-literals": 0,
      "variable-name-format": 0,
      "force-element-nesting": 0,
      "no-qualifying-elements": 0,
      "placeholder-in-extend": 0,
      "nesting-depth": 0,
      "leading-zero": 0,
      "no-duplicate-properties": 0,
      "no-vendor-prefixes": 0,
      "force-pseudo-nesting": 0,
      "pseudo-element": 0,
      "no-important": 0,
      "extends-before-declarations": 2,
      "extends-before-mixins": 0,
      "mixins-before-declarations": [
        2,
        {
          "exclude": [
            "bp"
          ]
        }
      ],
      "declarations-before-nesting": 2,
      "class-name-format": 0,
      "no-transition-all": 0,
      "space-around-operator": 0,
      "force-attribute-nesting": 0,
      "no-ids": 0,
      "no-misspelled-properties": 0
    }
  },
  "postcss": {
    "postcssPresetEnv": {
      "autoprefixer": {},
      "features": {}
    },
    "postcssSortMediaQueries": {},
    "cssnano": {
      "preset": [
        "default",
        {
          "autoprefixer": {
            "exclude": false
          },
          "discardUnused": {
            "exclude": false
          },
          "mergeIdents": {
            "exclude": false
          },
          "reduceIdents": {
            "exclude": false
          }
        }
      ]
    }
  },
  "favicons": {
    "paths": {
      "src": "./images/favicon-source.png",
      "dest": "./images/favicons/",
      "templateFile": "html.html.twig",
      "templateDir": "./templates/layout/"
    },
    "config": {
      "path": "/themes/custom/starterlight/images/favicons",
      "appName": "Enter the name of the site or app here",
      "appDescription": "Enter a short description of the site or app here",
      "appleStatusBarStyle": "#fff",
      "background": "#fff",
      "theme_color": "#fff",
      "display": "standalone",
      "orientation": "portrait",
      "start_url": "/?homescreen=1",
      "version": 1.0,
      "logging": false,
      "html": "favicons.html",
      "pipeHTML": true,
      "replace": true,
      "icons": {
        "android": {
          "offset": 10,
          "background": true
        },
        "appleIcon": {
          "offset": 10,
          "background": true
        },
        "appleStartup": {
          "offset": 10,
          "background": true
        },
        "coast": {
          "offset": 10
        },
        "favicons": true,
        "firefox": {
          "offset": 15,
          "background": true,
          "mask": true,
          "overlayGlow": false
        },
        "windows": {
          "offset": 10,
          "background": true
        },
        "yandex": true
      }
    }
  },
  "browserSync": {
    "proxy": "local.dev",
    "open": true
  }
}
```

---
_Source: https://npm.io/package/@zivtech/starterlight-tasks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._