Gulp 4 Sass + BrowserSync 注入与 MAMP答案

【问题标题】：Gulp 4 Sass + BrowserSync Injection with MAMPGulp 4 Sass + BrowserSync 注入与 MAMP
【发布时间】：2019-02-27 21:04:57
【问题描述】：

我花了一整天的时间试图弄清楚这一点。我知道 Gulp 4 & BrowserSync: Style Injection? 并尝试了不同的方法。我错过了什么？

我正在尝试让 gulp 将 sass 生成的样式注入浏览器。截至目前，它确实使用生成的 css 打开了一个新选项卡，但在更改时它既不刷新也不注入新生成的样式。我明白了：

[Browsersync] Watching files...
[21:27:36] Starting 'buildStyles'...
[21:27:36] Finished 'buildStyles' after 40 ms
[Browsersync] File event [change] : site/templates/styles/main.css

但它不会注入。这是我的 gulpfile.js：

const { src, dest, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass');
const browsersync = require('browser-sync').create();


const paths = {
    sass: {
        // By using styles/**/*.sass we're telling gulp to check all folders for any sass file
        src: "site/templates/styles/scss/*.scss",
        // Compiled files will end up in whichever folder it's found in (partials are not compiled)
        dest: "site/templates/styles"
    },
    css: {
        src: "site/templates/styles/main.css"
    }
};

function buildStyles(){
    return src(paths.sass.src)
        .pipe(sass())
        .on("error", sass.logError)
        .pipe(dest(paths.sass.dest))
}

function watchFiles(){
    watch(paths.sass.src,{ events: 'all', ignoreInitial: false }, series(buildStyles));
}


function browserSync(done){
    browsersync.init({
        injectChanges: true,
        proxy: "http://client2019.local/",
        port: 8000,
        host: 'client2019.local',
        socket: {
            domain: 'localhost:80'
        },
        files: [
            paths.css.src
        ]
    });
    done();
    //   gulp.watch("./**/*.php").on("change", browserSync.reload);

}

exports.default = parallel(browserSync, watchFiles); // $ gulp
exports.sass = buildStyles;
exports.watch = watchFiles;
exports.build = series(buildStyles); // $ gulp build

我错过了什么？

【问题讨论】：

标签： javascript sass gulp mamp

【解决方案1】：

我不知道我是否完全理解你想要什么。

要使用 BrowserSync 自动刷新浏览器，在保存您最后的更改后，我在我的 gulp 文件中使用此代码：

    var paths = {
        styles: {
            src: "./src/styles/scss/**/*.scss",
            dest: "./view/styles"
        },
        htmls: {
            src: "./src/**/*.html",
            dest: "./view"
        }
    };

    const styles= () => {
            return...
        }

    const html= () => {
                return...
            }

    const watch = () => {
            browserSync.init({
                server: {
                    baseDir: "./view"
                }
            });
            gulp.watch(paths.styles.src, style);
            gulp.watch(paths.htmls.src, html);
            gulp.watch("src/**/*.html").on('change', browserSync.reload);
        };

    exports.style = style;
    exports.html = html;
    exports.watch = watch;

    var build = gulp.parallel(style, html, watch);

    gulp.task('default', working);

然后我只需执行gulp 进行构建并观看自动重新加载。

【讨论】：