# 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
Comments