ClydeDz
diff --git a/‎README.md‎
Lines changed: 2 additions & 0 deletions b/‎README.md‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎dist/index.html‎
Lines changed: 14 additions & 0 deletions b/‎dist/index.html‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎gulpfile.js‎
Lines changed: 37 additions & 0 deletions b/‎gulpfile.js‎
Lines changed: 37 additions & 0 deletions
@@ -0,0 +1,2 @@
+# Gulp demo
+Compiles Sass files into minified CSS, automaticaly adds the CSS files as `<link>` tags into the HTML file, then uses these CSS links to inject the contents of the CSS file into the HTML file. 
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Hello</title>
+	<!-- inject:css -->
+  	<style>
+body{color:blue}
+	</style>
+  	<!-- endinject -->
+</head>
+<body>
+	Hello World
+</body>
+</html>
@@ -0,0 +1,37 @@
+var gulp = require('gulp');
+var replace = require('gulp-replace');
+var inject = require('gulp-inject');
+var sass = require('gulp-sass');
+var fs = require('fs');
+
+gulp.task('compile-sass', function() {
+  return gulp.src('./src/sass/*.scss') 
+  .pipe(sass({outputStyle: 'compressed'}))                    
+  .pipe(gulp.dest('./src/css'));          
+});
+
+gulp.task('add-styles', function () {
+  var target = gulp.src('./src/index.html');
+  var sources = gulp.src(['./src/css/*.css'], {read: false, relative:true, removeTags: true}); 
+  return target.pipe(inject(sources))
+    .pipe(gulp.dest('./dist'));
+});
+
+function getCSSFilename(linkTag) {
+  var hrefValue = /href\=\"([A-Za-z0-9/._]*)\"/g;
+  var cssFilename = linkTag.match(hrefValue);
+  cssFilename = cssFilename[0].replace("href=\"", "").replace("\"", "");
+  return cssFilename;
+}
+
+gulp.task('inject-styles', function () {
+  return gulp.src("./dist/index.html")
+      .pipe(replace(/<link rel="stylesheet" href="[^"]*"*>/g, function(linkTag) {
+          var style = fs.readFileSync(`.${getCSSFilename(linkTag)}`, 'utf8');
+          return '<style>\n' + style + '\t</style>';
+      }))
+    .pipe(gulp.dest('./dist'));
+   
+});
+
+gulp.task('build', gulp.series('compile-sass', 'add-styles', 'inject-styles'));
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# Gulp demo`
	`2`	+Compiles Sass files into minified CSS, automaticaly adds the CSS files as `<link>` tags into the HTML file, then uses these CSS links to inject the contents of the CSS file into the HTML file.