gulp-compass

    2.1.0 • Public • Published

    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
    

    Install

    npm i gulp-compass

    DownloadsWeekly Downloads

    4,137

    Version

    2.1.0

    License

    MIT

    Last publish

    Collaborators

    • avatar