Gulp workflow for Drupal 8 theme. Includes csscomb for Drupal CSS Code Standards and Sass Lint

.csscomb.json

{
  "exclude": [
    ".git/**",
    "misc/**",
    "modules/**",
    "profiles/**",
    "themes/**",
    "node_modules/**",
    "bower_components/**"
  ],
  "verbose": true,
  "always-semicolon": true,
  "block-indent": 2,
  "color-case": "lower",
  "color-shorthand": true,
  "element-case": "lower",
  "eof-newline": true,
  "leading-zero": true,
  "quotes": "double",
  "remove-empty-rulesets": true,
  "rule-delimiter": "\n",
  "sort-order-fallback": "abc",
  "space-after-colon": " ",
  "space-after-combinator": " ",
  "space-after-opening-brace": "\n",
  "space-after-selector-delimiter": "\n",
  "space-before-closing-brace": "\n",
  "space-before-colon": "",
  "space-before-combinator": " ",
  "space-before-opening-brace": " ",
  "space-before-selector-delimiter": "",
  "space-between-declarations": "\n",
  "strip-spaces": true,
  "tab-size": 2,
  "unitless-zero": true,
  "vendor-prefix-align": true,
  "sort-order": [
    [
      "$variable",
      "position",
      "z-index",
      "top",
      "right",
      "bottom",
      "left",

      "display",
      "visibility",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "-ms-overflow-x",
      "-ms-overflow-y",
      "-webkit-overflow-scrolling",
      "clip",
      "zoom",
      "flex-direction",
      "flex-order",
      "flex-pack",
      "flex-align",

      "-webkit-box-sizing",
      "-moz-box-sizing",
      "box-sizing",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",

      "table-layout",
      "empty-cells",
      "caption-side",
      "border-spacing",
      "border-collapse",
      "list-style",
      "list-style-position",
      "list-style-type",
      "list-style-image",

      "content",
      "quotes",
      "counter-reset",
      "counter-increment",
      "resize",
      "cursor",
      "-webkit-user-select",
      "-moz-user-select",
      "-ms-user-select",
      "user-select",
      "nav-index",
      "nav-up",
      "nav-right",
      "nav-down",
      "nav-left",
      "-webkit-transition",
      "-moz-transition",
      "-ms-transition",
      "-o-transition",
      "transition",
      "-webkit-transition-delay",
      "-moz-transition-delay",
      "-ms-transition-delay",
      "-o-transition-delay",
      "transition-delay",
      "-webkit-transition-timing-function",
      "-moz-transition-timing-function",
      "-ms-transition-timing-function",
      "-o-transition-timing-function",
      "transition-timing-function",
      "-webkit-transition-duration",
      "-moz-transition-duration",
      "-ms-transition-duration",
      "-o-transition-duration",
      "transition-duration",
      "-webkit-transition-property",
      "-moz-transition-property",
      "-ms-transition-property",
      "-o-transition-property",
      "transition-property",
      "-webkit-transform",
      "-moz-transform",
      "-ms-transform",
      "-o-transform",
      "transform",
      "-webkit-transform-origin",
      "-moz-transform-origin",
      "-ms-transform-origin",
      "-o-transform-origin",
      "transform-origin",
      "-webkit-animation",
      "-moz-animation",
      "-ms-animation",
      "-o-animation",
      "animation",
      "-webkit-animation-name",
      "-moz-animation-name",
      "-ms-animation-name",
      "-o-animation-name",
      "animation-name",
      "-webkit-animation-duration",
      "-moz-animation-duration",
      "-ms-animation-duration",
      "-o-animation-duration",
      "animation-duration",
      "-webkit-animation-play-state",
      "-moz-animation-play-state",
      "-ms-animation-play-state",
      "-o-animation-play-state",
      "animation-play-state",
      "-webkit-animation-timing-function",
      "-moz-animation-timing-function",
      "-ms-animation-timing-function",
      "-o-animation-timing-function",
      "animation-timing-function",
      "-webkit-animation-delay",
      "-moz-animation-delay",
      "-ms-animation-delay",
      "-o-animation-delay",
      "animation-delay",
      "-webkit-animation-iteration-count",
      "-moz-animation-iteration-count",
      "-ms-animation-iteration-count",
      "-o-animation-iteration-count",
      "animation-iteration-count",
      "-webkit-animation-direction",
      "-moz-animation-direction",
      "-ms-animation-direction",
      "-o-animation-direction",
      "animation-direction",
      "text-align",
      "-webkit-text-align-last",
      "-moz-text-align-last",
      "-ms-text-align-last",
      "text-align-last",
      "vertical-align",
      "white-space",
      "text-decoration",
      "text-emphasis",
      "text-emphasis-color",
      "text-emphasis-style",
      "text-emphasis-position",
      "text-indent",
      "-ms-text-justify",
      "text-justify",
      "text-transform",
      "letter-spacing",
      "word-spacing",
      "-ms-writing-mode",
      "text-outline",
      "text-transform",
      "text-wrap",
      "text-overflow",
      "-ms-text-overflow",
      "text-overflow-ellipsis",
      "text-overflow-mode",
      "-ms-word-wrap",
      "word-wrap",
      "word-break",
      "-ms-word-break",
      "-moz-tab-size",
      "-o-tab-size",
      "tab-size",
      "-webkit-hyphens",
      "-moz-hyphens",
      "hyphens",
      "pointer-events",

      "opacity",
      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
      "-ms-interpolation-mode",
      "color",
      "border",
      "border-collapse",
      "border-width",
      "border-style",
      "border-color",
      "border-top",
      "border-top-width",
      "border-top-style",
      "border-top-color",
      "border-right",
      "border-right-width",
      "border-right-style",
      "border-right-color",
      "border-bottom",
      "border-bottom-width",
      "border-bottom-style",
      "border-bottom-color",
      "border-left",
      "border-left-width",
      "border-left-style",
      "border-left-color",
      "-webkit-border-radius",
      "-moz-border-radius",
      "border-radius",
      "-webkit-border-top-left-radius",
      "-moz-border-radius-topleft",
      "border-top-left-radius",
      "-webkit-border-top-right-radius",
      "-moz-border-radius-topright",
      "border-top-right-radius",
      "-webkit-border-bottom-right-radius",
      "-moz-border-radius-bottomright",
      "border-bottom-right-radius",
      "-webkit-border-bottom-left-radius",
      "-moz-border-radius-bottomleft",
      "border-bottom-left-radius",
      "-webkit-border-image",
      "-moz-border-image",
      "-o-border-image",
      "border-image",
      "-webkit-border-image-source",
      "-moz-border-image-source",
      "-o-border-image-source",
      "border-image-source",
      "-webkit-border-image-slice",
      "-moz-border-image-slice",
      "-o-border-image-slice",
      "border-image-slice",
      "-webkit-border-image-width",
      "-moz-border-image-width",
      "-o-border-image-width",
      "border-image-width",
      "-webkit-border-image-outset",
      "-moz-border-image-outset",
      "-o-border-image-outset",
      "border-image-outset",
      "-webkit-border-image-repeat",
      "-moz-border-image-repeat",
      "-o-border-image-repeat",
      "border-image-repeat",
      "outline",
      "outline-width",
      "outline-style",
      "outline-color",
      "outline-offset",
      "background",
      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
      "background-color",
      "background-image",
      "background-repeat",
      "background-attachment",
      "background-position",
      "background-position-x",
      "-ms-background-position-x",
      "background-position-y",
      "-ms-background-position-y",
      "-webkit-background-clip",
      "-moz-background-clip",
      "background-clip",
      "background-origin",
      "-webkit-background-size",
      "-moz-background-size",
      "-o-background-size",
      "background-size",
      "box-decoration-break",
      "-webkit-box-shadow",
      "-moz-box-shadow",
      "box-shadow",
      "filter:progid:DXImageTransform.Microsoft.gradient",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
      "text-shadow",

      "font",
      "font-family",
      "font-size",
      "font-weight",
      "font-style",
      "font-variant",
      "font-size-adjust",
      "font-stretch",
      "font-effect",
      "font-emphasize",
      "font-emphasize-position",
      "font-emphasize-style",
      "font-smooth",
      "line-height"
    ]
  ]
 }

.sass-lint.yml

# sass-lint config generated by make-sass-lint-config v0.0.2
# See:
# http://sasstools.github.io/make-sass-lint-config/
#
# The following scss-lint Linters are not yet supported by sass-lint:
# CapitalizationInSelector, IdWithExtraneousSelector, SelectorDepth, SelectorFormat
# TrailingSemicolonAfterPropertyValue, UnnecessaryMantissa, Compass::*
#
# The following settings/values are unsupported by sass-lint:
# Linter SpaceBeforeBrace, option "allow_single_line_padding"

files:
  include: '**/*.s+(a|c)ss'
options:
  formatter: stylish
  merge-default-rules: false
rules:
  border-zero: 1
  empty-line-between-blocks:
    - 1
    - ignore-single-line-rulesets: true
  extends-before-declarations: 0
  extends-before-mixins: 0
  final-newline:
    - 1
    - include: true
  force-attribute-nesting: 1
  force-element-nesting: 0
  force-pseudo-nesting: 0
  function-name-format:
    - 1
    - allow-leading-underscore: true
      convention: hyphenatedlowercase
  hex-length:
    - 1
    - style: short
  hex-notation:
    - 1
    - style: lowercase
  indentation:
    - 1
    - width: 2
  leading-zero:
    - 1
    - include: true
  mixin-name-format:
    - 1
    - allow-leading-underscore: true
      convention: hyphenatedlowercase
  mixins-before-declarations: 0
  no-color-keywords: 1
  no-css-comments: 0
  no-debug: 1
  no-duplicate-properties: 1
  no-empty-rulesets: 0
  no-invalid-hex: 1
  no-mergeable-selectors: 1
  no-misspelled-properties:
    - 1
    - extra-properties: []
  no-url-protocols: 1
  placeholder-in-extend: 1
  placeholder-name-format:
    - 1
    - allow-leading-underscore: true
      convention: hyphenatedlowercase
  property-sort-order:
    - 1
    - order:
      - $variable
      - position
      - z-index
      - top
      - right
      - bottom
      - left
      - display
      - visibility
      - float
      - clear
      - overflow
      - overflow-x
      - overflow-y
      - -ms-overflow-x
      - -ms-overflow-y
      - -webkit-overflow-scrolling
      - clip
      - zoom
      - flex-direction
      - flex-order
      - flex-pack
      - flex-align
      - -webkit-box-sizing
      - -moz-box-sizing
      - box-sizing
      - width
      - min-width
      - max-width
      - height
      - min-height
      - max-height
      - margin
      - margin-top
      - margin-right
      - margin-bottom
      - margin-left
      - padding
      - padding-top
      - padding-right
      - padding-bottom
      - padding-left
      - table-layout
      - empty-cells
      - caption-side
      - border-spacing
      - border-collapse
      - list-style
      - list-style-position
      - list-style-type
      - list-style-image
      - content
      - quotes
      - counter-reset
      - counter-increment
      - resize
      - cursor
      - -webkit-user-select
      - -moz-user-select
      - -ms-user-select
      - user-select
      - nav-index
      - nav-up
      - nav-right
      - nav-down
      - nav-left
      - -webkit-transition
      - -moz-transition
      - -ms-transition
      - -o-transition
      - transition
      - -webkit-transition-delay
      - -moz-transition-delay
      - -ms-transition-delay
      - -o-transition-delay
      - transition-delay
      - -webkit-transition-timing-function
      - -moz-transition-timing-function
      - -ms-transition-timing-function
      - -o-transition-timing-function
      - transition-timing-function
      - -webkit-transition-duration
      - -moz-transition-duration
      - -ms-transition-duration
      - -o-transition-duration
      - transition-duration
      - -webkit-transition-property
      - -moz-transition-property
      - -ms-transition-property
      - -o-transition-property
      - transition-property
      - -webkit-transform
      - -moz-transform
      - -ms-transform
      - -o-transform
      - transform
      - -webkit-transform-origin
      - -moz-transform-origin
      - -ms-transform-origin
      - -o-transform-origin
      - transform-origin
      - -webkit-animation
      - -moz-animation
      - -ms-animation
      - -o-animation
      - animation
      - -webkit-animation-name
      - -moz-animation-name
      - -ms-animation-name
      - -o-animation-name
      - animation-name
      - -webkit-animation-duration
      - -moz-animation-duration
      - -ms-animation-duration
      - -o-animation-duration
      - animation-duration
      - -webkit-animation-play-state
      - -moz-animation-play-state
      - -ms-animation-play-state
      - -o-animation-play-state
      - animation-play-state
      - -webkit-animation-timing-function
      - -moz-animation-timing-function
      - -ms-animation-timing-function
      - -o-animation-timing-function
      - animation-timing-function
      - -webkit-animation-delay
      - -moz-animation-delay
      - -ms-animation-delay
      - -o-animation-delay
      - animation-delay
      - -webkit-animation-iteration-count
      - -moz-animation-iteration-count
      - -ms-animation-iteration-count
      - -o-animation-iteration-count
      - animation-iteration-count
      - -webkit-animation-direction
      - -moz-animation-direction
      - -ms-animation-direction
      - -o-animation-direction
      - animation-direction
      - text-align
      - -webkit-text-align-last
      - -moz-text-align-last
      - -ms-text-align-last
      - text-align-last
      - vertical-align
      - white-space
      - text-decoration
      - text-emphasis
      - text-emphasis-color
      - text-emphasis-style
      - text-emphasis-position
      - text-indent
      - -ms-text-justify
      - text-justify
      - text-transform
      - letter-spacing
      - word-spacing
      - -ms-writing-mode
      - text-outline
      - text-transform
      - text-wrap
      - text-overflow
      - -ms-text-overflow
      - text-overflow-ellipsis
      - text-overflow-mode
      - -ms-word-wrap
      - word-wrap
      - word-break
      - -ms-word-break
      - -moz-tab-size
      - -o-tab-size
      - tab-size
      - -webkit-hyphens
      - -moz-hyphens
      - hyphens
      - pointer-events
      - opacity
      - filter:progid:DXImageTransform.Microsoft.Alpha(Opacity
      - -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha
      - -ms-interpolation-mode
      - color
      - border
      - border-collapse
      - border-width
      - border-style
      - border-color
      - border-top
      - border-top-width
      - border-top-style
      - border-top-color
      - border-right
      - border-right-width
      - border-right-style
      - border-right-color
      - border-bottom
      - border-bottom-width
      - border-bottom-style
      - border-bottom-color
      - border-left
      - border-left-width
      - border-left-style
      - border-left-color
      - -webkit-border-radius
      - -moz-border-radius
      - border-radius
      - -webkit-border-top-left-radius
      - -moz-border-radius-topleft
      - border-top-left-radius
      - -webkit-border-top-right-radius
      - -moz-border-radius-topright
      - border-top-right-radius
      - -webkit-border-bottom-right-radius
      - -moz-border-radius-bottomright
      - border-bottom-right-radius
      - -webkit-border-bottom-left-radius
      - -moz-border-radius-bottomleft
      - border-bottom-left-radius
      - -webkit-border-image
      - -moz-border-image
      - -o-border-image
      - border-image
      - -webkit-border-image-source
      - -moz-border-image-source
      - -o-border-image-source
      - border-image-source
      - -webkit-border-image-slice
      - -moz-border-image-slice
      - -o-border-image-slice
      - border-image-slice
      - -webkit-border-image-width
      - -moz-border-image-width
      - -o-border-image-width
      - border-image-width
      - -webkit-border-image-outset
      - -moz-border-image-outset
      - -o-border-image-outset
      - border-image-outset
      - -webkit-border-image-repeat
      - -moz-border-image-repeat
      - -o-border-image-repeat
      - border-image-repeat
      - outline
      - outline-width
      - outline-style
      - outline-color
      - outline-offset
      - background
      - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
      - background-color
      - background-image
      - background-repeat
      - background-attachment
      - background-position
      - background-position-x
      - -ms-background-position-x
      - background-position-y
      - -ms-background-position-y
      - -webkit-background-clip
      - -moz-background-clip
      - background-clip
      - background-origin
      - -webkit-background-size
      - -moz-background-size
      - -o-background-size
      - background-size
      - box-decoration-break
      - -webkit-box-shadow
      - -moz-box-shadow
      - box-shadow
      - filter:progid:DXImageTransform.Microsoft.gradient
      - -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient
      - text-shadow
      - font
      - font-family
      - font-size
      - font-weight
      - font-style
      - font-variant
      - font-size-adjust
      - font-stretch
      - font-effect
      - font-emphasize
      - font-emphasize-position
      - font-emphasize-style
      - font-smooth
      - line-height
  quotes:
    - 1
    - style: double
  shorthand-values: 1
  single-line-per-selector: 1
  space-after-colon: 1
  space-after-comma: 1
  space-before-brace: 1
  space-before-colon: 1
  space-between-parens:
    - 1
    - include: false
  url-quotes: 0
  variable-name-format:
    - 1
    - allow-leading-underscore: true
      convention: hyphenatedlowercase
  zero-unit: 1

gulpfile.js

var gulp = require('gulp');
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cleancss = require('gulp-clean-css'),
    notify = require('gulp-notify'),
    spritesmith = require('gulp.spritesmith'),
    browserSync = require('browser-sync').create();
    sassGlob = require('gulp-sass-bulk-import');
    csscomb = require('gulp-csscomb');
    sassLint = require('gulp-sass-lint');

var config = require('./gulpfile-config.json');

// Error notifications.
var reportError = function (error) {
  notify({
    title: 'Gulp Task Error',
    message: 'Check the console.'
  }).write(error);
  // print the error in terminal.
  console.log(error.toString());
  this.emit('end');
};

gulp.task('styles', function() {
  return gulp.src('./sass/**/*.scss')
    .pipe(sassGlob())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({browsers: ['last 2 versions', 'ie 9']}))
    .pipe(gulp.dest('css'));
});

gulp.task('styles:dev', function() {
  return gulp.src('sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sassGlob())
    .pipe(sass().on('error', reportError))
    .pipe(autoprefixer({browsers: ['last 2 versions', 'ie 9']}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(browserSync.stream());
});

gulp.task('lint', function() {
  return gulp.src('sass/**/*.s+(a|c)ss')
    .pipe(sassLint({
      options: {
        formatter: 'table'
      },
      configFile: '.sass-lint.yml'
    }))
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError());
})

gulp.task('comb', function() {
  return gulp.src(['sass/**/*.scss'], {base: './'})
    .pipe(csscomb())
    .pipe(gulp.dest('./'));
})

gulp.task('sprite', function () {
  var spriteData = gulp.src('images/sprites/*.png')
    .pipe(spritesmith({
      /* this whole image path is used in css background declarations */
      imgName: '../images/sprites/sprite/sprite.png',
      cssName: '_sprites.scss'
    }));
  spriteData.img.pipe(gulp.dest('img'));
  spriteData.css.pipe(gulp.dest('sass'));
});

gulp.task('watch', function() {
  // Set your localhost address
  browserSync.init({
    proxy: config.browserSync.proxy
  });
  // Watch .scss files
  gulp.watch(['images/sprites/*.png'], ['sprite']);
  gulp.watch(["sass/**/*.scss", "sprites.scss", 'images/**/*'], ['styles:dev']);
  gulp.watch(["js/**/*.js", 'templates/**/*.html.twig']).on('change', browserSync.reload);
  //gulp.watch(["sass/**/*.scss", "js/**/*.js", 'templates/**/*.html.twig']).on('change', browserSync.reload);

});

gulp.task("default", ["watch"]);

package.json

{
  "author": "",
  "name": "",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "breakpoint-sass": "^2.7.0",
    "browser-sync": "^2.11.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-cache": "^0.4.3",
    "gulp-clean-css": "^2.0.4",
    "gulp-csscomb": "^3.0.7",
    "gulp-notify": "^2.2.0",
    "gulp-sass": "^2.2.0",
    "gulp-sass-lint": "^1.2.0",
    "gulp-sass-bulk-import": "^1.0.1",
    "gulp-sourcemaps": "^1.3.0",
    "gulp.spritesmith": "^3.1.0",
    "node-sass": "^3.2.0",
    "postcss-cli": "^2.5.1",
    "susy": "^2.2.12"
  },
  "scripts": {}
}