Question

我有一个我刚写的gulp文件，我是新手。它工作正常，但我的任务比我想要的要多。

任何人都可以帮我把javascript任务串起来作为一项任务吗？

当我完成时，我需要四个单独的js文件。

gulpfile.js的相关代码片段：

    var gulp = require('gulp')
        uglify = require('gulp-uglify'),
        rename = require('gulp-rename'),
        concat = require('gulp-concat'),
        notify = require('gulp-notify'),
        cache = require('gulp-cache'),
        del = require('del');


    gulp.task('clean', function(cb) {
        del(['css/*', 'js/min/*'], cb)
    });

    gulp.task('featuretest', function() {
        return gulp.src('js/feature-test.js')
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('js/min'))
    });

    // This file: '/js/excanvas.min.js' is only loaded via lte IE8 conditional statement
    gulp.task('excanvas', function() {
        return gulp.src('js/polyfills/excanvas.js')
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('js/min'))
    });

    // This file: '/js/charts.min.js' is only used on very few pages
    gulp.task('charts', function() {
        return gulp.src(['js/highcharts-4.0.1.js', 'js/usfa-theme.js'])
        .pipe(concat('charts.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('js/min'))
    });

    // This file: '/js/main.min.js' is a concat of 'libs/jquery', a few polyfills (except excanvas.js and the highcharts)
    gulp.task('scripts', function() {
        return gulp.src(['js/libs/*.js', 'js/plugins/*.js', 'js/polyfills/*.js', '!js/excanvas.js', '!js/highcharts-4.0.1.js', 'js/custom.js'])
        .pipe(concat('main.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('js/min'))

        .pipe(notify({ message: 'Scripts task complete' }));
    });

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

      // Watch .js files
      gulp.watch('js/**/*.js', ['featuretest', 'excanvas', 'charts', 'scripts']);

    });



    gulp.task('default', ['clean'], function() {
        gulp.start('featuretest', 'excanvas', 'charts', 'scripts');
    });

我想做的事情：

    var gulp = require('gulp')
        uglify = require('gulp-uglify'),
        rename = require('gulp-rename'),
        concat = require('gulp-concat'),
        notify = require('gulp-notify'),
        cache = require('gulp-cache'),
        del = require('del');


    gulp.task('clean', function(cb) {
        del(['css/*', 'js/min/*'], cb)
    });

    gulp.task('scripts', function() {
    // This file: '/js/feature-test.js' is loaded in the doc <head>
        return gulp.src('js/feature-test.js')
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('js/min'))

    // This file: '/js/excanvas.min.js' is only loaded via lte IE8 conditional statement at the end of the doc    
        return gulp.src('js/polyfills/excanvas.js')
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('js/min'))

    // This file: '/js/charts.min.js' is only used on very few pages and is loaded only when needed at the end of the doc
        return gulp.src(['js/highcharts-4.0.1.js', 'js/usfa-theme.js'])
        .pipe(concat('charts.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('js/min'))

    // This file: '/js/main.min.js' is a concat of 'libs/jquery', a few polyfills (except excanvas.js and the high charts), it is loaded at the end of every doc

        return gulp.src(['js/libs/*.js', 'js/plugins/*.js', 'js/polyfills/*.js', '!js/excanvas.js', '!js/highcharts-4.0.1.js', 'js/custom.js'])
        .pipe(concat('main.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('js/min'))

        .pipe(notify({ message: 'Scripts task complete' }));
    });

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

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

    });



    gulp.task('default', ['clean'], function() {
        gulp.start('scripts');
    });

Answer 1

如果您问的问题是如何将单独的操作合并为一个任务，则可以将流与gulp-util合并。

var gulp = require('gulp')
    uglify = require('gulp-uglify'),
    util = require('gulp-util');

gulp.task('scripts', function() {
    var featureTest = gulp.src('js/feature-test.js')...

    var excanvas = gulp.src('js/polyfills/excanvas.js')...

    var charts = gulp.src(['js/highcharts-4.0.1.js', 'js/usfa-theme.js'])...

    var scripts = gulp.src(['js/libs/*.js', 'js/plugins/*.js', 'js/polyfills/*.js', '!js/excanvas.js', '!js/highcharts-4.0.1.js', 'js/custom.js'])...

   // combine streams
   return util.combine(featureTest, excanvas, charts, scripts);
});

这将为您提供一个任务，但速度并不快。如果你没有强迫事情顺序进行，那么gulp将会像它一样快。

gulp任务可以组合得更快吗？

1 个答案: