Skip to content

Instantly share code, notes, and snippets.

@waako
Created January 19, 2017 15:51
Show Gist options
  • Save waako/055034a92b2e0e12201c7fa605be3f1f to your computer and use it in GitHub Desktop.
Save waako/055034a92b2e0e12201c7fa605be3f1f to your computer and use it in GitHub Desktop.
Gulp workflow for Drupal 8 theme. Includes csscomb for Drupal CSS Code Standards and Sass Lint
{
"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 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
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"]);
{
"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": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment