1

//将gulp文件导入变量

    const { src , dest , watch , series , parallel } = require('gulp');
    const autoprefixer = require('autoprefixer');
    const cssnano = require('cssnano');
    const concat = require('gulp-concat');
    const postcss = require('gulp-postcss');
    const replace = require('gulp-replace');
    const sass = require('gulp-sass');
    const sourcemaps = require('gulp-sourcemaps');
    const uglify = require('gulp-uglify');
    const browserSync = require ('browser-sync').create();

// 我的项目文件夹中的文件路径变量

    const files = {
    scsspath:'assets/scss/**/*.scss' , 
    jspath:'assets/js/**/*.js'}

//萨斯任务

    function scssTask(){
    return src(files.scsspath)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('assets/css'))
    .pipe(browsersync.stream());}

//JsTask

    function jsTask(){
    return src(files.jspath)
   .pipe(concat('all.js'))
   .pipe(uglify())
   .pipe(dest('assets/js')).pipe(browsersync.stream());}

//监视任务

   function watchTask(){
   watch([files.scsspath , files.jspath], parallel(scssTask,jsTask));}

//DefaultTask //我不知道如何在 gulp-4 中使用 browser-sync

   exports.default = series(parallel(scssTask,jsTask) , cashBustTask , 
   watchTask,browsersync);
4

3 回答 3

0

我找到了升级 gulp 4 的指南，它解释了需要使用 gulp.series 或 gulp.parallel。例子：

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browserSyncReload', gulp.series( function(done) {    
  browserSync.reload();
  done();
}));

gulp.task('default', gulp.series( function(done) {    
  browserSync.init({
      notify: false,
      proxy: "127.0.0.1:5003/nl"
  });
  gulp.watch("app/templates/**/*.", gulp.series('browserSyncReload'));
  gulp.watch("app/static/**/*.*", gulp.series('browserSyncReload'));
  done();
}));
于 2020-10-28T13:55:54.973 回答
0

为浏览器同步创建一个单独的任务。这是我如何设置的示例：

const bs = require('browser-sync').create();
// Other inputs used with browser-sync
const { src, dest, watch } = require('gulp');
const sass = require('gulp-sass');

function browserSync() {
  // Run serveSass function when starting the dev server to make sure the SCSS & dev CSS are the same
  serveSass();

  bs.init({
    // Dev server will run at localhost:8080
    port: 8080,
    server: {
      // I'm using 'src' as my base directory
      baseDir: 'src',
    },
  });

  // These watch for changes to files and reload in the browser
  watch('src/*.html').on('change', bs.reload);
  watch('src/scss/*.scss', serveSass);
  watch('src/js/*.js').on('change', bs.reload);
}

// This compiles Sass when running browser-sync and reloads the CSS
function serveSass() {
  // My dev Sass files are found in 'src/scss/'
  return src('src/scss/*.scss')
    .pipe(sass())
    // My dev CSS files are found in 'src/css/'
    .pipe(dest('src/css))
    .pipe(bs.stream());
}

// Then I run 'gulp serve' in the terminal to start browser-sync and my dev server
exports.serve = browserSync;

如果您想要更多上下文，我的完整 Gulp 设置在这里。

于 2019-06-10T16:03:42.563 回答
0

快速解决方案：

添加一个函数来触发 BrowserSync：

function reload(){
    browserSync.reload();
}

将您的功能修改watchTask()为：

function watchTask(){
    browserSync.init({
        server: { baseDir: "./dist" }
    });
    gulp.watch([files.scsspath , files.jspath], parallel(scssTask,jsTask,reload));
}

将您的修改exports为：

exports.default = watchTask;
于 2019-07-23T15:31:56.740 回答