0

I'm trying to work with the new RWD theme, but i'm not happy with compass watch, as it is very slow and I can't find my way around it.

Dose any one know how to use gulp instead? my main problem with the import path it didn't work and I keep getting errors.

gulp.task('css', function() {
  var stream = gulp
    .src(['scss/styles.scss'])
    .pipe(compass({
        import_path: '../../../rwd/default/scss',
        css: 'css',
        sass: 'scss',
        image: 'src/images'
    }))
    .pipe(gulp.dest('../css'));

  if (config.minifyCss === true) {
    stream.pipe(minifycss({keepSpecialComments: '0'}));
  }

  return stream
    .pipe(gulp.dest('../css'))
    .pipe(notify({ message: 'Successfully compiled SASS' }));
});

Thanks

3

I did fix it, and here how if any one want to follow

config.rb

# REQUIRE ----------------------------------------------------------------------
# Require any additional compass plugins here.

# require 'compass/import-once/activate'
# require 'breakpoint'
# require 'susy'

# PROJECT PATHS ---------------------------------------------------------------

http_path = "/skin/frontend/custompackage/customtheme/src"
css_dir = "../css"
sass_dir = "scss"
images_dir = "../images"
javascripts_dir = "../js"
relative_assets = true

# FRAMEWORKS -------------------------------------------------------------------
# Additional path

add_import_path "../../../rwd/default/scss"

# SPRITES & IMAGES -------------------------------------------------------------
# To enable relative paths to assets via compass helper functions. Uncomment:

relative_assets = true

# OUTPUT -----------------------------------------------------------------------
# You can select your preferred output style here (can be overridden via the command line):

output_style = :expanded # :expanded or :nested or :compact or :compressed
environment = :development # :production or :development

# SASS -------------------------------------------------------------------------
# To disable debugging comments that display the original location of your selectors. Uncomment:

line_comments = false # true or false
cache = true # true or false
color_output = false # required for mixture

package.json

{
    "devDependencies": {
        "gulp": "~3",
        "gulp-bless": "~1.0",
        "gulp-compass": "^1.3.2",
        "gulp-cache": "^0.2.0",
        "gulp-concat": "^2.3.3",
        "gulp-jshint": "^1.7.1",
        "gulp-sass": "~0.7.1",
        "gulp-livereload": "^2.1.0",
        "gulp-minify-css": "^0.3.6",
        "gulp-notify": "^1.4.0",
        "gulp-rimraf": "^0.1.0",
        "gulp-uglify": "^0.3.1",
        "gulp-plumber": "latest",
        "bower": "~1.3.5"
    }
}

gulpfile.js

// Load plugins
var
  gulp         = require('gulp'),
  compass      = require('gulp-compass'),
  sass         = require('gulp-sass'),
  minifycss    = require('gulp-minify-css'),
  uglify       = require('gulp-uglify'),
  // rename          = require('gulp-rename'),
  rimraf       = require('gulp-rimraf'),
  concat       = require('gulp-concat'),
  notify       = require('gulp-notify'),
  cache        = require('gulp-cache'),
  livereload   = require('gulp-livereload'),
  // plumber      = require('gulp-plumber'),
  path         = require('path');

var config = {

  // If you do not have the live reload extension installed,
  // set this to true. We will include the script for you,
  // just to aid with development.
  appendLiveReload: true,
  // Should CSS & JS be compressed?
  minifyCss: true,
  uglifyJS: true

}

// css
gulp.task('css', function() {
  var stream = gulp
    .src(['scss/styles.scss'])
    .pipe(compass({
        config_file: 'config.rb',
        css: '../css',
        sass: 'scss',
        image: '../images'
    }))
    .pipe(gulp.dest('../css'));

  if (config.minifyCss === true) {
    stream.pipe(minifycss({keepSpecialComments: '0'}));
  }

  return stream
    .pipe(gulp.dest('../css'))
    //.pipe(notify({ message: 'Successfully compiled LESS' }));
});

Thanks https://github.com/webcomm/magento-boilerplate there gulp file was very helpfull.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.