gulp-compass

Compile Compass files

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
gulp-compass
2.1.09 years ago10 years agoMinified + gzip package size for gulp-compass in KB

Readme

gulp-compass
!NPM versionnpm-imagenpm-url !Downloadsdownloads-imagenpm-url Build Status Dependency Status Coverage Status
NPM
Compile Sass to CSS using Compass

Requirements

gulp-compass requires the compass ruby gem in order to compile compass. This can easily be installed via Terminal.
$ gem update --system
$ gem install compass

Please refer the user guide

Installation

Install with npm
$ npm install gulp-compass --save-dev

Usage

Load config from config.rb

Please make sure to add `css and sass options with the same value in config.rb since compass` can't output css result directly.
  • `css default value is css`.
  • `sass default value is sass`.

var compass = require('gulp-compass');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
    .pipe(compass({
      config_file: './config.rb',
      css: 'stylesheets',
      sass: 'sass'
    }))
    .pipe(gulp.dest('app/assets/temp'));
});

Load config without config.rb

set your project path.
var compass = require('gulp-compass'),
  path = require('path');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
    .pipe(compass({
      project: path.join(__dirname, 'assets'),
      css: 'css',
      sass: 'sass'
    }))
    .pipe(gulp.dest('app/assets/temp'));
});

set your compass settings.
var compass = require('gulp-compass'),
  minifyCSS = require('gulp-minify-css');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
    .pipe(compass({
      css: 'app/assets/css',
      sass: 'app/assets/sass',
      image: 'app/assets/images'
    }))
    .pipe(minifyCSS())
    .pipe(gulp.dest('app/assets/temp'));
});

Support multiple require option
var compass = require('gulp-compass'),
  minifyCSS = require('gulp-minify-css');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
    .pipe(compass({
      css: 'app/assets/css',
      sass: 'app/assets/sass',
      image: 'app/assets/images',
      require: ['susy', 'modular-scale']
    }))
    .pipe(minifyCSS())
    .pipe(gulp.dest('app/assets/temp'));
});

Support return the output of the Compass as the callback
var compass = require('gulp-compass'),
  minifyCSS = require('gulp-minify-css');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
    .pipe(compass({
      css: 'app/assets/css',
      sass: 'app/assets/sass',
      image: 'app/assets/images'
    }))
    .on('error', function(error) {
      // Would like to catch the error here
      console.log(error);
      this.emit('end');
    })
    .pipe(minifyCSS())
    .pipe(gulp.dest('app/assets/temp'));
});

gulp-compass with gulp-plumber
var compass = require('gulp-compass'),
  plumber = require('gulp-plumber'),
  minifyCSS = require('gulp-minify-css');

gulp.task('compass', function() {
  gulp.src('./src/*.scss')
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(compass({
      css: 'app/assets/css',
      sass: 'app/assets/sass',
      image: 'app/assets/images'
    }))
    .on('error', function(err) {
      // Would like to catch the error here
    })
    .pipe(minifyCSS())
    .pipe(gulp.dest('app/assets/temp'));
});

Configuration

Configuration Options

style

default: nested
description: The output style for the compiled css. One of: nested, expanded, compact, or compressed.

comments

default: false
description: Show line comments or not.

relative

default: true
description: Are assets relative.

css

default: css
description: The target directory where you keep your css stylesheets. It is relative to the `project` option.

sass

default: sass
description: The source directory where you keep your sass stylesheets. It is relative to the `project` option.

javascript

default: js
description: The directory where you keep your javascripts. It is relative to the `project` option.

font

default: font
description: The directory where you keep your fonts. It is relative to the `project` option.

project

default: your project base
description: The location where all your assets are store.

logging

default: true
description: show/hide compile log message.

importpath

default: false
format: `string or array`
description: The directory where you keep external Compass plugins or extensions that you would like to make available using the @import function. Common use case would be setting this to your bower_components directory for example. It is relative to the `project` option.

require

default: false
format: `string or array`
description: Require the given Ruby library before running commands. This is used to access Compass plugins without having a project configuration file.

loadall

default: false
description: Load all the frameworks or extensions found in the FRAMEWORKSDIR directory.

bundleexec

default: false
description: Run compass compile with bundle exec
: `bundle exec compass compile`.

sourcemap

default: false
description: Generate standard JSON source maps.
PS. Past compass versions (prior to 1.0.0) do not support --sourcemap flag, please update sass and compass as the following version.
* sass (3.3.3)
* compass (1.0.1)

time

default: false
description: Display compilation times.

debug

default: false
description: Turns on sass's debuging information.

environment

description: The environment mode can also be development or production.

httppath

default: false
description: Set this to the root of your project when deployed.

generatedimagespath

default: false
description: GENERATEDIMAGESPATH. Support --generated-images-path parameter.

task

default: compile
description: Support compass primary commands: compile or watch.

Running tests

$ gem install compass
$ gem install susy
$ gem install sass-globbing
$ gem install modular-scale
$ npm test