gulp - Gulp 3 => Gulp 4 问题

Question

我已将 Gulpfile 转换为 Gulp 4，但我遇到了问题。

当我运行gulp它运行良好并编译样式并上传它们但然后说“连接关闭”并且在我修改文件时不做任何事情。

任何人都知道如何让它继续观看文件并重新运行编译？

(() => {

  'use strict';

  const gulp         = require('gulp');
  const sass         = require('gulp-sass');
  const sourcemaps   = require('gulp-sourcemaps');
  const concat       = require('gulp-concat');
  const autoprefixer = require('gulp-autoprefixer');
  const plumber      = require('gulp-plumber');
  const gutil        = require('gulp-util');
  const sftp         = require('gulp-sftp');
  const path         = require('path');
  const notify       = require('gulp-notify');
  const uglify       = require('gulp-uglify');
  const rename       = require('gulp-rename');



  gulp.task('sass2css', () => {
    return (
      gulp
        .src('src/sass/**/*.{scss,sass}')
        .pipe(plumber({
          errorHandler: function (err) {
            console.log(err);
            this.emit('end');
          }
        }))
        .pipe(sourcemaps.init())
        .pipe(sass({
          indentedSyntax: false,
          outputStyle: 'nested'
        }))
        // .pipe(concat('application.css'))
        .pipe(autoprefixer({
          browsers: ['last 3 versions']
        }))
        .pipe(gulp.dest('dist/styles'))
    )
  })



  gulp.task('deployCSS', () => {
    return gulp.src('dist/styles/*.css')
    .pipe(sftp({
      host: 'xxxxxxxxx',
      auth: 'xxxxxxx',
      remotePath: 'xxxxx/xxxxx/xxxxx/assets/css'
    }));
  })


  // gulp.task('watch', function() {
  //   gulp.watch('src/sass/**/*.{scss,sass}', gulp.series('sass'));
  //   gulp.watch('dist/styles/**/*.css', gulp.series('deployCSS'));
  // })


  // gulp.task('default', gulp.parallel('sass', 'watch'));


  gulp.task('watch', (done) => {
    gulp.watch('src/sass/**/*.{scss,sass}', gulp.series('sass2css'));
    gulp.watch('dist/styles/**/*.css', gulp.series('deployCSS'));
    done();
  })



  exports.default = gulp.series('sass2css', 'deployCSS', 'watch');


  function errorHandler (error) {
    console.log(error.toString());
    this.emit('end');
  }

})();

这是我的终端运行一次时的样子：

[vagrant@precise64] ➜  myproject git:(master) ✗ gulp
[09:07:59] Using gulpfile /vagrant/myproject/gulpfile.js
[09:07:59] Starting 'default'...
[09:07:59] Starting 'sass2css'...
[09:08:02] Finished 'sass2css' after 2.89 s
[09:08:02] Starting 'deployCSS'...
[09:08:02] Authenticating with password.
[09:08:06] gulp-sftp: Uploaded: application.css => xxxxx/xxxxx/xxxxx/assets/css/application.css
[09:08:06] gulp-sftp: 1 file uploaded successfully
[09:08:06] Finished 'deployCSS' after 3.28 s
[09:08:06] Starting 'watch'...
[09:08:06] Finished 'watch' after 34 ms
[09:08:06] Finished 'default' after 6.22 s
[09:08:06] SFTP :: SFTP session closed
[09:08:06] Connection :: end
[09:08:06] Connection :: closed

标签： gulpgulp-sass

Answer 1

gulp.series() 返回一个函数，因此您需要在调用后添加 ()。试试这个：

  gulp.task('watch', (done) => {

    gulp.watch('src/sass/**/*.{scss,sass}').on('change', function (){ 
        gulp.series('sass2css')(); 
    });

    gulp.watch('dist/styles/**/*.css').on('change', function (){
        gulp.series('deployCSS')(); 
    });

    done();

  });