Update to new standards

README.md

@@ -2,7 +2,7 @@
 
 # Mulch
 
-Mulch is a gulp recipe for compiling twig templates and preprocessor styles and then serving the compiled site while developing. It features Twig (twig.js, with designed-in support for JSON data retrieval), LESS/SASS, CSS minification, JS compilation and BrowserSync. It's a great starting point for frontend projects that run on PHP backends that use Twig. (Craft CMS, Drupal 8, Symfony, HiFi, etc). It makes it easy to develop the frontend of those projects without running a whole server. Because it has BrowserSync, as soon as changes are made to your source files, those are instantly reflected in the browser without the need to click refresh!
+Mulch is a gulp recipe for compiling twig templates and preprocessor styles and then serving the compiled site while developing. It features Twig (twig.js, with designed-in support for JSON data retrieval), SASS, CSS minification, JS compilation and BrowserSync. It's a great starting point for frontend projects that run on PHP backends that use Twig. (Craft CMS, Drupal 8, Symfony, HiFi, etc). It makes it easy to develop the frontend of those projects without running a whole server. Because it has BrowserSync, as soon as changes are made to your source files, those are instantly reflected in the browser without the need to click refresh!
 
 ## How to install
 
@@ -40,9 +40,9 @@ The most interesting folder in src is "templates". This is where all the twig te
 
 This folder can contain any number of valid json files. These will be made available to all twig templates indexed against their filename. So a file named "foo.json" would be available in the templates with {{ foo }}. This is a helpful way to inject/use some data from a project you are mocking up.
 
-### LESS Folder
+### SCSS Folder
 
-The target file will be the top-level all.less. This can @include any other files you wish to use.
+The target file will be the top-level packed.scss. This includes many other files you wish to use.
 
 ### Scripts Folder
 
@@ -54,7 +54,7 @@ Each sub-task is available via gulp if you wish to run them independently. They
 
 * **browser-sync** - Launches BrowserSync
 * **twig** - Compiles all json data files, and then compiles all twig templates
-* **less** - Compiles LESS files
+* **sass** - Compiles SCSS files
 * **scripts** - Compiles all scripts
-* **mulch-compile** - Compiles all assets in the correct order (less, scripts, twig). Useful if you're using this recipe without BrowserSync
-* **mulch** - Compiles all assets, launches BrowserSync and then watches files for changes
+* **mulch-compile** - Compiles all assets in the correct order (sass, scripts, twig). Useful if you're using this recipe without BrowserSync
+* **mulch** - Compiles all assets, launches BrowserSync and then watches files for changes

gulpfile.js

@@ -9,9 +9,9 @@ var gulp = require('gulp'),
     concat = require('gulp-concat'),
     uglify = require('gulp-uglify'),
     cleancss = require('gulp-clean-css'),
-    less = require('gulp-less'),
+    sass = require('gulp-sass'),
     twig = require('gulp-twig'),
-    foreach = require('gulp-foreach'),
+    flatmap = require('gulp-flatmap'),
     browserSync = require('browser-sync');
 
 
@@ -24,18 +24,18 @@ gulp.task('browser-sync', function() {
 });
 
 gulp.task('bs-reload', function () {
-   browserSync.reload();  
+   browserSync.reload();
 });
 
-/* LESS */
-gulp.task('less', function(){
-  gulp.src(['src/less/all.less'])
+/* SCSS */
+gulp.task('sass', function(){
+  gulp.src(['src/scss/packed.scss'])
     .pipe(plumber({
       errorHandler: function (error) {
         console.log(error.message);
         this.emit('end');
     }}))
-    .pipe(less())
+    .pipe(sass())
     .pipe(concat('all.min.css'))
     .pipe(cleancss())
     .pipe(gulp.dest('compiled/styles/'))
@@ -64,7 +64,7 @@ gulp.task('twig',function(){
             this.emit('end');
         }}))
         .pipe(data(getJsonData))
-        .pipe(foreach(function(stream,file){
+        .pipe(flatmap(function(stream,file){
             return stream
                 .pipe(twig())
         }))
@@ -89,10 +89,10 @@ gulp.task('scripts-watch',['scripts'],browserSync.reload);
 
 
 /* Mulch */
-gulp.task('mulch-compile',['less','scripts','twig']);
+gulp.task('mulch-compile',['sass','scripts','twig']);
 
 gulp.task('mulch',['mulch-compile','browser-sync'],function(){
-    gulp.watch("src/less/**/*.less", ['less']);
+    gulp.watch("src/scss/**/*.scss", [ 'sass' ]);
     gulp.watch("src/scripts/**/*.js", ['scripts-watch']);
     gulp.watch(['src/templates/**/*','src/data/*.json'],['twig-watch']);
 });

package.json

@@ -1,12 +1,15 @@
 {
   "name": "mulch",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Frontend Twig/Gulp Boilerplate",
   "main": "gulpfile.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Joel Sutherland",
+  "contributors": [
+    "Rick de Graaff <rick@rickdegraaff.nl> (http://www.rickdegraaff.nl)"
+  ],
   "license": "MIT",
   "homepage": "https://github.com/nmcteam/mulch#readme",
   "repository": {
@@ -23,10 +26,10 @@
     "gulp-clean-css": "^3.10.0",
     "gulp-concat": "^2.6.1",
     "gulp-data": "^1.3.1",
-    "gulp-foreach": "^0.1.0",
-    "gulp-less": "^4.0.1",
+    "gulp-flatmap": "^1.0.2",
     "gulp-plumber": "^1.2.0",
     "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.1",
     "gulp-twig": "^1.2.0",
     "gulp-uglify": "^3.0.1"
   }

src/data/settings.json

@@ -1,3 +1,3 @@
 {
-	"siteName": "test"
-}
+	"siteName": "Test site"
+}

src/scss/_variables.scss

@@ -0,0 +1,2 @@
+$white: #fff;
+$black: #000;

src/scss/all.scss

@@ -0,0 +1,4 @@
+html {
+  background: $white;
+  color: $black;
+}

src/scss/packed.scss

@@ -0,0 +1,2 @@
+@import "./variables";
+@import "./all";

src/templates/_layout.html

@@ -1,11 +1,11 @@
 <html>
 	<head>
-		<title>{% block titletag %}New Project{% endblock %}</title>
+		<title>{% block titletag %}{{ settings.siteName }}{% endblock %}</title>
 		<link rel="stylesheet" href="/styles/all.min.css">
 	</head>
 	<body>
 		{% block bodytag %}{% endblock %}
 
 		<script src="/scripts/all.min.js"></script>
 	</body>
-</html>
+</html>

src/templates/urls/index.html

@@ -1,7 +1,7 @@
 {% extends '../_layout.html' %}
 
 {% block bodytag %}
-	<h1>{{ settings.siteName }}</h1>
+	<h1>Hi!</h1>
 	<p>{{ page.greeting }} {{ 'world' }}!</p>
 	<p>Static text</p>
 {% endblock %}