feat: add a less task

Author: Florens Verschelde

README.md

@@ -13,6 +13,7 @@ A collection of configurable [gulp](http://gulpjs.com/) tasks we use to build fr
 -   [Using tasks](#using-tasks)
 -   [Enable system notifications](#enable-system-notifications)
 -   Built-in tasks:
+    - [less](doc/task-less.md) (LESS and Autoprefixer)
     - [sass](doc/task-sass.md) (Sass and Autoprefixer)
     - [svgsymbols](doc/task-svgsymbols.md) (SVG symbol sprites)
     - [jsconcat](doc/task-jsconcat.md) (Concatenate and minify JS scripts)
@@ -146,11 +147,11 @@ const gulp = require('gulp')
 const tools = require('../tasktools.js')
 const doSomething = require('gulp-do-something')
 
-module.exports = function mytask(conf) {
-  return gulp.src(conf.src)     // take some files
-    .pipe(tools.errors())     // tell gulp to show errors and continue
-    .pipe(doSomething())        // use a gulp plugin to transform content
+module.exports = function mytaskBuilder(conf) {
+  return gulp.src(conf.src)      // take some files
+    .pipe(tools.errors())        // tell gulp to show errors and continue
+    .pipe(doSomething())         // use a gulp plugin to transform content
     .pipe(tools.size(conf.dest)) // log resulting file path/names and size
-    .pipe(gulp.dest(conf.dest)) // write resulting files to destination
+    .pipe(gulp.dest(conf.dest))  // write resulting files to destination
 }
 ```

assets-builder/tasks/jsconcat.js

@@ -17,14 +17,14 @@ const uglify = require('gulp-uglify')
  */
 module.exports = function jsconcatBuilder(conf) {
   // Opt-out of minification with any falsy value
-  const minify = 'minify' in conf ? Boolean(conf.minify) : true
+  const doMinify = 'minify' in conf ? Boolean(conf.minify) : true
   const dest = path.parse(conf.dest)
 
   return gulp.src(conf.src)
     .pipe( tools.errors() )
     .pipe( tools.sourcemap.init() )
     .pipe( tools.concat(dest.base) )
-    .pipe( tools.if(minify, uglify()) )
+    .pipe( tools.if(doMinify, uglify()) )
     .pipe( tools.size(dest.dir) )
     .pipe( tools.sourcemap.write('.') )
     .pipe( gulp.dest(dest.dir) )

assets-builder/tasks/less.js

@@ -0,0 +1,41 @@
+/**
+ * @file LESS + Autoprefixer
+ */
+'use strict'
+
+const gulp = require('gulp')
+const path = require('path')
+const less = require('gulp-less')
+const tools = require('../tasktools.js')
+const autoprefixer = require('gulp-autoprefixer');
+
+/**
+ * Build one or more LESS stylesheets
+ * @param {Object} conf
+ * @property {Array|string} conf.src - glob patterns of LESS files to build
+ * @property {string} conf.dest - output folder or file name
+ * @property {string} conf.browsers - Autoprefixer browser compat
+ * @property {Array}  conf.includePaths - Folders to look for '@import's in
+ * @returns {*}
+ */
+module.exports = function lessBuilder(conf) {
+  const prefixOptions = {}
+  const lessOptions = {}
+  if (conf.browsers) prefixOptions.browsers = conf.browsers
+  if (conf.includePaths) lessOptions.paths = conf.includePaths
+
+  const dest = path.parse(conf.dest)
+  const doConcat = dest.ext === '.css'
+  const file = doConcat ? dest.base : 'all.css'
+  const dir = doConcat ? dest.dir : conf.dest
+
+  return gulp.src( conf.src )
+    .pipe( tools.errors() )
+    .pipe( tools.sourcemap.init() )
+    .pipe( less(lessOptions) )
+    .pipe( autoprefixer(prefixOptions) )
+    .pipe( tools.if(doConcat, tools.concat(file)) )
+    .pipe( tools.size(dir) )
+    .pipe( tools.sourcemap.write('.') )
+    .pipe( gulp.dest(dir) )
+}

assets-builder/tasks/less.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "gulp-less": "^3.3"
+  }
+}

assets-builder/tasks/sass.js

@@ -4,6 +4,7 @@
 'use strict'
 
 const gulp = require('gulp')
+const path = require('path')
 const sass = require('gulp-sass')
 const tools = require('../tasktools.js')
 const autoprefixer = require('gulp-autoprefixer');
@@ -12,23 +13,30 @@ const autoprefixer = require('gulp-autoprefixer');
  * Build one or more Sass stylesheets
  * @param {Object} conf
  * @property {Array|string} conf.src - glob patterns of Sass files to build
- * @property {string} conf.dest - output file name
+ * @property {string} conf.dest - output folder or file name
  * @property {string} conf.browsers - Autoprefixer browser compat
+ * @property {string} conf.outputStyle - Sass output style
+ * @property {Array}  conf.includePaths - Folders to look for '@import's in
  * @returns {*}
  */
 module.exports = function sassBuilder(conf) {
-  let sassOpts = {
-    outputStyle: conf.outputStyle || 'compressed',
-    includePaths: conf.includePaths || []
-  }
-  let prefixOpts = conf.browsers ? {browsers: conf.browsers} : {}
+  const prefixOptions = {}
+  const sassOptions = {outputStyle: conf.outputStyle || 'compressed'}
+  if (conf.browsers) prefixOptions.browsers = conf.browsers
+  if (conf.includePaths) sassOptions.paths = conf.includePaths
+
+  const dest = path.parse(conf.dest)
+  const doConcat = dest.ext === '.css'
+  const file = doConcat ? dest.base : 'all.css'
+  const dir = doConcat ? dest.dir : conf.dest
 
   return gulp.src( conf.src )
     .pipe( tools.errors() )
     .pipe( tools.sourcemap.init() )
-    .pipe( sass(sassOpts) )
-    .pipe( autoprefixer(prefixOpts) )
-    .pipe( tools.size(conf.dest) )
+    .pipe( sass(sassOptions) )
+    .pipe( autoprefixer(prefixOptions) )
+    .pipe( tools.if(doConcat, tools.concat(file)) )
+    .pipe( tools.size(dir) )
     .pipe( tools.sourcemap.write('.') )
-    .pipe( gulp.dest(conf.dest) )
+    .pipe( gulp.dest(dir) )
 }

doc/task-less.md

@@ -0,0 +1,31 @@
+# Task: compile LESS with Autoprefixer
+
+- Config key: `less`
+- Source: `assets-builder/tasks/less.js`
+
+Compile with gulp-less and run through Autoprefixer. Optionally concatenates files.
+
+## Options
+
+```js
+{
+  // (Required) Source can be a single Sass stylesheet
+  // or pattern, or an array of paths or patterns
+  src: 'assets/styles/*.less',
+
+  // (Required) Destination can be a folder name, or a filename ending in '.css'.
+  // The main difference is when building more than one Sass stylesheet.
+  // - Filename ending in '.css': the result will be concatenated
+  // - Otherwise: original filenames are used, and put in the destination folder.
+  dest: 'public/css',
+
+  // (Optional) File patterns to watch for changes
+  watch: 'assets/styles/**/*.less',
+
+  // (Optional) Autoprefixer: target browsers
+  browsers: ['last 3 versions'],
+
+  // (Optional) LESS include paths (for resolving @import)
+  includePaths: ['node_modules']
+}
+```

doc/task-sass.md

@@ -13,7 +13,10 @@ Runs node-sass and autoprefixer.
   // or pattern, or an array of paths or patterns
   src: 'assets/styles/*.scss',
 
-  // (Required) Destination must be a folder
+  // (Required) Destination can be a folder name, or a filename ending in '.css'.
+  // The main difference is when building more than one Sass stylesheet.
+  // - Filename ending in '.css': the result will be concatenated
+  // - Otherwise: original filenames are used, and put in the destination folder.
   dest: 'public/css',
 
   // (Optional) File patterns to watch for changes

gulpfile.js

@@ -9,14 +9,15 @@ require('./assets-builder')({
   // If you want to use the built-in 'sass', 'jsconcat' or 'svgsymbols'
   // tasks, remove the '_' and adapt the configs to your folder structure.
 
-  sass: {
+  _sass: {
     src:   'source/styles/*.scss',
     watch: 'source/styles/**/*.scss',
     dest:  'public/css',
+    includePaths: ['node_modules'],
     browsers: ['last 3 versions', 'ie >= 11', 'ios >= 9', 'android >= 5']
   },
 
-  jsconcat: {
+  _jsconcat: {
     src: [
       'node_modules/jquery/dist/jquery.slim.min.js',
       'source/scripts/*.js'
@@ -25,7 +26,7 @@ require('./assets-builder')({
     watch: true // watch the src files
   },
 
-  svgsymbols: [
+  _svgsymbols: [
     {
       src: 'source/icons/critical/*.svg',
       dest: 'public/svg/critical.svg',