在 Gulp 上使用 Nodemon 和 BrowserSync

Question

我在普通的 HTML 项目中有gulpfile.js，如下所示。现在，我正在另一个项目上创建一个 Node/Express 项目，我想在 Gulp 上同时使用 Nodemon/Browsersync。

顺便说一句，我在提交此问题之前尝试过someother 示例，但我没有成功。

那么，我应该如何设置我的gulpfile.js 以在 Gulp 上使用 Nodemon/Browsersync？

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();
var sourcemaps  = require("gulp-sourcemaps");

// Error Handling
var gulp_src = gulp.src;
gulp.src = function() {
  return gulp_src.apply(gulp, arguments)
    .pipe(plumber(function(error) {
      // Output an error message
      gutil.log(gutil.colors.red('Error (' + error.plugin + '): ' + error.message));
      // emit the end event, to properly end the task
      this.emit('end');
    })
  );
};

// Styles
gulp.task('styles', function() {
  return gulp.src('./src/sass/*.scss')
  .pipe(sass())
  .pipe(autoprefixer('last 2 versions'))
  .pipe(sourcemaps.init())
  .pipe(gulp.dest('./dist/css/'))
  .pipe(cleanCSS())
  .pipe(sourcemaps.write())
  .pipe(concat("main.css", {newLine: ""}))
  .pipe(gulp.dest('./dist/css/'))
  .pipe(browserSync.reload({ stream: true }))
});

// Scripts
gulp.task('scripts', function() {
  return gulp.src('./src/js/*.js')
    .pipe(concat('main.js'))
    .pipe(gulp.dest('./dist/js/'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js/'));
});

// BrowserSync
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'
    },
    open: false,
    // browser: "Google Chrome",
    notify: false,
    // notify: {
    //     styles: {
    //         top: 'auto',
    //         bottom: '0'
    //     }
    // },
    snippetOptions: {
      rule: {
        match: /<\/body>/i,
        fn: function (snippet, match) {
          return snippet + match;
        }
      }
    }
  })
})

// Watch task
gulp.task('watch', ['browserSync'], function() {
  gulp.watch('./src/sass/*.scss', ['styles']);
  gulp.watch('./*.html', browserSync.reload);
  gulp.watch('./src/js/*.js', ['scripts']);
});

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

Answer 1

我用 gulpfile.js 解决了这个问题：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var sourcemaps = require("gulp-sourcemaps");
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
var nodemon = require('gulp-nodemon');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

// Javascripts
gulp.task('js', function() {
  return gulp.src('./public/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('main.min.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./public/js/'))
    .pipe(reload({stream:true}));
});


// Stylesheets
gulp.task('sass', function() {
  return gulp.src('./public/sass/main.scss')
    .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer('last 2 versions'))
        .pipe(sourcemaps.init())
      .pipe(cleanCSS())
    .pipe(gulp.dest('./public/css/'))
    .pipe(reload({stream:true}));
});

// Nodemon
gulp.task('nodemon', function (cb) {
  var called = false;
  return nodemon({
    script: './bin/www',
    ext: '.js .ejs',
    ignore: [
      'public/**/*.js',
      'node_modules/**/*.js'
    ],
    env: {
      'NODE_ENV': 'development',
      'PORT': 8888
    },
  }).on('start', function () {
    if (!called) {
      called = true;
      cb();
    }
  }).on('restart', function () {
    console.log('Nodemon restarted!');
  });
});

// BrowserSync
gulp.task('browser-sync', ['nodemon'], function() {
  browserSync.init({
    proxy: "localhost:8888",
        open: false,
        snippetOptions: {
            rule: {
                match: /<\/body>/i,
                fn: function (snippet, match) {
                    return snippet + match;
                }
            }
        },
        // browser: "Google Chrome",
    notify: true
    // notify: {
    //     styles: {
    //         top: 'auto',
    //         bottom: '0'
    //     }
    // }
  });
});

// Build
gulp.task('build', ['js', 'sass']);

// Default
gulp.task('default', ['sass', 'js', 'browser-sync'], function () {
  gulp.watch('./public/sass/**/*.scss', ['sass']);
  gulp.watch('./public/js/**/*.js', ['js']);
  gulp.watch('./views/**/*.ejs', reload);
});

耶！ ?