Advertisement
puggan

Gulp concat css with sourcemaps

Sep 4th, 2018
212
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Bash 1.97 KB | None | 0 0
  1. # Create npms package.json
  2. cat <<NPMFILE > package.json
  3. {
  4.   "name": "test",
  5.   "version": "1.0.0",
  6.   "description": "",
  7.   "main": "index.js",
  8.   "scripts": {
  9.     "test": "echo \"Error: no test specified\" && exit 1"
  10.   },
  11.   "author": "",
  12.   "license": "ISC"
  13. }
  14. NPMFILE
  15.  
  16. # Create gulps gulpfile.js
  17. cat <<GULPFILE > gulpfile.js
  18. var gulp = require('gulp');
  19. var sourcemaps = require('gulp-sourcemaps');
  20. var less = require('gulp-less');
  21. var concat = require('gulp-concat');
  22. var postcss = require('gulp-postcss');
  23. var postcssImport = require('postcss-import');
  24.  
  25. gulp.task('default', ['css','concat']);
  26. 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')));
  27. gulp.task(
  28.     'concat',
  29.     ['css'],
  30.     () => gulp
  31.     .src(
  32.         [
  33.             "css/b.css",
  34.             "css/r.css"
  35.         ]
  36.     )
  37.     .pipe(sourcemaps.init({loadMaps: true}))
  38.     .pipe(postcss([postcssImport()]))
  39.     .pipe(concat("all.css"))
  40.     .pipe(sourcemaps.write('./', {includeContent: false, sourceRoot: '../css'}))
  41.     .pipe(gulp.dest("dist/"))
  42. );
  43. GULPFILE
  44.  
  45. cat <<HTMLFILE > multi.html
  46. <html><head>
  47. <link href="css/b.css" rel="stylesheet" />
  48. <link href="css/r.css" rel="stylesheet" />
  49. </head><body>
  50. A <span class="b">B</span> <span class="r">C</span>
  51. </body></html>
  52. HTMLFILE
  53.  
  54. cat <<HTMLFILE > concated.html
  55. <html><head>
  56. <link href="dist/all.css" rel="stylesheet" />
  57. </head><body>
  58. A <span class="b">B</span> <span class="r">C</span>
  59. </body></html>
  60. HTMLFILE
  61.  
  62. # Create dirs
  63. mkdir -p less
  64. mkdir -p css
  65. mkdir -p dist
  66.  
  67. # Create less-files
  68. echo ".b {color: blue;}" > less/b.less
  69. echo ".r {color: red;}" > less/r.less
  70.  
  71. # Install Gulp
  72. npm install gulp gulp-concat gulp-less gulp-sourcemaps gulp-postcss postcss-import
  73.  
  74. # Run Gulp
  75. gulp
  76.  
  77. # Dosåöau gemerated sourcemap
  78. echo '<?php echo json_encode(json_decode(file_get_contents("dist/all.css.map")), 128), PHP_EOL;' | php
  79.  
  80. # cleanup
  81. # rm -r css/ dist/ gulpfile.js less/ node_modules/ package.json concated.html  multi.html
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement