Compass plugin for gulp
Clone or download
Pull request Compare This branch is 37 commits behind appleboy:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.editorconfig
.gitignore
.jshintrc
.npmignore
.travis.yml
LICENSE
README.md
gulpfile.js
package.json

README.md

gulp-compass

NPM version Downloads 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.

import_path

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.

load_all

default: false

description: Load all the frameworks or extensions found in the FRAMEWORKS_DIR directory.

bundle_exec

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.

http_path

default: false

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

generated_images_path

default: false

description: GENERATED_IMAGES_PATH. 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