gulp watch任务

时间:2018-05-19 15:13:52

标签: gulp gulp-watch

在使用gulp的监视任务时,我正面临一个'随机'发生的致命错误。

常规设置
我在Windows 10上,使用VMWare托管Debian VM。我有一个网络映射直接到Web服务器上的app文件夹。作为IDE,我使用Atom,我打开了所说的文件夹。这样,我就直接在Web服务器上工作,这样我的许多代码更改都不需要部署步骤。

错误
我的构建任务是由gulp驱动的。让我先说明我面临的错误:

W:\jd5>gulp watch
[16:21:10] Using gulpfile W:\jd5\gulpfile.js
[16:21:10] Starting 'watch'...
[16:21:11] 'watch' errored after 1.35 s
[16:21:11] Error: watch W:\jd5\src\js\vendor\ UNKNOWN
    at _errnoException (util.js:1022:11)
    at FSWatcher.start (fs.js:1374:19)
    at Object.fs.watch (fs.js:1400:11)
    at Gaze._watchDir (W:\jd5\node_modules\gaze\lib\gaze.js:289:30)
    at W:\jd5\node_modules\gaze\lib\gaze.js:358:10
    at iterate (W:\jd5\node_modules\gaze\lib\helper.js:52:5)
    at W:\jd5\node_modules\gaze\lib\helper.js:61:11
    at W:\jd5\node_modules\gaze\lib\gaze.js:420:5
    at iterate (W:\jd5\node_modules\gaze\lib\helper.js:52:5)
    at W:\jd5\node_modules\gaze\lib\helper.js:61:11
events.js:183
      throw er; // Unhandled 'error' event
      ^

关于此错误的随机性:我经常在开始观看时面对它,但有时不会。失败率约为50%。有时我可以在没有它发生的情况下发展一整天。这是一个令人沮丧的错误,因为它完全阻止了我的工作流程,它只提到“未知”。

Gulp任务

这是我目前使用的gulp文件:

/* load plugins */
var gulp = require('gulp');

// fast libsass-based SCSS parser
var sass = require('gulp-sass');
var del = require('del');

/*  note that nano has a built-in auto prefixer, which we will use */
var nano = require('gulp-cssnano');
var gzip = require('gulp-gzip');
var minify = require('gulp-minify');

var babel = require("gulp-babel");
var sourcemaps = require('gulp-sourcemaps');

/* browser definition will be used by auto prefixer */
var myBrowsers = [
  'last 2 versions',
  'safari >= 8'
];

/* delete previously built files */
gulp.task('clean', function(cb) {
  del(['public/css/*.css', 'public/js/**/*.js'], cb);
});

/* STYLES
================================================================================
*/

/* compile SCSS styles into CSS */
gulp.task('styles', function () {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(nano({
      autoprefixer: {
        browsers: myBrowsers,
        add: true
      }
    }))
    .pipe(gzip({
      append: false
    }))
    .pipe(gulp.dest('public/css'));
});


/* SCRIPTS
================================================================================
*/

gulp.task('scripts', function() {
  gulp.start('scripts_global', 'scripts_vendor', 'scripts_modules')
    .on('error', function(err) {
      console.error('Error', err.message);
    });
});

/* src/js/*.js > these are global scripts. minify, gzip and move to public/js/*.js */
gulp.task('scripts_global', function() {
  return gulp.src('src/js/*.js')
    .pipe(minify({
      ext: {
        min: '.min.js'
      }
    }))
    .pipe(gzip({
      append: false
    }))
    .pipe(gulp.dest('public/js/'));
});

/* src/js/vendor/*.js > vendor scripts should already be minimized, so gzip and move to public/js/vendor/*.js */
gulp.task('scripts_vendor', function() {
  return gulp.src('src/js/vendor/*.js')
    .pipe(gzip({
      append: false
    }))
    .pipe(gulp.dest('public/js/vendor/'));
});

/* src/js/modules/*.js > module scripts should be transpiled to systemjs compatible modules, towards public/js/modules/*.js */
gulp.task("scripts_modules", function() {
  return gulp.src("src/js/modules/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(sourcemaps.write('.'))
    .pipe(gzip({
      append: false
    }))
    .pipe(gulp.dest("public/js/modules"));
});

/* default task: first clean, then run styles and scripts build tasks */
gulp.task('default', ['clean'], function() {
  gulp.start('styles', 'scripts');
});


/* watch task to continuously build styles and scripts as they change in src dir */
gulp.task('watch', function() {

  // watch .scss files
  gulp.watch('src/scss/**/*.scss', ['styles']);

  // watch .js files
  gulp.watch('src/js/**/*.js', ['scripts']);

});

由于错误本身并未提供有关可能原因的信息,因此有些推测:

  • 我认为它不太可能是某个文件的权限问题,因为那些文件总是会失败,而不仅仅是有时。
  • 我正在考虑Atom和这个过程同时触摸文件,但没有证据,也不知道如何防止它。 Atom甚至没有打开,有时也会失败。
  • 请注意,在没有监视的情况下运行各个任务(gulp样式,gulp脚本)工作得很好,所以任务本身看起来很好,我更可能在如何链接它们时犯了错误,但我不知道它是什么。

我在Node v8.9.4上。以下是package.json的相关部分:

{
  "name": "",
  "version": "",
  "description": "",
  "author": "F",
  "license": "",
  "devDependencies": {
    "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-cssnano": "^2.1.3",
    "gulp-gzip": "^1.4.0",
    "gulp-minify": "0.0.15",
    "gulp-sass": "^3.2.1",
    "gulp-sourcemaps": "^2.6.0"
  },
  "dependencies": {
    "del": "^2.2.2",
    "eslint": "^4.19.1"
  }
}

0 个答案:

没有答案