npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gulp-compass

v2.1.0

Published

Compile Compass files

Downloads

13,024

Readme

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