مراقبة Gulp - تنفيذ المهام بالترتيب (متزامن)

Question

لدي سلسلة من المهام ليتم تشغيلها من قبل مراقب ولكن يمكنني أن أجعلها تنطلق بالترتيب:

وهنا بلع المهام والمراقب.

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});


gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_scss', 'app_build_css']);
});

gulp.task('default', ['app_build_clean', 'app_scss', 'app_vendor_css', 'app_build_css', 'watch']);

لذلك عندما أقوم بتحديث ملف scss، يجب أن أقوم بتجميعه وإنشاء ملف css واحد.ثم تقوم مهمة الإنشاء بربط الملف بملفات البائع.ولكن في كل مرة أقوم بحفظ ملف، يكون دائمًا متأخرًا بخطوة واحدة.شاهد الفيديو كمثال: http://screencast.com/t/065gfTrY

لقد قمت بإعادة تسمية المهام، وغيرت الترتيب في رد اتصال الساعة وما إلى ذلك.

هل أرتكب خطأ واضحا؟

Answer 1

يبدأ Gulp جميع المهام في الوقت "نفسه"، ما لم تعلن عن التبعيات (أو تجعل التدفقات تمر عبر بعضها البعض).

لذلك على سبيل المثال، إذا كنت تريد المهمة app_build_css لانتظار المهام app_scss و app_vendor_css لإكمال، إعلان التبعيات،

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', ['app_scss', 'app_vendor_css'], function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});


gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_build_css']);
});

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

افحص ال مستندات Gulp.task()

Answer 2

مع GULP 3 أستخدمه تسلسل التشغيل حزمة للمساعدة في تشغيل المهام بالتسلسل وليس بالتوازي.هذه هي الطريقة التي أقوم بتكوينها watch المهام، على سبيل المثال:

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

gulp.task('watch', function() {
    gulp.watch('templates/**/*.html', function(){ runSequence('templates', 'bundleJS') });
});

يوضح المثال أعلاه نموذجيًا watch المهمة التي سوف ربط gulp.watch طريقة مع الملفات التي سيتم الاستماع إليها عند تغييرها، ومع وظيفة رد الاتصال لتشغيلها عند اكتشاف التغيير.ال runSequence يتم بعد ذلك استدعاء الوظيفة (ضمن رد اتصال معين watch) مع قائمة المهام التي سيتم تشغيلها بطريقة متزامنة، على عكس الطريقة الافتراضية التي تقوم بتشغيل المهام بالتوازي.

Answer 3

غلب v4

الآن بعد أن تم إصدار Gulp v4 منذ أكثر من عام تقريبًا (تم إصداره في نهاية عام 2017)، فإنه يقدم بعض الطرق الرائعة لتسلسل المهام باستخدام مكتبتهم المسماة bach.

https://github.com/gulpjs/bach

ملحوظة:أوصي بالانتقال إلى Gulp v4 نظرًا لأن الإصدار 3 به بعض الثغرات الأمنية [لست متأكدًا مما إذا كان قد تم تصحيحها الآن].

مثال سريع

يقدم Gulp v4 gulp.series و gulp.parallel, ، يتيح لك ذلك إنشاء المهام واختيار تشغيلها بشكل متتابع أو متوازي أو مختلط كما هو موضح أدناه.

توضيح:سيتم تشغيل هذا scss و js المهام في موازي, ، بمجرد اكتمالها، سيتم تشغيل الملف watch المهمة لأنهم في مسلسل.

const defaultTasks = gulp.series(
  gulp.parallel(scss, js),
  watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';

module.exports = {
  default: defaultTasks,
  scss,
  js
}

مثال موسع

فيما يلي مثال بسيط لما قد يبدو عليه ملف gulp الخاص بي.

const gulpScss = require('gulp-sass');
const gulpBabel = require('gulp-babel');

const paths = {
  scss: [
    'public/stylesheets/*.scss'
  ],
  js: [
    'public/js/*.js'
  ]
};

const scss = () => {
  return gulp.src(paths.scss)
    .pipe(gulpScss)
    .pipe(gulp.dest('dist'));
}
scss.description = 'Transpiles scss files to css.';

const js = () => {
  return gulp.src(paths.js)
    .pipe(gulpBabel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('dist'));
}
js.description = 'Transpiles JS with babel';

const watch = () => {
  gulp.watch(paths.scss, scss);
  gulp.watch(paths.js, js);
}
watch.description = 'Watches for changes to files and runs their associated builds.';

const defaultTasks = gulp.series(
  gulp.parallel(scss, js),
  watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';

module.exports = {
  default: defaultTasks,
  scss,
  js
}