Features

Under the "features" key, you can choose which settings you would like gulp to have enabled in your project.

project.config.js

module.exports = {
  gulpthemes: [...],
  features: {
    autoprefixer: {
      enable: true,
      options: {
        browsers: ['last 2 versions', 'ie 9', '> 0.2%'],
        cascade: false
      },
    },
    browserify: {
      enable: true,
      debug_mode: false,
      tinyify: {
        enable: true,
        options: {
          flat: false
        }
      }
    },
    clean_css: {
      enable: false,
    },
    css_mapping: {
      enable: false,
    },
    image_optimise: {
      enable: true,
      gifsicle: {
        interlaced: true,
        optimizationLevel: 3
      },
      optipng: {
        optimizationLevel: 5
      },
      jpegtran: {
        progressive: true
      },
      svgo: {
        plugins: [
          {
            removeViewBox: false
          },
          {
            removeDimensions: true
          }
        ]
      }
    },
    sass_includes: {
      bourbon: false,
      bourbonNeat: false,
      breakpoint: false
    },
    uglify: {
      enable: true,
      options: {
        compress: {
          unused: false
        },
        mangle: false,
      }
    },
    // Deprecated
    kss: {
      enable: false,
    },
  }
};

autoprefixer #

enable

Options: true, false

Default: false

What is it for: If you don't want to worry about vendor prefixes in your CSS, Autoprefixer does it for you. Write your SCSS without vendor prefixes and this tool will write them for you, based upon the current browser usage.

options.browsers

Options: array of strings, each string should be a valid option found in https://github.com/browserslist/browserslist#full-list

Default: ['last 2 versions', 'ie 9', '> 0.2%']

What is it for: Define which browsers you would like Autoprefixer to write CSS for.

options.cascade

Options: true or false

Default: false

What is it for: should Autoprefixer use Visual Cascade.

You can add more settings to Autoprefixer, although not tested to be compatible out of the box with Compony yet: full list of autoprefixer options.

browserify #

enable

Options: true or false

Default: true

What is it for: If you are writing JavaScript that is not supported by all browsers because it is from a newer version of JavaScript, Browserify will compile your JS to a version that has better cross-browser support.

Let's take an example, if you write something like:

require(‘my-function’);

inside a my-component.js file, quite a few browsers don’t support this feature of JS yet. Browserify will bundle that my-function nicely in to the file that is requesting it, before the JS file being generated in the dist folder.

Be aware that using require-functionality won’t work cross-component. If you are codesplitting your JavaScript, please keep that code-splitting inside 1 component. The component-system follows a Drupal logic, and is not built for JS codesplitting (yet). If you want to codesplit JS over multiple components, we recommend you use multiple libraries.yml file to load in JS in a certain order, thus avoiding require.

Babelify with the preset of env will be used.

debug_mode

Options: true or false

Default: false

What is it for: Debug the output from Browserify, by generating Sourcemaps.

tinyify.enable

Options: true or false

Default: true

What is it for: A browserify plugin that runs 7 different optimizations, resulting in lower file-size for the resulting JavaScript files.

tinyify.options

Options: object

Default: {flat: false}

What is it for: Define some options within Tinyify, the main one being the "flat" option. See all the options of Tinyify

clean_css #

enable

Options: true or false

Default: false

What is it for: Clean CSS is a npm package for fast and efficient CSS optimisation.

css_mapping #

enable

Options: true or false

Default: false

What is it for: Have CSS sourcemaps when generating CSS from SCSS.

image_optimise #

enable

Options: true or false

Default: true

What is it for: Gulp is configured to optimise any jpg, png or gif by using a lossless compression

Documentation on Compony's image optimalisation

gifsicle

Options: object

Default:

interlaced: true,
optimizationLevel: 3

What is it for: GIF image compressor.

Possible options for the GIF image compressor.

optipng

Options: object

Default:

optimizationLevel: 5

What is it for: PNG image compressor

Possible options for the PNG image compressor.

jpgtran

Options: object

Default:

progressive: true

What is it for: JPEG image compressor

Possible options for JPEG Image compressor.

svgo

Options: object

Default:

plugins: [
  {
    removeViewBox: false
  },
  {
    removeDimensions: true
  }
]

What is it for: SVG image compressor

Possible options for configuring SVGO.

sass_includes #

bourbon

Options: true or false

Default: false

What is it for: Bourbon is a library of sass mixins. The features of Bourbon

Instructions:

Go the directory where your node_modules folder is on your command line, and run npm install bourbon@5.1.0.
Set the setting in project.config.js to true,
Write @import "bourbon"; in the components you want to use Bourbon in, or write it in sass-essentials.scss so you have it available in every component.
Restart the Gulp command.

bourbonNeat

Options: true or false

Default: false

What is it for: Bourbon Neat is a fluid grid framework with the aim of being easy enough to use out of the box and flexible enough to customise down the road.

The features of Bourbon Neat

Instructions:

Go the directory where your node_modules folder is on your command line, and run npm install bourbon-neat@1.9.1.
Set the setting in project.config.js to true,
Write @import "neat"; in the components you want to use Neat in, or write it in sass-essentials.scss so you have it available in every component.
Restart the Gulp command.

breakpoint

Options: true or false

Default: false

What is it for: Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin.

More information on Breakpoint

Note: Compony recommends you to use component-specific media-queries, with component-specific variables. Which makes this plugin not needed. (Intent to deprecate in future versions of Compony)

Instructions:

Go the directory where your node_modules folder is on your command line, and run npm install breakpoint-sass@2.7.1.
Set the setting in project.config.js to true,
Write @import "breakpoint"; in the components you want to use Breakpoint in, or write it in sass-essentials.scss so you have it available in every component.
Restart the Gulp command.

uglify #

enable

Options: true or false

Default: true

What is it for: Gulp is configured to uglify your Javascript with UglifyJS3. Uglify makes a JavaScript-file smaller, but that minified version usually becomes unreadable as a result. Hence the name.

The Github page about UglifyJS 3.

options

Options: object

Default:

{
  compress: {
    unused: false
  },
  mangle: false,
}

What is it for: To finetune how you want your Uglify tool to be configured.

Possible options for Uglify.

kss (deprecated) #

Options: true or false

Default: false

What is it for: KSS is a styleguide generator.

NOTE: Compony deprecated KSS as no further development will be happening to support this in the future.