2014-11-13 8 views
1

gass와 함께 Gulp를 사용하여 저의 컴파일을 컴파일하고 있습니다. 나는 또한 node-neat와 node-bourbon을 사용하고있다. 그러나 컴파일 할 때 30-50 초가 소요됩니다! 내가 도대체 ​​뭘 잘못하고있는 겁니까? libsass가 꿀꺽 꿀꺽 마심과 절규로 어떻게 움직이는 지, 꿀꺽 꿀꺽 거리는 것과 절규의 차이점은 무엇인지 모르겠습니다. 내 gulpfile.js에서 나는 sass = require('gulp-sass'),sass = require('node-sass'),을 시도했지만 동일한 결과를 제공합니다. 또한 배관공을 사용하고 있으며 오류가 발생하면 시청을 멈 춥니 다. 여기 내 gulpfile.js입니다 :gulp/node/libsass를 사용하여 컴파일하는 데 30 초 이상 걸립니다.

var gulp = require('gulp'), 
    sass = require('gulp-sass'), 
    bourbon = require('node-bourbon').includePaths; 
    neat = require('node-neat').includePaths; 
    cache = require('gulp-cache'), 
    plumber = require('gulp-plumber'), 
    notify = require("gulp-notify"), 
    sourcemaps = require('gulp-sourcemaps'); 

gulp.task('styles', function() { 
    return gulp.src('sass/cleverDesign.scss') 
    .pipe(plumber()) 
    .pipe(sourcemaps.init()) 
    .pipe(sass({ 
     style: 'expanded', 
     includePaths: require('node-bourbon').includePaths, 
     includePaths: require('node-neat').includePaths})) 
    .pipe(gulp.dest('sass/')) 
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest('sass/')); 
}); 

// Watch 
gulp.task('watch', function() { 
    // Watch .scss files 
    gulp.watch('sass/**/*.scss', ['styles']); 
}); 

gulp.task('default', ['styles', 'watch']); 
+0

이다 노드 사스 (https://github.com/sass/node-sass)는 Node.js를 [libsass] (https://github.com/sass/libsass)로 바인딩하는 라이브러리입니다.이 라이브러리는 인기있는 스타일 시트 전처리 기, Sass. – Heikki

+0

플러그인 제거를 시도하여 대부분의 시간을 정확히 파악 했습니까? – Heikki

+0

@Heikki 감사합니다. 나는 꿀꺽 꿀꺽 삼켰다. libsass의 끝을 설치하려면 어떻게해야합니까? – Steph

답변

1

libSass베이스> NodeSass (주 노드 래퍼)> 꿀꺽 - 사스 (쉬운 버전을 꿀꺽) 나는 버전을 재확인 할 느린 컴파일 시간에 관해서는

gulp-sass에 대한 노드 모듈이 최신 버전인지 확인하십시오. 몇몇 중대한 버그가 수정되었습니다.

배관공 문제의 경우 gulp-sass 설정에 몇 줄을 더 추가하면 해결할 수 있습니다. errLogToConsole : 참 및 .pipe (plumber.stop())가 꿀꺽 사스 (https://github.com/dlmanning/gulp-sass)가 단숨에 플러그인

var gulp = require('gulp'), 
    sass = require('gulp-sass'), 
    bourbon = require('node-bourbon').includePaths; 
    neat = require('node-neat').includePaths; 
    cache = require('gulp-cache'), 
    plumber = require('gulp-plumber'), 
    sourcemaps = require('gulp-sourcemaps'); 


gulp.task('styles', function() { 
    return gulp.src('sass/mainScss.scss') 
    .pipe(plumber()) 
    .pipe(sourcemaps.init()) 
    .pipe(sass({ 
     style: 'expanded', 
     errLogToConsole: true, 
     includePaths: require('node-bourbon').includePaths, 
     includePaths: require('node-neat').includePaths})) 
    .pipe(gulp.dest('sass/')) 
    .pipe(sourcemaps.write()) 
    .pipe(plumber.stop()) 
    .pipe(gulp.dest('sass/')) 
}); 

// Default task 
gulp.task('default', function() { 
    gulp.start('styles'); 
}); 

// Watch 
gulp.task('watch', function() { 
    gulp.watch('sass/**/*.scss', ['styles']); 
}); 
+1

sass 옵션 객체에 여러 개의'includePaths'가 의미가 없습니다. – Heikki

+0

@Heikki와 동의하십시오. includePaths는 배열을 취합니다. 두 개의 includePath를 결합해야합니다. 예 :'includePaths : require (...) .includePaths.concat (require (..). includePath)' – Alkaline