微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

browserSync 停止注入 css

如何解决browserSync 停止注入 css

我已经使用这个 gulp 文件几个月了,没有任何问题。但出乎意料的是,它停止在我所有的项目中注入 css。

我尝试重新安装所有软件包,但没有任何变化。我怎样才能找出造成这种情况的原因?

import { src,dest,watch,series,parallel } from 'gulp';
import yargs from 'yargs';
import sass from 'gulp-sass';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'autoprefixer';
import del from 'del';
import webpack from 'webpack-stream';
import named from 'vinyl-named';
import browserSync from 'browser-sync';
import info from './package.json';

const PRODUCTION = yargs.argv.prod;
const server = browserSync.create();


// Live load and reload changes
export const serve = done => {
  server.init({
    port: 3000,server: true
  });
  done();
};

export const reload = done => {
  server.reload();
  done();
};


// Clean dist folder
export const clean = () => del(['dist']);


// Bundle styles
export const styles = () => {
  return src(['src/scss/main.scss'])
  .pipe(gulpif(!PRODUCTION,sourcemaps.init()))
  .pipe(sass().on('error',sass.logError))
  .pipe(gulpif(PRODUCTION,postcss([ autoprefixer ])))
  .pipe(gulpif(PRODUCTION,cleanCss({compatibility:'ie8'})))
  .pipe(gulpif(!PRODUCTION,sourcemaps.write()))
  .pipe(dest('dist/css'))
  .pipe(browserSync.stream());
}


// copy new folders to dist
export const copy = () => {
  return src(['src/**/*','!src/{images,js,scss}',scss}/**/*'])
  .pipe(dest('dist'));
}


// Bundle scripts
export const scripts = () => {
...
}


// Watch for changes
export const watchForChanges = () => {
  watch('src/scss/**/*.scss',styles);
  watch('src/images/**/*.{jpg,jpeg,png,svg,gif}',series( reload));
  watch(['src/**/*','!src/{js,scss}/**/*'],series(copy,reload));
  watch('src/js/**/*.js',series(scripts,reload));
  watch('**/*.PHP',reload);
  watch('**/*.html',reload);
}


// Tasks
export const dev = series(clean,parallel(styles,copy,scripts),serve,watchForChanges);
export const build = series(clean,scripts));
export default dev;

CSS get 是这样加载的: <link rel="stylesheet" type="text/css" href="dist/css/main.css">

终端输出: 23:11:38 开始“风格”... 23:11:38 33 毫秒后完成“样式”

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。