1

我有一个我刚写的 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');
    });
4

1 回答 1

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 会尽可能快。

于 2014-08-18T14:25:15.640 回答