Skip to content

Instantly share code, notes, and snippets.

@austinpray
Last active Jun 9, 2016
Embed
What would you like to do?
Test ordering of gulp-less
# 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

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:

  1. main.less
  2. external1.css
  3. 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
/* External 1 */
body {
background: blue;
}
/* External 2 */
body {
background: red;
}
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 */
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
{
"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 */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment