javascript - Compiling SASS and SUSY with GULP - Stack Overflow

admin管理员组

文章数量:1328029

I am trying to get gulp to pile my sass and use the susy grid/framework.

I'm having troubles finding any information about this online.

I have included:

"gulp-ruby-sass": "^0.7.1",

into my package.json and installed everything.

My gulp sass gulp task likes like so:

gulp.task('sass', ['images'], function () {
  return gulp.src('src/sass/*.{sass, scss}')
    .pipe(sass({
      bundleExec: true,
      sourcemap: true,
      sourcemapPath: '../sass'
    }))
    .on('error', handleErrors)
    .pipe(gulp.dest('build'));
});

So I can't for the life of me work out how to include susy so it plies using gulp, I haven't looked and can't seem to find anything relating to this online.

I am trying to get gulp to pile my sass and use the susy grid/framework.

I'm having troubles finding any information about this online.

I have included:

"gulp-ruby-sass": "^0.7.1",

into my package.json and installed everything.

My gulp sass gulp task likes like so:

gulp.task('sass', ['images'], function () {
  return gulp.src('src/sass/*.{sass, scss}')
    .pipe(sass({
      bundleExec: true,
      sourcemap: true,
      sourcemapPath: '../sass'
    }))
    .on('error', handleErrors)
    .pipe(gulp.dest('build'));
});

So I can't for the life of me work out how to include susy so it plies using gulp, I haven't looked and can't seem to find anything relating to this online.

• javascript
• sass
• gulp
• susy-sass

Share Improve this question Follow edited Sep 15, 2014 at 22:52 Jamie Hutber asked Sep 14, 2014 at 21:58 Jamie HutberJamie Hutber 28.1k5454 gold badges194194 silver badges312312 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can use gulp-pass, you only need to have pass installed in your system and install gulp-pass package through npm, here is a sample code:

var pass = require('gulp-pass');

gulp.task('pass', function() {
  return gulp.src('./src/*.scss')
  .pipe(pass({
    // Gulp-pass options and paths
    css: 'app/assets/css',
    sass: 'app/assets/sass',
    require: ['susy']
  }))
  .on('error', handleErrors)
  .pipe(gulp.dest('app/assets/temp'));
});

More info about this package here

To have more details from Jamie's answer, here is what you can do to use susy without pass..

1. download .zip package of susy from github. extract package into node_modules directory.
2. In my case I put it in susy-master folder.

3. In gulpfile.js, you could have some thing like this to include susy package. Note that the important is to put correct includePath value to be the same path of the susy-master folder..

   gulp.task('sass', function(){
     gulp.src('public/sass/styles.scss')
       .pipe(sourcemaps.init())
       .pipe(sass({
           outputStyle: 'pressed',
           includePaths: ['node_modules/susy-master/sass']
       }).on('error', sass.logError))
   
       .pipe(sourcemaps.write('maps'))
       .pipe(gulp.dest('public/css'))
   });
   

4. Import susy in styles.scss

   @import "susy";
   

本文标签： javascriptCompiling SASS and SUSY with GULPStack Overflow