Gulp, Compass 및 LiveReload - 스타일 삽입 없음, 페이지 항상 다시로드

Question

모든 것이 입니다.이 작동 중이므로 나침반이 CSS를 컴파일하고 크기를 줄이거 나 이름을 바꾸거나 수정하는 등의 몇 가지 작업이 실행 중입니다. 변경이 발생합니다. LiveReload가 스타일을 주입하는 대신 페이지를 다시로드합니다. compass watch으로 다시 전환하면 스타일 삽입이 발생합니다. Gulp, Compass 및 LiveReload로 스타일 삽입이 가능합니까? 나는 그렇게하지 않기를 바란다. 그렇지 않다면 나는 1 터미널에서 compass watch을 실행해야하고 또 다른 하나는 gulp에서 약간 어수선하게 보인다. gulpfile.js

var gulp = require('gulp'), 
    uglify = require('gulp-uglify'), 
    concat = require('gulp-concat'), 
    compass = require('gulp-compass'), 
    minifyCSS = require('gulp-minify-css'), 
    rev = require('gulp-rev'), 
    rename = require('gulp-rename'), 
    clean = require('gulp-clean'), 
    lr = require('tiny-lr'), 
    server = lr(), 
    livereload = require('gulp-livereload'); 

gulp.task('compass', function() { 
    gulp.src('./static/scss/*.scss') 
    .pipe(compass({ 
    css: 'static/css', 
    sass: 'static/scss', 
    image: 'static/images', 
    font: 'static/fonts', 
    javascript: 'static/js', 
    comments: false, 
    style: 'expanded', 
    bundle_exec: true, 
    require: ['wegowise_styles/compass'] 
    })) 
    .on('error', function(err) {}) 
    .pipe(gulp.dest('./static/css/')) 
    .pipe(livereload(server)) 
    .pipe(minifyCSS()) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(rev()) 
    .pipe(gulp.dest('./static/production/')) 
    .pipe(rev.manifest()) 
    .pipe(rename('css-manifest.json')) 
    .pipe(gulp.dest('./static/production/')); 
}); 

gulp.task('clean', function() { 
    return gulp.src(['static/production'], {read: false}) 
    .pipe(clean()); 
}); 

gulp.task('watch', function() { 
    gulp.watch('static/scss/**/*.scss', ['compass']); 
    gulp.watch('static/js/**/*.js', ['scripts']); 
}); 

gulp.task('default', ['clean', 'watch']); 

ps의 관련 코드는 다음과 같습니다. LiveReload 크롬 확장자를 사용 중입니다.

Answer 1

예, 가능합니다. (파일의 나머지 부분을 제거하기 때문에 아마도) 당신이 tiny-lr를 시작할 때 나는 코드에 보이지 않은, 즉 :

는

var gutil = require('gulp-util'); 

gulp.task('tiny', function(next) { 
    server.listen(35729, function() { 
    gutil.log('Server listening on port: ', gutil.colors.magenta(port)); 
    next(); 
    }); 
}); 

// add as a dependency in your watch task 
gulp.task('watch', ['tiny'], function() { 
    gulp.watch('static/scss/**/*.scss', ['compass']); 
    gulp.watch('static/js/**/*.js', ['scripts']); 
}); 

오류가 아니라 scripts 작업과 관련이있을 수있다, 그래서 아마에 포함 우리가 볼 수있는 질문. 어쩌면 마지막으로이 문제를 일으키는 다른 작업이 있습니다.

확실한 테스트를 위해 방금 css/file.css을 가리키는 정적 폴더 내에 index.html 파일을 만들었습니다.

bodybackground-color의 간단한 static/scss/file.scss을 만들었습니다. gulpfile의 나머지 부분에 대해 제공 한 동일한 코드 스 니펫을 사용했습니다.

또한 node-static 서버를 만들고 static/ 폴더 아래의 모든 파일을 제공했습니다.

결국 건물 프로세스에 관련된 다른 자동화 된 작업이 있습니까?