使用browsersync的gulp-sass注入不起作用

时间:2017-06-07 01:33:22

标签: gulp

# WISHFUL THINKING: without an explicit iteration variable, define $_
# implicitly, as with the ForEach-Object *cmdlet*.
foreach ($csv) {
  mkdir ($inc = $i++)
  Copy-Item -Path $_.FileLocation -destination c:\users\bford.$inc -Recurse
}

如何使上面的代码有效?脚本和html部分工作,但scss部分没有,当scss文件更改时,样式任务有开始和结束没有错误,html文件有body标签,但浏览器不注入新的css文件。

1 个答案:

答案 0 :(得分:0)

检查此示例,它可以帮助您在路径中进行一些调整:

/**
 * This example:
 *  Uses the built-in BrowserSync server for HTML files
 *  Watches & compiles SASS files
 *  Watches & injects CSS files
 */
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var gulp        = require('gulp');
var sass        = require('gulp-sass');
var filter      = require('gulp-filter');

// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

// Sass task, will run when any SCSS files change.
gulp.task('sass', function () {
    return gulp.src('scss/styles.scss')
        .pipe(sass({includePaths: ['scss']})) // compile sass
        .pipe(gulp.dest('css')) // write to css dir
        .pipe(filter('**/*.css')) // filter the stream to ensure only CSS files passed.
        .pipe(reload({stream:true})); // inject into browsers
});

// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
});