1

私が書いたばかりのgulpファイルがあり、これは初めてです。機能していますが、必要だと思うよりも多くのタスクがあります。

javascript タスクを 1 つのタスクとしてまとめるのを手伝ってくれる人はいますか?

完了したら、4 つの個別の 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 に答える