javascript - Gulp 任务运行缓慢

Question

我的 gulp 构建的性能很差。

节点 v0.10.29Windows 8.1 x64

gulp 文件:

// based off: https://github.com/kriasoft/SPA-Seed.Front-end/blob/master/gulpfile.js

var gulp = require('gulp');
var gulpif = require('gulp-if');
var gutil = require('gulp-util');
var rimraf = require('rimraf');
var tsc = require('gulp-typescript-compiler');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var es = require('event-stream');
var plumber = require('gulp-plumber');
var path = require('path');
var argv = require('yargs')
    .default('target', 'local')
    .argv;

// a cache for Gulp tasks
var task = {};

// object used to help define source locations
var sources = {};

sources.commonIgnore = [
    '!vendor{,/**}',
    '!node_modules{,/**}',
    '!gulpfile.js'
]

var isLocal = argv.target === 'local';
var isBeta = argv.target === 'beta';
var isProduction = argv.target === 'production';

var destRoot = '../dist';
var destPath = path.join(destRoot, argv.target);

var typescriptOptions = {
    sourcemap: isLocal
};

// by default, only uglify if not local
var isUgly = !isLocal;

// if the "ugly" switch was included, always uglify
if (argv.ugly) {
    isUgly = true;
};

gulp.task('clean', function (cb) {
    rimraf(destPath, cb);
});

// Copy file types that do not require compilation
// or other build step (such as uglify)
sources.includes = [
    '**/*.htm*',
    '**/*.woff',
    '**/*.otf',
    '**/*.eot',
    '**/*.ttf'];
gulp.task('includes', task.includes = function () {
    var includeSources = sources.includes.concat(sources.commonIgnore);
    return gulp.src(includeSources)
        .pipe(gulp.dest(destPath));
});
gulp.task('includes-clean', ['clean'], task.includes);

// Copy vendor specific files
gulp.task('vendor', task.vendor = function () {
    return gulp.src(['vendor/**'])
        .pipe(gulp.dest(destPath + '/vendor'));
});
gulp.task('vendor-clean', ['clean'], task.vendor);

// Copy image files
sources.images = [
    '**/*.jpg',
    '**/*.png',
    '**/*.svg'];
gulp.task('images', task.images = function () {
    var imageSources = sources.images.concat(sources.commonIgnore);

    // TODO: compress images
    return gulp.src(imageSources)
        .pipe(gulp.dest(destPath));
});
gulp.task('images-clean', ['clean'], task.images);

// Copy script files
sources.typescript = ['**/*.ts'];
sources.javascript = ['**/*.js'];
gulp.task('scripts', task.scripts = function () {
    var typescriptSources = sources.typescript.concat(sources.commonIgnore);
    var javascriptSources = sources.javascript.concat(sources.commonIgnore);

    return es.concat(
        gulp.src(typescriptSources)
        .pipe(gulpif(isLocal, gulp.dest(destPath)))
        .pipe(plumber())
        .pipe(tsc(typescriptOptions))
        .pipe(gulpif(isUgly, uglify()))
        .pipe(gulp.dest(destPath)),

        gulp.src(javascriptSources)
        .pipe(plumber())
        .pipe(gulpif(isUgly, uglify()))
        .pipe(gulp.dest(destPath))
    );
});

gulp.task('scripts-clean', ['clean'], task.scripts);

// Copy style files
sources.sass = ['**/*.scss'];
sources.css = ['**/*.css'];
gulp.task('styles', task.styles = function () {
    var sassSources = sources.sass.concat(sources.commonIgnore);
    var cssSources = sources.css.concat(sources.commonIgnore);

    return es.concat(

        gulp.src(sassSources)
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest(destPath)),

        gulp.src(cssSources)
        .pipe(gulp.dest(destPath))
    );
});
gulp.task('styles-clean', ['clean'], task.styles);

gulp.task('watch', task.watch = function () {

    var sassSources = sources.sass.concat(sources.commonIgnore);
    gulp.watch(sassSources, ['styles']);

    var cssSources = sources.css.concat(sources.commonIgnore);
    gulp.watch(cssSources, ['styles']);

    var typescriptSources = sources.typescript.concat(sources.commonIgnore);
    gulp.watch(typescriptSources, ['scripts']);

    var javascriptSources = sources.javascript.concat(sources.commonIgnore);
    gulp.watch(javascriptSources, ['scripts']);

    var imageSources = sources.images.concat(sources.commonIgnore);
    gulp.watch(imageSources, ['images']);

    var includeSources = sources.includes.concat(sources.commonIgnore);
    gulp.watch(includeSources, ['includes']);

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

    // Watch for changes in 'compiled' files
    gulp.watch(destPath + '/**', function (file) {
        var lr = require('gulp-livereload');
        gutil.log('File changed: ' + gutil.colors.magenta(file.path));
        lr.changed(file.path);
    });
});

gulp.task('build', [
    'includes-clean',
    'vendor-clean',
    'images-clean',
    'styles-clean',
    'scripts-clean']);

// launch a lightweight HTTP Server
gulp.task('run', ['build'], function (next) {
    var url = require('url'),
        fileServer = require('ecstatic')({ root: destPath, cache: 'no-cache', showDir: true });

    getAvailablePort(8080, function (port) {
        require('http').createServer()
            .on('request', function (req, res) {
                fileServer(req, res);
            })
            .listen(port, function () {
                gutil.log('Server is listening on ' + gutil.colors.magenta('http://localhost:' + port + '/'));
                next();
            });
    });
});

function getAvailablePort(startingPort, cb) {
    var server = require('http').createServer();
    var port = startingPort;

    server.on('error', function (err) {
        getAvailablePort(port + 1, cb);
    });

    server.listen(port, function (err) {
        server.once('close', function () {
            cb(port);
        });
        server.close();
    });
}

gulp.task('watch', ['run'], task.watch);

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

Package.json:

{
  "name": "buildTest",
  "version": "0.0.1",
  "devDependencies": {
    "cordova-lib": "^0.21.6",
    "ecstatic": "^0.5.4",
    "event-stream": "^3.1.5",
    "gulp": "^3.8.5",
    "gulp-debug": "^0.3.0",
    "gulp-if": "^1.2.1",
    "gulp-livereload": "^2.1.0",
    "gulp-plumber": "^0.6.4",
    "gulp-sass": "^0.7.2",
    "gulp-typescript-compiler": "^1.0.0",
    "gulp-uglify": "^0.3.1",
    "gulp-util": "^3.0.0",
    "karma": "^0.12.16",
    "karma-chrome-launcher": "^0.1.4",
    "karma-jasmine": "^0.1.5",
    "mkdirp": "^0.5.0",
    "q": "^1.0.1",
    "rimraf": "^2.2.8",
    "typescript": "^1.0.1",
    "url": "^0.10.1",
    "yargs": "^1.2.6"
  }
}

“includes-clean”任务是一个很好的起点。该任务将 htm* 和字体文件复制到我的 dist 输出。对于我当前的测试项目，它匹配 7 个文件，总计 32kb。应该不会花很长时间，但我发现完成任务平均需要 15 秒。

我怀疑我处理 commonIgnore 列表的方式可能是问题所在。如果 gulp 正在遍历所有 node_modules 和 vendor 文件夹(即使它们应该被忽略)，它可能会导致速度变慢。

Answer 1

我认为您处理排除项的方式是正确的。 node_glob中的评论source 意味着否定模式将针对与非否定模式匹配的所有内容进行测试。我认为您应该将源文件移动到 dev 或 src 目录下，这样您就不必排除 node_modules 等。