Created
January 19, 2017 15:51
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
] | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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