#Gulp for Drupal

Table of Contents generated with DocToc

• Features
• Installation
• Tasks
• Configuration
  • Gulpconfig.json
  • bower.json
  • .sass-lint.yml
• Included files

---

Features

This gulp setup features a full Drupal Gulp workflow for proccesing your SCSS files, running browsersync, linting SCSS and JavaScript, optimizing images and several other tasks. This Gulp setup is made to work with Drupal (tested with Drupal 7 & 8) but can also be configured to work with any other project. The setup is fully configurable by customizing the settings in gulpconfig.json.

Installation

• Install nodejs
• Run npm install gulp-cli bower bower-installer -g in your terminal
• Move the files to your theme folder
• Run npm install
• Windows users should go to the node_modules folder and search for .info files and remove those
• Install the [Browsersync module] (https://www.drupal.org/project/browsersync) and activiate this in your theme

Tasks

Task	Function
help	Shows all available tasks
bootstrapjs	Generate bootstrap javascript file, also uglified
bower	Install JavaScript Libraries via Bower
browsersync	Run server with syncronized screens on multiple devices
check-deps	Check your dependencies
clear	Clear Gulp images Cache
colorblind	Simulate colorblindness, this overwrites your css files
images	Optimizes images (JPG, PNG, GIF and SVG)
jslint	JavaScript lint tool
jslibs	Building JavaScript Libraries, Modernizr and Bootstrap.
modernizr	Create modernizr file from SCSS selectors and Javascript
parker	Analyse your CSS files with parker
pa11y	Perform a accessibility Audit on your site
sass	Compile Sass, create sourcemaps, autoprefix and minify.
sasslint	validate your SASS Aliases
share	Run server to share progress
sizereport	Create a sizereport of your project
specificity	Create a specificity graph for CSS
watch	Watches for file changes and runs sass appropriately.

Configuration

The gulp setup is made to be fully configurable by changing the settings in gulpconfig.json. If you change settings while running a task (eg. gulp watch), make sure you restart the task for the changes to work.

Gulpconfig.json

	Setting	Explanation
General
	projectpath	Project folder root
	logopath	Site logo - optional
	themeroot	Root of the Drupal theme relative to your Gulpfile
locations
src	scsspath	Location of your SCSS files
src	jspath	Location of your JavaScript files
src	imagespath	Location of your images
src	fontspath	Location of your font files
src	iconspath	Location of your icon files
src	templatepath	Path to PHP or Twig Template
src	functionspath	Path to PHP Functions
dist	csspath	Where to put CSS
dist	jspath	Destination for JavaScript files
dist	imagespath	Where to put the images (WARNING: cannot be the same as src!!)
css
	browsersupport	Which browsers to support with autoprefixer
	minify	Want to minify your CSS?
	gzip	Compress your CSS files using Gzip.
	compass	Allow use of compass functions?
	exclude	Exclude SCSS / SASS files from stream, ATTENTION: always have "**/*" as a first item in your array
	specificitygraphlocation	Where to put Specificity Graph (if empty the folder will be: specificity-graph)
eslint	configlocation	path to your ESlint configuration file, default we supply a yml file but ESlint supports various formats
sourcemaps	sourcemaps	Want CSS sourcemaps?
sourcemaps	location	Where to put sourcemaps (keep empty to place inline)
sourcemaps	loadmaps	Load existing sourcemaps
sourcemaps	identitymap	Set to true to generate a full valid source map encoding no changes
sourcemaps	debug	Get debug messages
sourcemaps	addcomment	By default a comment containing / referencing the source map is added
sourcemaps	includecontent	By default the source maps include the source code. Pass false to use the original files.
sourcemaps	charset	Sets the charset for inline source maps. Default: utf8
sourcemaps	destpath	Set the destination path (the same you pass to gulp.dest()).
sourcemaps	sourcemappingurlprefix	Specify a prefix to be prepended onto the source map URL when writing external source maps.
linter	config	Path to sass lint config file
parker	log	Want to log the parker results in a external file
parker	logname	Name the parkerlogfile
js
	jspluginspath	Where to put libraries as Modernizr and Bootstrap
sourcemaps	sourcemaps	Generate Sourcemaps for JavaScript files (Bootstrap library)
sourcemaps	location	Where to put sourcemaps (keep empty to place inline)
sourcemaps	loadmaps	Load existing sourcemaps
sourcemaps	identitymap	Set to true to generate a full valid source map encoding no changes
sourcemaps	debug	Get debug messages
sourcemaps	addcomment	By default a comment containing / referencing the source map is added
sourcemaps	includecontent	By default the source maps include the source code. Pass false to use the original files.
sourcemaps	charset	Sets the charset for inline source maps. Default: utf8
sourcemaps	destpath	Set the destination path (the same you pass to gulp.dest()).
sourcemaps	sourcemappingurlprefix	Specify a prefix to be prepended onto the source map URL when writing external source maps.
sourcemaps	minify	Minify JavaScript, this removes comments, linebreaks and spaces
sourcemaps	gzip	Compress JavaScript using Gzip
bootstrap	alertjs, buttonjs, carouseljs, collapsejs, dropdownjs, popoverjs, scrollspyjs, tabjs, tooltipjs	True or false if you want to include these in your bootstrap.js file
modernizr	alwaysinclude	Which tests do you always want to include in modernizr (The default test are nessecary for modernizr to work correctly)
modernizr	alwaysexclude	Exclude tests from your modernizr file, useful if you use the same classes
images
gif	interlaced	Interlace gif for progressive rendering
gif	optimizationlevel	Select optimization level between 1 and 3 (3 is better optimization but slower)
jpeg	progressive	Convert image to progressive image
jpeg	max	Set max quality factor
png	floyd	controls level of dithering (0 = none, 1=full)
png	nofs	Disable Floyd-Steinberg dithering
png	quality	Set quality factor between 0 and 100, like JPEG quality settings
png	speed	Set speed between 0 and 10 (1 better optimization but slower, 10 is fastest)
png	verbose	Print verbose messages
webp	use	Enable WebP images (creates copies of your images in webp format)
webp	preset	use a webp preset (default, photo, picture, drawing, icon and text)
webp	quality	Select quality setting between 0 and 100
webp	alphaQuality	Set transparency-compression between 0 and 100
webp	method	Set speed between 0 and 6 (6 better optimization but slower, 0 is fastest)
webp	sns	Set the amplitude of spatial noise shaping between 0 and 100.
webp	lossless	Encode images losslessly.
libraries
path	js	Path where bower-installer puts your installed javascript libraries, needs to be the same as configured in your bower.json file.
bower	path	here to install bower components (default: bower_components)
bower	interactive	enable prompting from bower
bower	verbosity	set verbosity level (0 = no output, 1 = error output, 2 = info)
taskconfig
	watchtasks	Which tasks to run before gulp watch (Browsersync and SASS already included)
watch	lintscss	Lint your SCSS
watch	images	Process new or edited images
watch	javascript	Lint new or edited javascript files
browsersync
	open	Open Browsersync page after starting server
	loglevel	Amount of Browsersync logging you want (debug, info or silent)
	logfilechanges	Console notification on refresh (gives you multiple messages on every change)
watch	icons	Reload Browsersync on new,edited or removed icons
watch	fonts	Reload Browsersync on new, edited or removed fonts
watch	images	Reload Browsersync on new or edited images
watch	javascript	Reload Browsersync JavaScript changes
watch	phpfunctions	Reload Browsersync on changes inside the Functions folder
watch	template	Reload Browsersync on changes inside the Templates folder
watch	yaml	Reload Browsersync on changes to Yaml files
		Share can be used as a separate Browsersync session to share your work while working on it
share	open	Open share page after starting server
share	clicks	Sync clicks on share server
share	forms	Sync forms on share server
share	scroll	Sync Scrolling on share server
share	port	Set port number for share server
quality
maxsize	maxsize	General max size of files, used with gulp sizereport
maxsize	css	Maximum size of CSS files
maxsize	js	Maximum size of JavaScript files
maxsize	images	Maximum size of Images files
accessibility
pa11y	standard	The standard to use. One of Section508, WCAG2A, WCAG2AA, WCAG2AAA. Default WCAG2AA
pa11y	failonerror	Fail your build if there is any accessibility error
pa11y	showfailedonly	FOnly display the errors in report, Set to false to display errros, warnings and notice.
pa11y	reporter	The reporter to use with Pa11y
pa11y	htmlcs	The URL to source HTML_CodeSniffer from
pa11y	config	The path to a JSON config file or a config object
pa11y	timeout	he number of milliseconds before a timeout error occurs.

bower.json

You can configure bower via the bower.json file. Here you can change the library path, select which files you want bower-installer to use (if not the default files) and edit dependency versions. To install bower components, run bower install <package> --save and to uninstall bower uninstall <package> --save

.sass-lint.yml

The SASS / SCSS linter is configurable from a separate file, all the settings are described inside .sass-lint.yml.

Included files

• gulpfile.js
• gulpconfig.json
• package.json
• bower.json
• .npmrc
• .bowerrc
• .sass-lint.yml
• .eslintrc
• .gitignore

Created by Synetic README.md updated on 2016-09-19 version 1.8.1