Question

我正在对JS文件进行编辑，但是我的gulp任务不是实时更新它们或编写新代码。它曾经确实起作用，但突然间它停止了。

我尝试将gulp升级到版本4，但这只会造成更多问题，并且无法解决JS无法正常工作的事实。

添加了jshint以查看是否抛出了任何错误，但看起来也不错。

'use strict';

const

  // source and build folders
  dir = {
    src         : './src/',
    build       : './'
  },

  // Gulp and plugins
  gulp          = require('gulp'),
  gutil         = require('gulp-util'),
  newer         = require('gulp-newer'),
  imagemin      = require('gulp-imagemin'),
  sass          = require('gulp-sass'),
  postcss       = require('gulp-postcss'),
  deporder      = require('gulp-deporder'),
  concat        = require('gulp-concat'),
  stripdebug    = require('gulp-strip-debug'),
  uglify        = require('gulp-uglify'),
  ftp           = require( 'vinyl-ftp' ),
  jshint        = require('gulp-jshint');

  // configure the jshint task
gulp.task('jshint', function() {
  return gulp.src(dir.src + '/assets/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

// Browser-sync
var browsersync = false;

//Dev FTP Connections
function getDevFtpConnection() {
    return ftp.create({
        host: '109.169.64.171',
        // port: 20,
        user: 'admin@powdersky.net',
        password: '=Lx0$Zf=a}ZW',
        parallel: 5,
        log: gutil.log
    });
}

//Deploy to dev
gulp.task('ftp-deploy-dev', function() {
    var conn = getDevFtpConnection();
    return gulp.src([dir.build + '/**/**/**/*',
      "!./{src/,src/**/*}",
      "!./{node_modules/,node_modules/**/**/**/*}",
      "!./gulpfile.js",
      "!./package-lock.json",
      "!./package.json"], { base: '.', buffer: false })
        .pipe( conn.newer( '/inthesnow.com/wp-content/themes/inthesnow/' ) ) // only upload newer files
        .pipe( conn.dest( '/inthesnow.com/wp-content/themes/inthesnow/' ) )
    ;
});


// PHP settings
const php = {
  src           : dir.src + 'templates/**/*.php',
  build         : dir.build
};

// copy pugins files
gulp.task('php', () => {
    return gulp.src([
      dir.build + '/includes/**/**/**/*.php',
      dir.build + '*.php'
    ])
    .pipe(newer(dir.build))
    .pipe(gulp.dest(dir.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});
gulp.task('php-templates', () => {
    return gulp.src([
      dir.build + '*.php'
    ])
    .pipe(newer(dir.build))
    .pipe(gulp.dest(dir.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});


// image settings
const images = {
  src         : dir.src + 'assets/images/**/*',
  build       : dir.build + 'assets/images/'
};

// image processing
gulp.task('images', () => {
  return gulp.src(images.src)
    .pipe(newer(images.build))
    .pipe(imagemin())
    .pipe(gulp.dest(images.build));
});

// CSS settings
var css = {
  src         : dir.src + 'assets/scss/style.scss',
  watch       : dir.src + 'assets/scss/**/**/*',
  build       : dir.build,
  sassOpts: {
    outputStyle     : 'compressed',
    imagePath       : images.build,
    precision       : 3,
    errLogToConsole : true
  },
  processors: [
    require('postcss-assets')({
      loadPaths: ['images/'],
      basePath: dir.build,
      baseUrl: '/wp-content/themes/inthesnow/'
    }),
    require('autoprefixer')({
      browsers: ['last 2 versions', '> 2%']
    }),
    require('css-mqpacker'),
    require('cssnano'),
  ]
};

// CSS processing
gulp.task('css', ['images'], () => {
  return gulp.src([
    css.src,
  ])
    .pipe(sass(css.sassOpts))
    .pipe(postcss(css.processors))
    .pipe(concat('style.css'))
    .pipe(gulp.dest(css.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});

// Vendor JavaScript settings
const build_vendor_js = {
  src         : dir.src + 'assets/js/vendor/*',
  build       : dir.build + 'assets/js/',
  filename    : 'jquery.vendor.js'
};

// JavaScript processing
gulp.task('build_vendor_js', () => {

  return gulp.src(build_vendor_js.src)
    .pipe(deporder())
    .pipe(concat(build_vendor_js.filename))
    .pipe(stripdebug())
    .pipe(uglify())
    .pipe(gulp.dest(build_vendor_js.build))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());

});

// General JavaScript processing
gulp.task('build_general_js', () => {

    return gulp.src([
      // dir.build + 'includes/plugins/**/assets/js/*.js',
      dir.src + 'assets/js/*',
    ])
    .pipe(deporder())
    // .pipe(concat('jquery.functions.js'))
    .pipe(stripdebug())
    .pipe(uglify())
    .pipe(gulp.dest(dir.build + 'assets/js/'))
    .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());

});

// run all tasks
gulp.task('build', ['css', 'build_vendor_js','build_general_js']);


// Browsersync options
const syncOpts = {
  proxy       : 'http://inthesnow',
  reloadOnRestart: true,
  ui: {
    port: 8080
  }
};

// browser-sync
gulp.task('browsersync', () => {
  if (browsersync === false) {
    browsersync = require('browser-sync').create();
    browsersync.init(syncOpts);
  }
});

// watch for file changes
gulp.task('watch', ['browsersync'], () => {

  // page changes
  // gulp.watch(php.src, ['php'], browsersync ? browsersync.reload : {});
  // gulp.watch(php.src, ['php-templates'], browsersync ? browsersync.reload : {});

  // image changes
  gulp.watch(images.src, ['images']);

    // CSS changes
  gulp.watch(css.watch, ['css']);

  // JavaScript main changes
  gulp.watch([ dir.src + '/assets/js/*.js' ], ['jshint', 'build_general_js']);

  //vendor
  gulp.watch(build_vendor_js.src, ['build_vendor_js']);

});

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

对我来说似乎正确，但显然不正确！我假设某些更新可能已经触发了某些内容，但却找不到可能的模块，CSS任务也运行良好。

非常感谢您的帮助。

Answer 1

这真是我很傻，我没注意到stripdebug模块是我的警报/控制台。日志不起作用！

菜鸟错误

Javascript任务处理，但不更新新代码

1 个答案: