# Create npms package.json
cat <<NPMFILE > package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
NPMFILE

# Create gulps gulpfile.js
cat <<GULPFILE > gulpfile.js
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var less = require('gulp-less');
var concat = require('gulp-concat');
var postcss = require('gulp-postcss');
var postcssImport = require('postcss-import');

gulp.task('default', ['css','concat']);
gulp.task('css', () => gulp.src(["less/*.less"], { base: 'less' }).pipe(sourcemaps.init()).pipe(less()).pipe(sourcemaps.write('./', {includeContent: false, sourceRoot: '../less'})).pipe(gulp.dest('css')));
gulp.task(
	'concat',
	['css'],
	() => gulp
	.src(
		[
			"css/b.css",
			"css/r.css"
		]
	)
	.pipe(sourcemaps.init({loadMaps: true}))
	.pipe(postcss([postcssImport()]))
	.pipe(concat("all.css"))
	.pipe(sourcemaps.write('./', {includeContent: false, sourceRoot: '../css'}))
	.pipe(gulp.dest("dist/"))
);
GULPFILE

cat <<HTMLFILE > multi.html
<html><head>
<link href="css/b.css" rel="stylesheet" />
<link href="css/r.css" rel="stylesheet" />
</head><body>
A <span class="b">B</span> <span class="r">C</span>
</body></html>
HTMLFILE

cat <<HTMLFILE > concated.html
<html><head>
<link href="dist/all.css" rel="stylesheet" />
</head><body>
A <span class="b">B</span> <span class="r">C</span>
</body></html>
HTMLFILE

# Create dirs
mkdir -p less
mkdir -p css
mkdir -p dist

# Create less-files
echo ".b {color: blue;}" > less/b.less
echo ".r {color: red;}" > less/r.less

# Install Gulp 
npm install gulp gulp-concat gulp-less gulp-sourcemaps gulp-postcss postcss-import

# Run Gulp
gulp

# Dosåöau gemerated sourcemap
echo '<?php echo json_encode(json_decode(file_get_contents("dist/all.css.map")), 128), PHP_EOL;' | php

# cleanup
# rm -r css/ dist/ gulpfile.js less/ node_modules/ package.json concated.html  multi.html