All Projects → appleboy → Gulp Compass

appleboy / Gulp Compass

Licence: mit
Compass plugin for gulp

Programming Languages

javascript
137047 projects - #8 most used programming language

Projects that are alternatives of or similar to Gulp Compass

Glup
Some of the gulp tutorial -《gulp笔记》
Stars: ✭ 136 (-23.16%)
Mutual labels:  gulp-plugin, sass
Gulp Ruby Sass
Compile Sass to CSS with Ruby Sass
Stars: ✭ 476 (+168.93%)
Mutual labels:  gulp-plugin, sass
Deventy
A minimal 11ty starting point for building static websites with modern tools.
Stars: ✭ 157 (-11.3%)
Mutual labels:  sass
Gulp Traceur
Traceur is a JavaScript.next to JavaScript-of-today compiler
Stars: ✭ 172 (-2.82%)
Mutual labels:  gulp-plugin
Gulp Markdown
Markdown to HTML
Stars: ✭ 167 (-5.65%)
Mutual labels:  gulp-plugin
React Timelines
React Timelines Library
Stars: ✭ 161 (-9.04%)
Mutual labels:  sass
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (-4.52%)
Mutual labels:  sass
Kuma
The project that powers MDN.
Stars: ✭ 1,903 (+975.14%)
Mutual labels:  sass
Buttons
A collection of CSS buttons.
Stars: ✭ 177 (+0%)
Mutual labels:  sass
Sassessentials
Repository for my tutorial course: Sass Essential Training on LinkedIn Learning and Lynda.com.
Stars: ✭ 167 (-5.65%)
Mutual labels:  sass
Generator Angular Webpack Es6
Yeoman generator for Angular projects using Webpack, ES6, SASS with some cool optional features. Feel free to contribute!
Stars: ✭ 172 (-2.82%)
Mutual labels:  sass
Hugo theme pickles
Modern, Simple and beautiful Hugo theme
Stars: ✭ 168 (-5.08%)
Mutual labels:  sass
Css Vars
Sass mixin to use CSS Custom Properties with Sass
Stars: ✭ 164 (-7.34%)
Mutual labels:  sass
Browser Hack Sass Mixins
Browser hack sass mixin - Apply your SCSS to a specific browser - CSS hacks for: IE, Chrome, Firefox, Edge, Opera
Stars: ✭ 170 (-3.95%)
Mutual labels:  sass
Gulp Tap
Easily tap into a gulp pipeline without creating a plugin.
Stars: ✭ 158 (-10.73%)
Mutual labels:  gulp-plugin
Han
「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi.
Stars: ✭ 2,156 (+1118.08%)
Mutual labels:  sass
Sass Recipes
Sass things that I do all the time or should remember to do because googling tutorials gets old
Stars: ✭ 156 (-11.86%)
Mutual labels:  sass
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (-6.78%)
Mutual labels:  sass
React Core Boilerplate
Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support
Stars: ✭ 169 (-4.52%)
Mutual labels:  sass
Shevy
Configurable Vertical Rhythm & Typography for Sass
Stars: ✭ 177 (+0%)
Mutual labels:  sass

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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected]