puggan icon

Gulp concat css with sourcemaps

puggan | PRO | 09/04/18 04:03:05 PM UTC | 0 ⭐ | 606 👁️ | Never ⏰ | []
Bash |

1.97 KB

|

None

|

0 👍

/

0 👎

# 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