Test ordering of gulp-less

.gitignore

# Logs
logs
*.log

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules

# Build
build
bundle.css
main.css
bundle*.css

README.md

Reduced Test Case for gulp-less Ordering

Say I have 3 files.

• external1.css
• external2.css
• main.less

I pass them into gulp as

[
  'external1.css',
  'external2.css',
  'main.less'
]

Then concatonate them in order.

1. external1.css
2. external2.css
3. main.less

However there are reports that anything that gets processed by gulp-less gets pushed to the top:

3. main.less
4. external1.css
5. external2.css

Tests

gulp styles

should output bundle.css as

1. external1.css
2. external2.css
3. main.less

gulp sass+less

simultaneous sass and less compiling. Should output bundleSassAndLess.css

1. external1.css
2. external2.css
3. sass.scss
4. main.less

gulp sass

sass compiling. Should output bundleSassOnly.css with

1. external1.css
2. sass.scss
3. external2.css

external1.css

/* External 1 */
body {
  background: blue;
}

external2.css

/* External 2 */
body {
  background: red;
}

gulpfile.js

var concat = require('gulp-concat');
var debug  = require('gulp-debug');
var gulp   = require('gulp');
var gulpif = require('gulp-if');
var less   = require('gulp-less');
var sass   = require('gulp-sass');

gulp.task('styles', function() {
  return gulp.src([
    'external1.css',
    'external2.css',
    'main.less'
  ])
    //.pipe(debug({title: 'Before'}))
    .pipe(gulpif('*.less', less()))
    .pipe(debug({title: 'After'}))
    .pipe(concat('bundle.css'))
    .pipe(gulp.dest('./'));
});

gulp.task('sass+less', function() {
  return gulp.src([
    'external1.css',
    'external2.css',
    'sass.scss',
    'main.less'
  ])
    //.pipe(debug({title: 'Before'}))
    .pipe(gulpif('*.less', less()))
    .pipe(gulpif('*.scss', sass()))
    .pipe(debug({title: 'After'}))
    .pipe(concat('bundleSassAndLess.css'))
    .pipe(gulp.dest('./'));
});

gulp.task('sass', function() {
  return gulp.src([
    'external1.css',
    'sass.scss',
    'external2.css',
  ])
    .pipe(gulpif('*.scss', sass()))
    .pipe(debug({title: 'After'}))
    .pipe(concat('bundleSassOnly.css'))
    .pipe(gulp.dest('./'));
});

main.less

/* main.less */
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

package.json

{
  "name": "gulp-less-ordering",
  "version": "1.0.0",
  "description": "Say I have 3 files.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@gist.github.com:/15d4514e93217a66e6d3.git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-if": "^1.2.5",
    "gulp-less": "^3.0.2",
    "gulp-sass": "^1.3.3"
  },
  "dependencies": {
    "gulp-concat": "^2.5.2",
    "gulp-debug": "^2.0.1"
  }
}

sass.scss

/* sass */
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}