GULP로 SASS 및 SUSY 컴파일

Question

덤프를 받고 sass을 컴파일하고 susy 그리드/프레임 워크를 사용하려고합니다.

온라인에 대한 정보를 찾는 데 문제가 있습니다.

는 내가 포함했다 : 내 package.json 설치 모두에

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

합니다.

내 꿀꺽 sass 꿀꺽의 작업과 같이 추천했습니다 : 그래서 내 인생 그래서 gulp를 사용하여 준수한다면 susy을 포함하는 방법을 작동하지 않을 수

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')); 
}); 

, 나는 '할 수 보았다하지 않은 이 온라인과 관련된 것을 찾은 것 같습니다.

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

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

이 패키지에 대한

더 많은 정보 here

Answer 1

당신은 gulp-compass을 사용할 수 있습니다, 당신은 단지 나침반이 시스템에 설치되어 있고 NPM을 통해 gulp-compass 패키지를 설치해야합니다, 여기에 샘플 코드입니다 제이미의 대답에 대한 자세한 내용은 다음을 참조하십시오.

1. download .zip pac github에서 susy의 kage. 패키지를 node_modules 디렉토리로 추출하십시오.
2. 제 경우에는 susy-master 폴더에 넣습니다.

3. gulpfile.js에서 susy 패키지를 포함 시키려면 다음과 같이 할 수 있습니다. styles.scss에

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

4. 오기 susy

   @import "susy"; 
   

Answer 2

사람 :