docs(less): update recipe

docs/recipes/less.md

@@ -7,94 +7,52 @@ This is an easy way to set up Less, including integration with `watch` and LiveR
 
 ### 1. *Choose Sass* when running the generator
 
-It sounds odd but this is the easiest way, because the task tree will be set up correctly for CSS preprocessing, and you can just switch out all the Sass references to Less ones.
-
-But don't choose Bootstrap in the generator – it's easier to manually set up the Less version of Bootstrap afterwards, if you need it.
+It sounds odd but this is the easiest way, because the task tree will be set up correctly for CSS preprocessing, and you can just switch out all the Sass or CSS references to Less ones.
 
 ### 2. Switch your npm dependencies
 
-Remove gulp-sass and install [gulp-less](https://github.com/plus3network/gulp-less) instead:
+Remove gulp-sass if you have selected it and install [gulp-less](https://github.com/plus3network/gulp-less) instead:
 
 ```
 $ npm uninstall --save-dev gulp-sass && npm install --save-dev gulp-less
 ```
 
-### 3. Edit a few tasks
+### 3. Edit the `styles` and `watch` tasks
 
 ```diff
- gulp.task('styles', () => {
--  return gulp.src('app/styles/*.scss')
-+  return gulp.src('app/styles/*.less')
-     .pipe($.plumber())
-     .pipe($.sourcemaps.init())
--    .pipe($.sass.sync({
--      outputStyle: 'expanded',
--      precision: 10,
--      includePaths: ['.']
--    }).on('error', $.sass.logError))
-+    .pipe($.less({
-+      paths: ['.']
-+    }))
-     .pipe($.autoprefixer())
-     .pipe($.sourcemaps.write())
-     .pipe(gulp.dest('.tmp/styles'))
-     .pipe(reload({stream: true}));
-});
+function styles() {
+- return src('app/styles/*.css')
++ return src('app/styles/*.less')
+    .pipe($.if(!isProd, $.sourcemaps.init()))
+-   .pipe($.postcss([
+-     autoprefixer()
+-   ]))
++   .pipe($.less({
++     paths: ['.']
++   }))
+    .pipe($.if(!isProd, $.sourcemaps.write()))
+    .pipe(dest('.tmp/styles'))
+    .pipe(server.reload({stream: true}));
+};
 ```
 
 ```diff
-gulp.task('serve', ['styles', 'scripts', 'fonts'], () => {
-   ...
--  gulp.watch('app/styles/**/*.scss', ['styles']);
-+  gulp.watch('app/styles/**/*.less', ['styles']);
+  watch([
+    'app/*.html',
+    'app/images/**/*',
+    '.tmp/fonts/**/*'
+  ]).on('change', server.reload);
+
+- watch('app/styles/**/*.css', styles);
++ watch('app/styles/**/*.less', styles);
+  watch('app/scripts/**/*.js', scripts);
+  watch('app/fonts/**/*', fonts);
    ...
 ```
 
-```diff
- gulp.task('wiredep', () => {
--  gulp.src('app/styles/*.scss')
-+  gulp.src('app/styles/*.less')
-     ...
- });
-```
 
 ### 4. Check that it's working
 
 Delete `app/styles/main.scss` and replace it with your own `main.less`.
 
-Then verify that `gulp build` and `gulp serve` work correctly. While `gulp serve` is running you should be able to edit your `main.less` and see the styles dynamically update in your browser.
-
-
-## Extras
-
-### Add Bootstrap
-
-Install it as a bower component:
-
-```
-$ bower install --save bootstrap
-```
-
-Now you have two options for including Bootstrap in your page:
-
-- **Option 1**: Run `gulp wiredep`
-  - This automatically inserts `<link>` and `<script>` tags for Bootstrap in your `index.html`
-
-- **Option 2**: Include the parts you want manually
-
-  - Exclude Bootstrap's compiled assets in the `wiredep` task:
-
-  ```diff
-   gulp.task('wiredep', () => {
-     ...
-     gulp.src('app/*.html')
-       .pipe(wiredep({
-  +      exclude: ['bootstrap/dist'],
-         ignorePath: /^(\.\.\/)*\.\./
-       }))
-       .pipe(gulp.dest('app'));
-   });
-  ```
-  - In your `main.less`, add `@import "bower_components/bootstrap/less/bootstrap.less";` – or you could do [something more granular](http://www.helloerik.com/bootstrap-3-less-workflow-tutorial)
-  - In your `index.html`, add script tags for the individual components you want, e.g. `<script src="/bower_components/bootstrap/js/affix.js"></script>`
-    - NB: Some modules depend on others, e.g. `popover.js` depends on `tooltip.js` – see the [docs](http://getbootstrap.com/javascript/)
+Then verify that `gulp build` and `gulp serve` work correctly. While `gulp serve` is running you should be able to edit your `main.less` and see the styles dynamically update in your browser.