javascript - gulp 间歇性地创建目标目录

Question

为什么 gulp 有时只创建子目录，即使源文件/目录没有更改并且我只是重新运行 gulp？

有时我的 gulpfile 工作得很好......就像在创建构建目录后第一次运行它一样:

PS C:\Users\RobertoTomás\OneDrive\Público\projects\Overwatch> gulp
[09:56:11] Requiring external module babel-register
[09:56:13] Using gulpfile ~\OneDrive\Público\projects\Overwatch\gulpfile.babel.js
[09:56:13] Starting 'default'...
[09:56:13] Starting 'clean'...
[09:56:13] Starting 'root'...
[09:56:13] Finished 'root' after 6.23 ms
[09:56:13] Starting 'templates'...
[09:56:13] Finished 'templates' after 1.68 ms
[09:56:13] Starting 'css'...
[09:56:13] Finished 'css' after 7.43 ms
[09:56:13] Starting 'sass'...
[09:56:13] Finished 'sass' after 6.96 ms
[09:56:13] Starting 'scripts'...
[09:56:13] Finished 'scripts' after 3.88 ms
[09:56:13] Finished 'default' after 39 ms
[09:56:13] Finished 'clean' after 91 ms
[09:56:14] File dev\styles\bootstrap-theme.css found.
[09:56:14] Processed media queries:
[09:56:14]   @media (max-width: 767px)
[09:56:14] File dev\styles\bootstrap-theme.css created.
[09:56:14] File dev\styles\bootstrap-theme.min.css found.
[09:56:14] Processed media queries:
[09:56:14]   @media (max-width:767px)
[09:56:14] File dev\styles\bootstrap-theme.min.css created.
[09:56:15] File dev\styles\bootstrap.css found.
[09:56:15] Processed media queries:
[09:56:15]   @media screen and (-webkit-min-device-pixel-ratio: 0)
[09:56:15]   @media (max-device-width: 480px) and (orientation: landscape)
[09:56:15]   @media all and (transform-3d), (-webkit-transform-3d)
[09:56:15]   @media (min-width: 768px)
[09:56:15]   @media screen and (min-width: 768px)
[09:56:15]   @media (min-width: 768px) and (max-width: 991px)
[09:56:15]   @media (min-width: 992px)
[09:56:15]   @media (min-width: 992px) and (max-width: 1199px)
[09:56:15]   @media (min-width: 1200px)
[09:56:15]   @media screen and (max-width: 767px)
[09:56:15]   @media (max-width: 767px)
[09:56:15]   @media print
[09:56:15] File dev\styles\bootstrap.css created.
[09:56:15] File dev\styles\bootstrap.min.css found.
[09:56:15] Processed media queries:
[09:56:15]   @media screen and (-webkit-min-device-pixel-ratio:0)
[09:56:15]   @media (max-device-width:480px) and (orientation:landscape)
[09:56:15]   @media all and (transform-3d),(-webkit-transform-3d)
[09:56:15]   @media (min-width:768px)
[09:56:15]   @media screen and (min-width:768px)
[09:56:15]   @media (min-width:768px) and (max-width:991px)
[09:56:15]   @media (min-width:992px)
[09:56:15]   @media (min-width:992px) and (max-width:1199px)
[09:56:15]   @media (min-width:1200px)
[09:56:15]   @media screen and (max-width:767px)
[09:56:15]   @media (max-width:767px)
[09:56:15]   @media print
[09:56:15] File dev\styles\bootstrap.min.css created.
[09:56:16] File dev\styles\main.css found.
[09:56:16] File dev\styles\main.css created.
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.9:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.9:3001
 ------------------------------------
[BS] Serving files from: ./build/
[BS] 5 files changed (bootstrap-theme.min.css, bootstrap-theme.min.min.css, bootstrap.min.css, bootstrap.min.min.css, ma
in.min.css)
[BS] 7 files changed (404.html, index.html, browserconfig.xml, apple-touch-icon.png, tile-wide.png, tile.png, favicon.ic
o)
[BS] 5 files changed (bootstrap.min.js, bootstrap.min.min.js, jquery-3.1.0.min.js, main.min.js, modernizr-2.8.3-respond-
1.4.2.min.min.js)

但大多数时候(但并非总是)，我在 styles 子目录中遇到错误:

PS C:\Users\RobertoTomás\OneDrive\Público\projects\Overwatch> gulp
[09:57:31] Requiring external module babel-register
[09:57:33] Using gulpfile ~\OneDrive\Público\projects\Overwatch\gulpfile.babel.js
[09:57:33] Starting 'default'...
[09:57:33] Starting 'clean'...
[09:57:33] Starting 'root'...
[09:57:33] Finished 'root' after 6.26 ms
[09:57:33] Starting 'templates'...
[09:57:33] Finished 'templates' after 1.77 ms
[09:57:33] Starting 'css'...
[09:57:33] Finished 'css' after 7.78 ms
[09:57:33] Starting 'sass'...
[09:57:33] Finished 'sass' after 6.5 ms
[09:57:33] Starting 'scripts'...
[09:57:33] Finished 'scripts' after 3.82 ms
[09:57:33] Finished 'default' after 39 ms
[09:57:34] File dev\styles\bootstrap-theme.css found.
[09:57:34] Processed media queries:
[09:57:34]   @media (max-width: 767px)
[09:57:34] File dev\styles\bootstrap-theme.css created.
[09:57:34] File dev\styles\bootstrap-theme.min.css found.
[09:57:34] Processed media queries:
[09:57:34]   @media (max-width:767px)
[09:57:34] File dev\styles\bootstrap-theme.min.css created.
[09:57:35] File dev\styles\bootstrap.css found.
[09:57:35] Processed media queries:
[09:57:35]   @media screen and (-webkit-min-device-pixel-ratio: 0)
[09:57:35]   @media (max-device-width: 480px) and (orientation: landscape)
[09:57:35]   @media all and (transform-3d), (-webkit-transform-3d)
[09:57:35]   @media (min-width: 768px)
[09:57:35]   @media screen and (min-width: 768px)
[09:57:35]   @media (min-width: 768px) and (max-width: 991px)
[09:57:35]   @media (min-width: 992px)
[09:57:35]   @media (min-width: 992px) and (max-width: 1199px)
[09:57:35]   @media (min-width: 1200px)
[09:57:35]   @media screen and (max-width: 767px)
[09:57:35]   @media (max-width: 767px)
[09:57:35]   @media print
[09:57:35] File dev\styles\bootstrap.css created.
[09:57:36] File dev\styles\bootstrap.min.css found.
[09:57:36] Processed media queries:
[09:57:36]   @media screen and (-webkit-min-device-pixel-ratio:0)
[09:57:36]   @media (max-device-width:480px) and (orientation:landscape)
[09:57:36]   @media all and (transform-3d),(-webkit-transform-3d)
[09:57:36]   @media (min-width:768px)
[09:57:36]   @media screen and (min-width:768px)
[09:57:36]   @media (min-width:768px) and (max-width:991px)
[09:57:36]   @media (min-width:992px)
[09:57:36]   @media (min-width:992px) and (max-width:1199px)
[09:57:36]   @media (min-width:1200px)
[09:57:36]   @media screen and (max-width:767px)
[09:57:36]   @media (max-width:767px)
[09:57:36]   @media print
[09:57:36] File dev\styles\bootstrap.min.css created.
[09:57:36] File dev\styles\main.css found.
[09:57:36] File dev\styles\main.css created.
[09:57:36] Plumber found unhandled error:
 Error: ENOENT: no such file or directory, chmod 'C:\Users\RobertoTomás\OneDrive\Público\projects\Overwatch\build\styles
\bootstrap-theme.min.css'
[09:57:36] Plumber found unhandled error:
 Error: ENOENT: no such file or directory, chmod 'C:\Users\RobertoTomás\OneDrive\Público\projects\Overwatch\build\styles
\bootstrap-theme.min.css'
[09:57:36] Finished 'clean' after 2.94 s
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.9:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.9:3001
 ------------------------------------
[BS] Serving files from: ./build/
[BS] 7 files changed (404.html, index.html, browserconfig.xml, apple-touch-icon.png, tile-wide.png, tile.png, favicon.ic
o)
[BS] 5 files changed (bootstrap.min.js, bootstrap.min.min.js, jquery-3.1.0.min.js, main.min.js, modernizr-2.8.3-respond-
1.4.2.min.min.js)

整个 styles 子目录不会在 build 中创建。

这是我的 gulp 文件:

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var autoPrefixer = require('gulp-autoprefixer');
//if node version is lower than v.0.1.2
//require('es6-promise').polyfill();
var cssComb = require('gulp-csscomb');
var cmq = require('gulp-merge-media-queries');
var cleanCss = require('gulp-clean-css');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');

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

var clean = require('gulp-clean');

gulp.task('clean', function (done) {
    gulp.src('build/*', { read: false })
        .pipe(clean())
    done()
})

gulp.task('sass', function (done) {
    gulp.src(['dev/styles/**/*.scss', 'dev/styles/**/*.sass'])
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoPrefixer())
        .pipe(cssComb())
        .pipe(cmq({ log: true }))
        .pipe(gulp.dest('build/styles'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(cleanCss())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('build/styles'))
        .pipe(reload({ stream: true }))
    done()
});
gulp.task('css', function (done) {
    gulp.src(['dev/styles/**/*.css'])
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(autoPrefixer())
        .pipe(cssComb())
        .pipe(cmq({ log: true }))
        .pipe(gulp.dest('build/styles'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(cleanCss())
        .pipe(gulp.dest('build/styles'))
        .pipe(reload({ stream: true }))
    done()
});
gulp.task('scripts', function (done) {
    gulp.src(['dev/scripts/**/*.js'])
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(browserify())
        .pipe(gulp.dest('build/scripts'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('build/scripts'))
        .pipe(reload({ stream: true }))
    done()
});
gulp.task('templates', function (done) {
    gulp.src(['dev/hypermedia/**/*.html'])
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(gulp.dest('build/hypermedia/'))
        .pipe(reload({ stream: true }))
    done()
});
gulp.task('root', function (done) {
    gulp.src(['dev/**/*.html', 'dev/**/*.xml', 'dev/**/*.png', 'dev/**/*.ico'])
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(gulp.dest('build/'))
        .pipe(reload({ stream: true }))
    done()
});

gulp.task('all', function (done) {
    gulp.start('root', 'templates', 'css', 'sass', 'scripts')
    done()
})

gulp.task('default', ['clean', 'root', 'templates', 'css', 'sass', 'scripts'], function (done) {
    gulp.watch('dev/scripts/**/*.js', ['scripts']);
    gulp.watch('dev/styles/**/*.css', ['css']);
    gulp.watch(['dev/styles/**/*.scss', 'dev/styles/**/*.sass'], ['sass']);
    gulp.watch('hypermedia/**/*.html', ['templates']);
    gulp.watch(['dev/**/*.html', 'dev/**/*.xml', 'dev/**/*.png', 'dev/**/*.ico'], ['root']);
    browserSync.init({ server: './build/' });
    done()
});

这特别奇怪，因为我只删除了 default 任务开头的样式目录(实际上是依赖项)..并且我立即重新创建它(仍然处于依赖项中。它应该仍然在那里。

我还尝试通过 Promise 或一系列 .on('end' 调用，带或不带 done() 回调来实现这一点，但我也没有找到解决方案。

额外问题:

如何将 .min.js 与 .js 分开匹配，这样我就不会处理 3rdparty js 文件？我很乐意使用 vendor 子目录，但我不确定如何包含用于处理除了 vendor 的所有子目录。

Answer 1

<强>1。您不会返回您的信息流。

您需要在每个任务中执行此操作:

gulp.task('sass',function(){
   return gulp.src(['dev/styles/**/*.scss','dev/styles/**/*.sass'])

您还需要删除所有无意义的 done()您在代码中散布的回调。

进一步阅读:Async task support , Does a gulp task have to return anything?

<强>2。您正在并行运行所有任务。

gulp.task('default', ['clean', 'root', 'templates', 'css', 'sass', 'scripts'], function (done) {

以上内容无法运行clean , root , templates , css , sass和scripts为了。它同时运行它们。这就是为什么你会得到 ENOENT错误。您正在删除 clean 中的文件任务同时其他任务正在创建它们。

针对您的情况，最好的方法可能是使用 run-sequence :

var runSequence = require('run-sequence');

gulp.task('watch', function() {
  gulp.watch('dev/scripts/**/*.js', ['scripts']);
  gulp.watch('dev/styles/**/*.css', ['css']);
  gulp.watch(['dev/styles/**/*.scss', 'dev/styles/**/*.sass'], ['sass']);
  gulp.watch('hypermedia/**/*.html', ['templates']);
  gulp.watch(['dev/**/*.html', 'dev/**/*.xml', 'dev/**/*.png', 'dev/**/*.ico'], ['root']);
});

gulp.task('serve', function() {
  browserSync.init({ server: './build/' });
});

gulp.task('default', function(done) {
  runSequence('clean', ['root', 'templates', 'css', 'sass', 'scripts'], 'watch', 'serve', done);
});

以上确保了以下任务顺序:

1. clean
2. root , templates , css , sass , scripts并行
3. watch
4. serve

进一步阅读:How to run Gulp tasks sequentially one after the other