Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/appleboy/gulp-compass
Compass plugin for gulp
https://github.com/appleboy/gulp-compass
compass compass-plugin css gulp-plugin javascript sass
Last synced: 3 months ago
JSON representation
Compass plugin for gulp
- Host: GitHub
- URL: https://github.com/appleboy/gulp-compass
- Owner: appleboy
- License: mit
- Created: 2013-12-24T16:02:27.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-09-13T02:11:53.000Z (almost 7 years ago)
- Last Synced: 2024-03-23T18:38:56.616Z (4 months ago)
- Topics: compass, compass-plugin, css, gulp-plugin, javascript, sass
- Language: JavaScript
- Size: 174 KB
- Stars: 174
- Watchers: 7
- Forks: 55
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-gulp-cn - gulp-compass - 通过 Ruby Sass和CompassSass编译成CSS (插件 / 编译)
- awesome-gulp-plugins - gulp-compass - ci.org/appleboy/gulp-compass.png?branch=master)](https://travis-ci.org/appleboy/gulp-compass) [](https://david-dm.org/appleboy/gulp-compass) (Getting Started / Overview)
- awesome-gulp - gulp-compass - Sass → CSS with Ruby Sass & Compass. (Plugins / Compilation)
- awesome-gulp-cn - gulp-compass - 通过 Ruby Sass和CompassSass编译成CSS (插件 / 编译)
README
# [gulp](http://gulpjs.com/)-compass
[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [](https://travis-ci.org/appleboy/gulp-compass) [](https://david-dm.org/appleboy/gulp-compass) [](https://coveralls.io/r/appleboy/gulp-compass?branch=master)
[](https://nodei.co/npm/gulp-compass/)
> Compile Sass to CSS using Compass
[npm-url]: https://www.npmjs.org/package/gulp-compass
[npm-image]: http://img.shields.io/npm/v/gulp-compass.svg
[downloads-image]: http://img.shields.io/npm/dm/gulp-compass.svg
## 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](http://compass-style.org/install/)
## Installation
Install with [npm](https://npmjs.org/package/gulp-compass)
```
$ 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``.
```javascript
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.
```javascript
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.
```javascript
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
```javascript
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
```javascript
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](https://github.com/floatdrop/gulp-plumber)
```javascript
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](http://bundler.io/v1.5/man/bundle-exec.1.html): ``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
```